Lightboxとは
画像をクリックしたとき、かっこよくオーバーレイで拡大表示してくれるライブラリです。
公式サイトはコチラです。
使ったコトなかったのでメモします。
Bloggerで一カ所 設定するだけで使えます。
このエントリの目次
1.Bloggerの設定2.ブログ本文の書き方
1.Bloggerの設定
まず、Blogger ダッシュボードに行きます。で、下記のように、Lightboxを設定したブログの「設定」を押します。
(分かりにくいですが、画像 右下のあたりです)
すると、
下のような画面になります。
で、画像 左下の「投稿とメール」をクリックします。
すると、
上のような画面が出ます。
「ライトボックスで画像をアピール」の項目があるので、ここで「はい」を選択します。
で、(画像では切れて表示されていないですが)画面 右上にある「設定を保存」ボタンを押します。
これで、Bloggerの設定が完了しました。
2.ブログ本文の書き方
以下のように書けば、Lightboxが使えます。<a href="画像のURL"><img src="画像のURL" height="拡大前のサイズ" width="拡大前のサイズ"></a>
もっと具体的に書くと、こんな感じです。
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjdhGjfQNW7usvPEd-pus6ilMPhdfsp7Jo0DAMn6FlE-QT3cXDso6qIKwJ9SPSdJ_UyaP4pVzj3LF31qCAtO0jBeGnIx9wnlpuXSPPtpgm75BS2Zcim8hKrEBb6iuL00YCadEYJkrVtFc/s800/Blank.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjdhGjfQNW7usvPEd-pus6ilMPhdfsp7Jo0DAMn6FlE-QT3cXDso6qIKwJ9SPSdJ_UyaP4pVzj3LF31qCAtO0jBeGnIx9wnlpuXSPPtpgm75BS2Zcim8hKrEBb6iuL00YCadEYJkrVtFc/s800/Blank.png" height="144" width="144"></a>
上のコードを実際に書くとこうなります。
以上です。
