BloggerにLightbox風エフェクトを導入して幸せになる・簡単導入編
ブログ記事の写真に自動で Lightbox 風エフェクトを付けてくれる Slimbox2 を導入してみよう
Google のブログサービス・Blogger は Picasa ウェブアルバムに簡単に画像をアップロードしたり、それをブログに追加できたりと便利です。 でも、いざ公開された記事で画像のサムネイルをクリックすると別ページで画像を開いてしまうのがいけてません。
このたびはそんな Blogger に簡単なテンプレートの変更で Lightbox 機能を追加する方法をご紹介いたします。
しかも今回の方法では、一度テンプレートを変更すればそれきり！記事を書くときに画像のリンク<a>にrel="lightbox"などと書く必要もありません！
そのため以前書いた記事にも一切変更なしで Lightbox 風の効果が追加できます。
Slimbox2について
Lightbox 風の効果を追加してくれるライブラリはいくつかありますが、このたび使用した Slimbox2 は効果の適用対象を自分で細かく設定できます。そのおかげでrel="lightbox"を書かなくてもよいかたちにできました。
ブログのテンプレートに追記
変更箇所はたったの2つ、あわせて3行です。Bloggerのダッシュボード > デザイン >HTMLの編集 であなたのブログのテンプレートを表示します。また、作業はコードを一旦メモ帳などにコピーしてから行うとスムーズだと思います。
スタイルシートを追加
まずは<head></head>の間に、スタイルシートへのリンクを書き込みます。
<link href='http://casio-pb-100.googlecode.com/svn/blogger/slimbox2/slimbox2.css' rel='stylesheet' type='text/css' />
スクリプトを追加
続いて<body></body>タグに（なるべく最後のほうがいいでしょう）javascript の読み込みを追記します。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' />
<script type='text/javascript' src='http://casio-pb-100.googlecode.com/svn/blogger/slimbox2/slimbox2_for_blogger.js' />
追加を終えたら、テンプレートの保存をクリックします。
すでにブログに jQuery を使っている場合は適宜読み替えてください。また、Slimbox2 は jQuery1.3 以上で動作となっています。
導入完了
さぁ、これで Slimbox2 の導入は完了です。早速動作を確認してみましょう。
あなたがずっと以前に書いた記事にも一切変更を加えることなしに Slimbox2 の機能が追加されたことと思います。ただし、ページの読み込みが完了する前にサムネイルをクリックしてしまうとまだ Slimbox2 は効いていませんのでご注意を！
今回追加した blogger 用の設定を追記した slimbox2.js は以下になります。
うまく動かなかった場合は…
スクリプトなどが正しく読み込まれていても、サイトのテンプレートをいじっている場合や一部のテンプレートでうまく機能しないかもしれません。その場合は、解説編を参考に Slimbox2 の設定を修正します。
BloggerでSlimbox2を使い続けたい！という方
本格導入編を参考にして、あなたの管理する Web スペースに Slimbox2 をアップロードしましょう。