PB-100の宇宙の中の人
PBロッキーの日記

BloggerにLightbox風エフェクトを導入して幸せになる・簡単導入編

ブログ記事の写真に自動でLightbox風エフェクトを付けてくれるSlimbox2を導入してみよう

Googleのブログサービス・BloggerはPicasaウェブアルバムに簡単に画像をアップロードしたり、それをブログに追加できたりと便利です。でも、いざ公開された記事で画像のサムネイルをクリックすると別ページで画像を開いてしまうのがいけてません。

このたびはそんなBloggerに簡単なテンプレートの変更でLightbox機能を追加する方法をご紹介いたします。

しかも今回の方法では、一度テンプレートを変更すればそれきり!記事を書くときに画像のリンク<a>にrel="lightbox"などと書く必要もありません!そのため以前書いた記事にも一切変更なしでLightbox風の効果が追加できます。

Slimbox2について

Lightbox風の効果を追加してくれるライブラリはいくつかありますが、このたび使用したSlimbox2は効果の適用対象を自分で細かく設定できます。そのおかげでrel="lightbox"を書かなくてもよいかたちにできました。

slimbox2
Slimbox 2.04 for jQuery 1.3 and 1.4

ブログのテンプレートに追記

変更箇所はたったの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は以下になります。

source slimbox2_for_blogger.js
このブログのテンプレート

うまく動かなかった場合は…

スクリプトなどが正しく読み込まれていても、サイトのテンプレートをいじっている場合や一部のテンプレートでうまく機能しないかもしれません。その場合は、解説編を参考にSlimbox2の設定を修正します。

BloggerにLightbox風エフェクトを導入して幸せになる・徹底解説編

BloggerでSlimbox2を使い続けたい!という方

本格導入編を参考にして、あなたの管理するWebスペースにSlimbox2をアップロードしましょう。

BloggerにLightbox風エフェクトを導入して幸せになる・本格導入編

1コメント

さんのコメント...

コメントの削除