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

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

Bloggerにslimbox2を本格導入!

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

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

前回の記事(簡単導入編)を参考にして、あなたのBloggerにslimbox2を導入できたことと思います。そして今後もslimbox2を使っていきたいとお考えでしたら、slimbox2をご自身の管理するWebスペースにアップロードしましょう。

簡単導入編のままで僕のような個人が管理しているファイルに依存している場合、管理人の気まぐれなどでいろいろ支障が出かねません。また今回のようにjavascriptファイルの場合、万が一悪意のあるコードに差し替えられてしまった場合に大変です。

そのような訳で以下の解説を参考に、ぜひご自身で管理するWebスペースにslimbox2を置きましょう。

ファイルの準備

まずはslimbox2をダウンロード

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

slimbox-2.04.zip 53.5 KB

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

Slimbox 2, the ultimate lightweight Lightbox clone for jQuery

zipファイルを解凍

さて、ダウンロードしたzipファイルを解凍すると画像の内容になっています。中には動作確認用サンプルなどの不要なファイルもあって、この内でWebスペースにあげるものは次の6つになります。

/js/slimbox2.js 圧縮されたslimbox2本体が入っている。その下のslimbox2の起動設定をBlogger用に書き換える。

/css/slimbox2.css アラビア語のように左から右に読む言語のサイトの場合、slimbox2-rtl.cssの方を使用。

/css/closelabel.gif
/css/loading.gif
/css/nextlabel.gif
/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')
    ];
   });
  })();
 }

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

source slimbox2_for_blogger.js

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

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

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

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

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

land.to

Google Siteに関する注意

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

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

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

Google Bloggerで画像展開にエフェクトを付ける(LightBox・SlimBox2)

「slimbox2.js」 「slimbox2.css」 → ガジェットへ追加
imgファイル → Microsoft Office Liveサーバー
jQuery → テンプレートで既にリンク済みなのか何故か必要なし

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

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

Slimbox 2をBloggerに導入する

ここで、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.jsとslimbox2.cssへのリンクを新しいものに書き換えます。変更箇所は簡単導入編を参考にしてください。

またjQueryの読み込みは、Googleのurlそのままとしておきます。気になりましたら、こちらも自前のWebスペースにアップロードします。

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

おまけ

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!

JavaScriptをオフにしているブラウザは1%前後。米ヤフー調べ