ライトボックスをブログに設置する

最近どのサイトでも、使われて来ているライトボックス簡単にウェブサイトなどに設置でき、写真を拡大をクールに見せてくれます。写真をクリックしたあとに、右上のNext　や　左上のPreviousのボタンをクリックして次の写真に移れます。

今回は、このクールなライトボックスの設置方法を紹介します。

ライトボックス設置方法

1. ライトボックスをダウンロードする。
2. Bloggerにログインし　Layout → Edit HTML　に行く
3. Headerに下記のラインを入れる<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
4. さらに同じくHeaderに下記を記入する。
   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
   <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
   <script type="text/javascript" src="js/lightbox.js"></script>
5. Lightbox.cssファイル内のnext.gif, prev.gifを指定している行が正しいパスを指定しているか確認する。
6. 同じく、Lightbox.js内のLoadign.gifとClose.gifが正しいパスを指定しているか確認する。
7. Blogspotでは、FreeのアカウントでFTPが使えため、指定するパスは外部のホスティングサーバーでなければならないが、Googleのフリーホスティングを使いましょう。
8. ブログのポスト編集画面にて、画像を入れた後に下記の部分を
   onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
9. rel="lightbox" に変更する。
10. またリンク先のアドレスに -h が入っているはずなのでそれを消去する。
11. これで完了！！旨く出来なければ、質問ください。