いろいろブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

Markdownで画像にリンクを貼る


※本サイトはアフィリエイトプログラムによる収益を得ています。
 ページ内のリンクがアフィリエイトリンクの場合があります。

 Markdownで書いているときに、挿入した画像にリンクを貼る方法です。

ブログに画像を貼り付けるとはてなフォトライフ経由のfotolife記法になる

 はてなブログで画像を普通にアップロードすると、はてなフォトライフ経由で記事に貼り付けられます。

 例えばこの画像、

f:id:kagerou_ts:20171206105633j:plain

 なんでもいいんで本サイトのトップページを適当にキャプったものですが、これは記事内では

[f:id:kagerou_ts:20171206105633j:plain]

 と記述されています。

 これを素直にaタグで囲んでも、

<a href="http://hatebu-memo.scriptlife.jp/">
[f:id:kagerou_ts:20171206105633j:plain]
</a>

[f:id:kagerou_ts:20171206105633j:plain]

と肝心の画像が変換されない状態となってしまい、上手くいきません。

画像URLを拾ってHTTP記法を使う

 ではどうするか。今のところ見つけた方法は、はてなフォトライフの画像URLを拾ってリンクすることです。

 一旦表示された画像のURLをブラウザで(右クリックからなどで)取得して、それをリンクに使用します。

 例えばChromeでは、プレビューで表示された画像を右クリックすると「画像アドレスを取得」メニューが出ますから、それを選択するとURLがコピーされています。

 上の画像についてURLは「https://cdn-ak.f.st-hatena.com/images/fotolife/k/kagerou_ts/20171206/20171206105633.jpg」になります。

 で、これをHTTP記法で

[http://hatebu-memo.scriptlife.jp/:image=https://cdn-ak.f.st-hatena.com/images/fotolife/k/kagerou_ts/20171206/20171206105633.jpg]

 とすると、次のように画像へリンクを設定することが出来ます。

http://hatebu-memo.scriptlife.jp/

 画像のURLが分かってしまえばいろいろ応用が利きますが、URLがはてな側のメンテナンスで一括変更された場合などに手動対応する必要が出てきます。

 その点にはお気をつけ下さい。

はてなフォトライフに登録した写真を表示する(fotolife記法) - はてなダイアリーのヘルプ
http記法で任意の画像に対してリンクを設定できるようになりました - はてなダイアリー日記

スポンサーリンク