はてなブログマークダウン記法で画像に好きなリンクを付けたい

はてなブログ(マークダウン記法)で自分でupした画像にリンクを貼る方法がちとメンドーだったのでメモ

はてなブログのサイドバーのメニュー写真を投稿から画像をアップロードして記事に挿入すると、エディターでは次のようなはてな独自のf:idから始まるショートコード(fotolife記法)になります。

[f:id:kikiki-kiki:20180721152853j:plain]

プレビューで見るとこんな感じ。👇
f:id:kikiki-kiki:20180721152853j:plain

<span itemscope="" itemtype="http://schema.org/Photograph">
  <img src="{image-url}" alt="f:id:kikiki-kiki:20180721152853j:plain" title="f:id:kikiki-kiki:20180721152853j:plain" class="hatena-fotolife" itemprop="image">
</span>

aタグは付いていないのですが、自動的に画像をクリックするとpopupで表示されるイベントが設定されています。

独自のリンクを貼ろうとして、

<a href="https://chaika.hatenablog.com/">
  [f:id:kikiki-kiki:20180721152853j:plain]
</a>

の様に画像のショートコードを<a></a>で囲んでもショートコードが画像に展開されず、ただのリンクの付いた文字列になってしまいます。👇
[f:id:kikiki-kiki:20180721152853j:plain]

記事中に挿入した画像に好きなリンクを貼りたい場合は、この自動挿入されるfotolife記法ではない方法で画像を表示させる必要があるようです。

はてなブログで挿入した画像に好きなリンクを貼る方法

1. マークダウンで画像を表示する方法

ただの画像を表示するマークダウンで画像を表示してしまえば、好きにリンクを設定することができます。

マークダウンで画像を表示する方法 👇

![alt属性](画像のURL "画像のtitle属性")

※ alt属性は空、title属性は無くてもOK

画像をuploadし挿入する
プレビュー表示
画像のURLを取得 ※ chromeの場合は画像を右クリックし「画像アドレスをコピー」で取得できます。
編集モードに戻し、挿入された画像のタグを削除
マークダウンで画像を作成
![alt]({画像のURL})
画像のタグをリンクで囲む
[![alt]({画像のURL})](リンク貼るURL)

最終的にサンプルの例だと次のような感じになっていればOK

[![星宮いちごです！](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file})](https://chaika.hatenablog.com/)
## titleを設定する場合
[![星宮いちごです！](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file} "おしゃもじをマイクに")](https://chaika.hatenablog.com/)
## 空altの画像で
[![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file})](https://chaika.hatenablog.com/)

👇

<a href="https://chaika.hatenablog.com/">
  <img src="{画像のURL}" title="おしゃもじをマイクに" alt="星宮いちごです！">
</a>

aタグにtitle属性を付ける方法

リンクのマークダウンのURLの後ろに"で囲った文字列を付けるとaタグのtitle属性を設定することができます。

[表示される要素](リンク貼るURL "aタグのtitle属性")

画像にリンクを貼ってリンク(aタグ)にtitle属性を設定する👇

[![星宮いちごです！](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file} "おしゃもじをマイクに")](https://chaika.hatenablog.com/ "EVERY DAY IS A NEW AIKATSU DAY!")

<a href="https://chaika.hatenablog.com/" title="EVERY DAY IS A NEW AIKATSU! DAY">
  <img src="{画像のURL}" title="おしゃもじをマイクに" alt="星宮いちごです！">
</a>

画像のaltもaタグのtitleも自由に設定できるのでSEO的にも素敵です！　

2. はてなの画像リンク`:image=`を使う方法

「:image」と記述すると、そのURLが画像を示している場合、その画像を直接表示させることができます。
出典: リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ　

プレビューから取得した画像のURLをそのままエディターに入れた場合

[https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file}]

このままでは画像は表示されず、画像にリンクの貼られれた状態でURLがそのままテキストで表示されます👇
https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg

画像のURLの後ろに:imageを付けると画像が表示されるようです。

[https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file}:image]

👇表示

それならこれをリンクのマークダウンのテキストにしたり、aタグで囲えばうまく行きそうな気がします。

## markdown
[[{画像のURL}:image]](https://chaika.hatenablog.com/)
## html
<a href="https://chaika.hatenablog.com/">[{画像のURL}:image]</a>

👇 残念ながらmarkdownでもhtmlの記述方式でも画像のURLがそのまま表示されてしまいました。
はてなの独自ショートコードはタグで囲むとプレーンテキストと解釈されるのでしょうか？
markdown
https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg:image
html
[https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg:image]

また、「:image=」に続けて画像のURLを指定することで、任意の画像に対してリンクを設定することができます。
出典: リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ

[リンク貼るURL:image={画像のURL}]

この方法だと画像に独自のリンクを貼ることができました。👇

<a href="https://chaika.hatenablog.com/" class="http-image">
  <img src="{画像のURL}" class="http-image" alt="https://chaika.hatenablog.com/">
</a>

imgタグ・aタグにalt, title属性を設定する方法はよく調べてないのでちょっと解りませんでした。(そのまま:title=をつけても意図したとおりに表示されなかった...)

3. その他の方法

プレビューで画像のURLを取ってくるので通常のHTMLにしてしまってももちろん問題なく画像に独自のリンクを設定することができます。

<a href="https://chaika.hatenablog.com/"><img src="{画像のURL}" alt="" title=""></a>

いずれにせよ、一度挿入した画像をプレビューしてURLを取得しなければならないのでチョット面倒です...
一度画像のURLを取得してしまったら[![画像URL]](リンク)でも[リンク:image=画像URL]どちらでも手間は同じくらいな印象でした。(マークダウンの![]の方がaltやtitleも細かく設定できるし、githubとか色んな所で応用は効きそうです)
まぁ画像挿入時にリンクを簡単に設定できるオプションが欲しいところですが…

[参考]