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

Bloggerにslimbox2を本格導入！

この記事は、簡単導入編の続きになります。

ファイルの準備

まずはslimbox2をダウンロード

slimbox2の最新版は2.04となっています。（2011/6現在）以下のリンクからダウンロードできます。

また、ソフトに更新があった場合は、以下の作者さまのページでアナウンスがあるでしょう。

zipファイルを解凍

1. /js/slimbox2.js 圧縮されたslimbox2本体が入っている。その下のslimbox2の起動設定をBlogger用に書き換える。
2. /css/slimbox2.css アラビア語のように左から右に読む言語のサイトの場合、slimbox2-rtl.cssの方を使用。
3. /css/closelabel.gif
4. /css/loading.gif
5. /css/nextlabel.gif
6. /css/prevlabel.gif

以上を適当なフォルダにコピーしてまとめておきましょう。

slimbox2.jsにBlogger用の設定を書き込む

slimbox2.jsの以下の部分で、指示されたhtml要素に対してエフェクトを追加しています。ここをBlogger用のものに書き換えます。

 // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
 if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
  jQuery(function($) {
   ~略~
  });
 }

以下のようにします。

 // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
 if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
  (function(){
   var REG_PICASA_FIX = /(\/s\d*)-h/, // /s1600-h/ -> /s1600/
       REG_FILENAME = /.*\/([^\/]*$)/;
   $("#Blog1 .post-body a[href*='.bp.blogspot.com/'] > img:first-child[src]").parent().slimbox({}, function(el) {
    return [
     el.href.replace( REG_PICASA_FIX, '$1'),
     el.title || el.firstChild.alt || el.firstChild.title || el.href.replace( REG_FILENAME, '$1')
    ];
   });
  })();
 }

見難いですね～。整形してハイライトされたコードは以下で確認できます。

以上でファイルの準備は済みました。続いてファイルをあなたのWebスペースにアップロードします。

しかしあなたの利用するWebスペースによっては、slimbox2.cssの書き換えが必要になるかもしれません。その場合は以下で解説します。

サーバにアップロードする

ここであなたが有料ホームページスペースなどを持っていれば話は早いです。もしそのようなものがない場合、無料のWebスペースを利用するという選択肢があります。しかし、無料ホームページスペースのほとんどは、他のドメインからのファイルの呼び出しを許していないので、Bloggerのドメインから呼べるものとなると自ずと限られます。

無料ホームページスペースでありながら、外部ドメインからのファイルの読み出しも許可しているサービスでは以下がありますが、規約的にはどうなんでしょう～？

Google Siteに関する注意

Google SiteはGメールアカウントを持っているだけで利用できて、また他のドメインからも呼び出せるファイルスペースを提供しています。容量も大きく今回のような用途には十分に見えます。。。

しかし、Google Siteからのファイルの転送はとても遅いときがよくあり、僕も以前使っていましたが.cssが読み込まれないなどの不具合にしばしば遭遇しました。そこで現在はGoogle Siteは使っていません。

また、以下のBlogで同様の問題に遭遇されている方がいて、対策をレポートしています。

「slimbox2.js」 「slimbox2.css」 → ガジェットへ追加

imgファイル → Microsoft Office Liveサーバー

jQuery → テンプレートで既にリンク済みなのか何故か必要なし

今回Google Siteを利用するという方はその点をご注意ください。

またGoogle Siteでは、アップロード時にurlにランダムな文字が追加されて公開されます。そのため、まずは画像をアップロードしてそのurlを控える→そのurlをもとにslimbox2.cssを書き換える、という作業が必要になります。以下を参考に作業してみてください。

ここで、Bloggerにはこういった外部ファイルをアップロード出来る場所が無いので、代わりにGoogle サイトを利用する。Google サイトで新しいサイトを作成し、上記のファイル(slimbox2.cssを除く)をアップロードする。

slimbox2.cssは、以下の項目の画像ファイルのパスをアップロードした画像ファイルのURLに修正してからアップロードする。(ファイルのURLは最後に付く ?attredirects=0 の部分を除いたもの)

• .lbLoading
• #lbPrevLink:hover
• #lbNextLink:hover
• #lbCloseLink

Bloggerにもファイル置き場ができたらいいのですが。100KBもあれば充分ですので、Googleさん、なんとかひとつ！

他の無料スペースに関する注意

マイクロソフトのSkyDriveやDropboxの公開フォルダを利用するという方法もあるみたいですが、Google Siteと同様に、URLにランダムな文字が挿入されてしま（うと思）います。これも以上のリンクを参考に作業が必要です。

Bloggerのテンプレートを新しいファイルへのリンクに書き換え

おまけ

Bloggerのテンプレート式を使うことでslimbox2の不要なページでは読み込まないようにできます。

このブログの場合、topページやindexページ、アーカイブページではブログ記事のスニペットだけを表示するので、記事中の画像も表示されません。そこで以下のテンプレート式でslimbox2の読み込みを切り替えています。

 <b:if cond='data:blog.pageType == "index"'>
 <b:else/>
  <link href='~~/slimbox2/slimbox2.css' rel='stylesheet' type='text/css' />
 </b:if>

 <b:if cond='data:blog.pageType == "item"'>
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' />
  <script type='text/javascript' src='~~/slimbox2/slimbox2_for_blogger.js' />
 </b:if>

最後に

お疲れ様でした。これであなたのブログも過去記事から全て、slimbox2によるエフェクトが追加されたと思います。

javascriptが有効なブラウザは全アクセスの99%近くということ（らしい）ですので、ほとんどのユーザーがこの変更の恩恵を享けられるでしょう！Enjoy！