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

2018年9月17日月曜日

Blogger LightBox StackEdit

t f B! P L

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 で表示されてしまう
enter image description here

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

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

[再修正後の Markdown]

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

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

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

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

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ