リンクを簡単に記述する(http記法、mailto記法)

Hatena::Diary

はてなダイアリー ヘルプ

リンクを簡単に記述する(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@example.com

と記述すると、

http://www.hatena.ne.jp/

https://www.hatena.ne.jp/login

info@example.com

と表示されます。なお、はてな各サービスのトラックバックに対応したページの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]

http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg

http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg

http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg

screenshot ( 通常サイズ )

screenshot ( ラージサイズ )

screenshot ( スモールサイズ )

http://www.hatena.ne.jp/

さらに画像のURLに加えて「:image:left(right)」といった指定を行うことで、レイアウトの指定が可能です。

例 [http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:right]

http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg

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]

と書くと、

はてな

hatena

はてな

hatena

のように表示されます。

なお、末尾が「:bookmark」となっているタイトルを指定することができません。お気を付けください。

URLの詳細情報を表示する

[http://www.hatena.ne.jp/:detail]

のように、詳細情報を表示したい URL の後ろに :detail と追加することで、以下のようなはてなブックマークの詳細を表示できることができます。

URL の詳細な内容をブックマークコメントと共に表示したい場合などにご利用ください。

なお、モバイル版では PC 向けのはてなブックマーク詳細表示が端末によってはうまくできないため、URLのタイトルのとブックマーク数が表示されるように調整を行っております。


二次元バーコード(QRコード)を表示する

:barcode」と記述することで、携帯端末のカメラなどで読み取ることのできる2次元バーコード(QRコード)を表示させることができます。

[http://www.hatena.ne.jp/:barcode]

http://www.hatena.ne.jp/

音声や動画再生プレーヤーを表示する

その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]

と記述すると、それぞれ

Download

と表示されます。

関連する情報