Stackedit から Blogger に投稿する画像を LightBox に対応する

Stackeidt から Blogger に画像を投稿すると、
LightBox が発動しない件についての対処方法です。

※ LightBox とは ･･･ 画像をクリックすると画像が拡大表示されるアレです

問題点 (なぜ LightBox が発動しないのか )

Bloggerで直接画像を投稿した場合と、Stackedit から画像を投稿した場合で、
生成される HTMLが異なる事が原因でした。

• Blogger で画像を投稿した場合の HTML

<a href="https://2.bp.blogspot.com/af...xyz">
  <img data-original-height="600" 
       data-original-width="296" 
       height="320" 
       width="157" 
       src="https://2.bp.blogspot.com/af...xyz"  />
</a>

• Stackedit 経由で Blogger に画像を投稿した場合の HTML

<img src="https://lh3.googleusercontent.com/AF...XYZ">

Stackedit で画像を投稿した場合は、LightBox を発動する為の、
<a> タグが生成されない事が問題だった。。。

対処方法

画像がリンク表示されれば LightBox が発動するので、
img タグが a タグで囲まれるように Markdown を記述します。

[修正前の Markdown]

![東京](https://lh3.googleusercontent.com/AF...XYZ)

※ LightBox が発動しない。

---

[修正後の Markdown]

[![東京](https://lh3.googleusercontent.com/AF...XYZ)]
(https://lh3.googleusercontent.com/AF...XYZ)

※ LightBox が発動する！！

これで 一応 LightBox は発動しました！！
しかし このままでは↓のイメージの通り、記事本文の縮小画像サイズのまま、
LightBox が表示されてしまい、あまり意味がありません。

↓ 縮小画像のままLightBox で表示されてしまう

対処方法２( 最終的にこうなりました )

LightBox で拡大表示する時だけ、元の大きい画像を表示させるには、
<a> タグの URLに、画像サイズを指定する事で、
拡大時のみ大きい画像を見せる事ができます。

[再修正後の Markdown]

[![東京](https://lh3.googleusercontent.com/AF...XYZ)]
(https://lh3.googleusercontent.com/AF...XYZ=s1600)

(POINT) <a> タグのURL末尾に =s1600 で画像サイズを指定します。

※ 元の大きい画像サイズでLightBox が発動する！！

↓ 元の画像サイズで、画像が拡大表示される