World Wide Windblue: Blogger で Lightbox を使う方法

2012年2月17日金曜日

Blogger で Lightbox を使う方法

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>

上のコードを実際に書くとこうなります。

以上です。

4 件のコメント:

匿名2012年3月7日 10:38
はじめまして。
Bloggerでライトボックスを使う設定に関しての質問ですが、こちらでご紹介されている設定方法は、カスタムドメイン（リダイレクト設定）では、出来なかったのですが、カスタムドメインのBloggerでライトボックスを使う方法をご紹介いただけないでしょうか？？
返信削除
返信
World Wide Windblue2012年3月24日 15:33
はじめまして。
コメントありがとうございます。

カスタムドメインですか…すみません、使ったことがないので分からないです。
英語でググったり、BloggerのGoogleグループを見たりもしましたが、そういう情報は見当たりませんでした。
お力になれずすみません。

下記URLからヘルプフォーラムに投稿したり、サポートに問い合わせることができるようですので、そちらに聞いてみるのはいかがでしょうか。
http://support.google.com/blogger/bin/request.py?contact_type=contact_policy
返信削除
返信
kurumiyama2012年8月15日 20:52
BloggerでLightboxを使って楽しんでいます。7月まではクリックして拡大された画像がSXGAの画面いっぱいにまで広がってとてもきれいだったのですが、8月になってから拡大された画像がなぜか800X600になってしまいました。Bloggerの規格が変わったのか、アップしてきた画像が所定の量を超えた（？）のか原因が全くわかりません。何かアドバイスをいただければ大変ありがたいです。BlogのURLは下記です。
http://kurumiyama.blogspot.jp/
よろしくお願いいたします。
返信削除
返信

コメントを追加