リンクを簡単に記述する(http記法、mailto記法)
■ リンクを簡単に記述する(http記法、mailto記法)
日記やキーワードの文中の「http:」「https:」「ftp:」「mailto:」ではじまるURL・メールアドレスは、自動的にそのURL・メールアドレスへのリンクになります。URLが期待通りに認識されない場合は、そのURLの前後を角カッコで「[http:~~]」というように囲むことで、どこまでがURLかを指定することができます。ただし、漢字などマルチバイト文字はURLに含められません(パーセントエンコードが必要です)。
http://www.hatena.ne.jp/ https://www.hatena.ne.jp/login mailto:info@hatena.ne.jp
と記述すると、
と表示されます。なお、はてな各サービスのトラックバックに対応したページのURLを記述した場合、そのページに自動的にトラックバックが送信されます。
■ オプション指定
URL全体を角カッコで囲んだ上で、閉じカッコの前に半角コロン「:」で始まる特定の記述をすると、その記述に応じて様々な表示をさせることができます。
ページタイトルを表示する
「:title」と記述すると、そのページのタイトルを自動的に表示させることができます。このタイトルははてなダイアリーのサーバで自動的に取得され、定期的に更新されます。また、「:title=」の後に文字列を書くことで、表示されるタイトルを指定することができます。
[http://www.hatena.ne.jp/:title] [http://www.hatena.ne.jp/:title=はてなのトップページ]
画像を表示する
「:image」と記述すると、そのURLが画像を示している場合、その画像を直接表示させることができます。「:image」の後ろに「:h**」や「:w**」(**部分は整数)と続けて記述すると、表示するサイズをピクセル単位で調節することができます。
また、画像以外のページのURLである場合は、そのページのスクリーンショットを表示させることができます。スクリーンショットは通常サイズのほか、「:large」と続けて記述することでラージサイズを、「:small」と続けて記述することでスモールサイズを表示させることができます。
また、「:image=」に続けて画像のURLを指定することで、任意の画像に対してリンクを設定することができます。
[http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image] [http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:h50] [http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:w150] [http://www.hatena.ne.jp/:image] ( 通常サイズ ) [http://www.hatena.ne.jp/:image:large] ( ラージサイズ ) [http://www.hatena.ne.jp/:image:small] ( スモールサイズ ) [http://www.hatena.ne.jp/:image=http://www.hatena.ne.jp/images/top/h1.gif]
さらに画像のURLに加えて「:image:left(right)」といった指定を行うことで、レイアウトの指定が可能です。
例 [http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:right]
right指定を行うと画像がこのように右側に表示されます。
画像の下から文章を書き始めたい場合は、その文章の上に <br clear="all"> と書き込むと、画像の回り込みが解除されます。
【上級者向け】画像サイズとレイアウトを同時に表示する方法
はてな記法で画像の表示サイズとレイアウトを同時に指定するには、半角カンマ「,」を用いて指定を併記してください。
たとえば上記の画像を横90ピクセル、縦67ピクセルで右側に表示したい場合、以下のように指定します。
[http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:w90,h67,right]
最後のカンマで繋げられた部分=「w90,h67,right」は順不同で、「h67,w90,right」や「right,w90,h67」のように書くこともできます。
ブックマーク数を表示する
「:bookmark」と記述すると、そのページのブックマーク数を表示し、はてなブックマークのエントリーページにリンクします。
[http://www.hatena.ne.jp/:bookmark]
と記述すると、
のように表示されます。
また、ページタイトルを表示する「:title」指定と併記することもできます。
[http://www.hatena.ne.jp/:title:bookmark] [http://www.hatena.ne.jp/:title=hatena:bookmark] [http://www.hatena.ne.jp/:bookmark:title] [http://www.hatena.ne.jp/:bookmark:title=hatena]
と書くと、
のように表示されます。
なお、末尾が「:bookmark」となっているタイトルを指定することができません。お気を付けください。
URLの詳細情報を表示する
[http://www.hatena.ne.jp/:detail]
のように、詳細情報を表示したい URL の後ろに :detail と追加することで、以下のようなはてなブックマークの詳細を表示できることができます。
URL の詳細な内容をブックマークコメントと共に表示したい場合などにご利用ください。
なお、モバイル版では PC 向けのはてなブックマーク詳細表示が端末によってはうまくできないため、URLのタイトルのとブックマーク数が表示されるように調整を行っております。
二次元バーコード(QRコード)を表示する
「:barcode」と記述することで、携帯端末のカメラなどで読み取ることのできる2次元バーコード(QRコード)を表示させることができます。
[http://www.hatena.ne.jp/:barcode]
音声や動画再生プレーヤーを表示する
そのURLが「.mp3」で終わるmp3ファイルを示している場合、「:sound」と記述すると再生プレーヤーを表示します(再生プレーヤーの表示には最新版のFlashプレーヤーが必要です。また使用しているソフトウェアの制限上、エンコードモードが CBR(固定ビットレート)、サンプリングレートが 44KHz、22KHz、11KHz のいずれかの音声ファイルでない場合は正常に再生できない場合があります)。
また、そのURLが映像を示している場合、URLの最後に「:movie」と記述すると動画の再生プレーヤーを表示します。この記述について詳しくは、別ページの「日記で動画ファイルの再生プレーヤーを表示する」で説明しています。
[http://hatena.g.hatena.ne.jp/files/hatena/3ab34c9ad414e964.mp3:sound] [https://hatena.g.hatena.ne.jp/files/hatena/b9f904875fcd5333.flv:movie]
と記述すると、それぞれ
と表示されます。
関連する情報
- 2008/03/05 14:20:01 はてなダイアリーで注目の情報をチェックする
- 2010/11/17 17:43:57 はてなダイアリーの提供しているRSS
- 2010/11/17 18:02:22 はてなダイアリー機能一覧
- 2009/12/16 16:57:25 リンクを簡単に記述する(http記法、mailto記法)
- 2010/06/04 18:45:49 リンクを開くウィンドウの設定を変更する
- 2010/06/04 19:10:46 言及したURLを表示する(urllogモジュール)
- 2011/04/20 15:13:17 HTMLや記法の入力支援ボタンを使う
- 2010/02/20 15:13:40 動画を簡単に貼り付ける(ビデオキ)
- 2009/09/14 12:06:41 引用ブロックを作る(引用記法)
- 2010/07/23 15:42:04 携帯端末からはてなダイアリーを見る
- 2010/06/04 19:12:30 携帯電話向けQRコードを表示する(barcodeモジュール)
- 2008/09/19 16:41:15 日記で動画ファイルの再生プレーヤーを表示する(http記法)
- 2005/12/21 19:40:57 日記内でHTMLタグを使う
- 2012-09-04 20:28:28 うさみ日記 - ]2012/08/28と29日のCakePHP二日間研修で、調べた言葉のリスト。
- 2012-09-04 20:25:17 うさみ日記 - [プログラム]
- 2012-08-29 19:07:07 うさみ日記 - [メモ]2012/08/28と29日の二日間研修で、調べた言葉のリスト。
- 2012-08-21 22:55:23 残像ブログ - はてダで記事にmp3再生プレイヤーを埋め込む
- 2012-03-11 15:09:48 真実を求めて - はてなで リンクを文字にする方法
- 2011-11-17 00:58:48 (rubikitch loves (Emacs Ruby CUI Books)) - はてな記法
- 2011-11-17 00:54:07 (rubikitch loves (Emacs Ruby CUI Books)) - はてな記法
- 2011-11-17 00:49:27 (rubikitch loves (Emacs Ruby CUI Books)) - はてな記法
- 2011-11-07 00:21:00 YAMDAS現更新履歴 - はてなダイアリーのスクリーンショット表示機能が約半年機能していないように見える
- 2011-07-04 10:25:59 習俗論ノオト - はてな記法で使えるアカデミック・ライティング向けあれこれ