bloggerに無理やりLightbox Plusを実装

bloggerでLightboxを実現させる方法のmemoです

bloggerでLightboxを使うには、色々と面倒なのですが、
Google Sites を使って無理やり実装してみました。

■参考Link

　参考文献がなかったら出来てません・・・。大感謝。

　Lightbox+
　http://serennz.sakura.ne.jp/toybox/lightbox/?ja

　Go!Go! Ubuntu--Blogger de Lightbox
　http://55ubuntu.blogspot.com/2008/03/blogger-de-lightbox.html

　Lightbox Plus で画像を同一画面にオーバーレイして表示
　http://www.drk7.jp/MT/archives/001029.html


■方法

1.Lightbox+を手に入れる

　Lightbox+をOtaniさんに感謝しながらダウンロード。
　http://serennz.sakura.ne.jp/toybox/lightbox/?ja

2.画像ファイルをgoogle siteへアップする

　サインインしていない方はこちらから。
　http://sites.google.com/site/
　
　ホームにいきなり添付ファイルとしてアップして問題ないです
　
3.lightbox_plus.jsを編集

　(1) 画像ファイルのURLをgoogle siteへアップしたものへ書き換える
　
　　例）　　
　　------------------------------------------------------------
　　Event.register(window,"load",function() {
　　　var lightbox = new LightBox({
　　　loadingimg:'http://sites.google.com/site/XXXXX/Home/loading.gif',
　　------------------------------------------------------------

　(2) 必要に応じてrel属性を使用しない方法を実装
　
　　Lightbox Plus で画像を同一画面にオーバーレイして表示
　　http://www.drk7.jp/MT/archives/001029.html
　　
　　上を参考に編集。

4.lightbox.cssの編集

　2-(1)同様に画像ファイルのパスを書き換える。
　
5.jsファイルの拡張子を変更して、Google siteへアップロード（重要）

　google siteは、jsファイルのアップロードが出来ないので、
　拡張子を変更する必要があります。
　
　lightbox_plus.js　⇒　lightbox_plus
　spica.js　⇒　spica
　
　アップロード先は画像ファイルと同じ場所でよいです。
　
5.Bloggerのテンプレートへ追記する

　HTML の編集 ＞ レイアウトから、head内に下記項目を追記します。
　スクリプトのパスは、google siteへアップしたパスを指定する。

　・スクリプトが貼れないので画像で。
　

6.Bloggerでアップした画像ファイルのURLを一部変更する（重要2）

　bloggerでアップした画像は、アンカー部分のURLに「s1600-h」のように、
　余分なパスが入ってしまう。
　
　例）http://1.bp.blogspot.com/～～/s1600-h/XXX.jpg
　
　この部分を消さないと、Lightboxで何故か表示されないので、
　アップロードの度にこの部分は削除しましょう。
　
以上で完了です。
試される方はがんばってください！