Apple Store（Japan）

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- |   | スポンサー広告

最近ではSoftBankのサイトでも見かけるほど広まってきた"Litebox"。Liteboxとは？と思われた方は左のサムネイルの画像をクリックしてみて下さい。[via]


いい動きをしますよね。しかも、ページ上邪魔な大きな画像もこれならラクラク埋め込む事ができます。

では、Liteboxを導入する手順を解説します。
(注意：この文章はFC2ブログを使っている方メインの手順になりますのでMTなどを使用してるかたはコチラを参考にして下さい。)


1.ファイルをダウンロード
まずliteboxのサイトからlitebox-1.0.zipをダウンロードします。

litebox



色々ファイルが入っていますが、必要なのは以下のものだけ。

litebox-1.0.js
moo.fx.js
prototype.lite.js
lightbox.css
blank.gif
closelabel.gif
loading.gif
nextlabel.gif
prevlabel.gif

しかしこのままではサーバーにアップロードしても使えません。
"litebox-1.0.js"と"lightbox.css"内の項目をあなたのサイトに合わせて項目をいじる必要があります。

2."litebox-1.0.js"の修正
次に以下の赤文字の部分のように修正します。（20行〜）

//
// Configuration
//
var fileLoadingImage = "./file/loading.gif";
var fileBottomNavCloseImage = "./file/closelabel.gif";
var resizeSpeed = 6;　　// controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10;　　//if you adjust the padding in the CSS, you will need to update this variable



3."lightbox.css"の修正
次に"lightbox.css"も同様に以下のように修正します。（45行〜）

#prevLink, #nextLink{
　　width: 49%;
　　height: 100%;
　　background: transparent url(./file/blank.gif) no-repeat; /* Trick IE into showing hover */
　　display: block;
　　}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./file/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./file/nextlabel.gif) right 15% no-repeat; }



4.アップロード
(1)で用意したファイルをツール→ファイルアップロードでブログのサーバーにアップロードします。

5.HTMLの修正
次にFC2ブログの環境設定→テンプレートの設定→編集で、HTMLファイルの<head> 〜 </head>間に以下の行を追加します。

<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<%url>file/prototype.lite.js"></script>
<script type="text/javascript" src="<%url>file/moo.fx.js"></script>
<script type="text/javascript" src="<%url>file/litebox-1.0.js"></script>



6.記事を書く
あとは記事を書くときに以下のタグでLiteboxが使えます。

<a href="拡大画像URL" title="画像のタイトル" rel="lightbox"><img src="サムネイル画像URL"></a>



例はこのようになります。

<a href="http://blog-imgs-22.fc2.com/t/a/k/takmas/070123006_litebox.jpg" title="このようになります。" rel="lightbox"><img src="http://blog-imgs-22.fc2.com/t/a/k/takmas/070123006.jpg"></a>



これをアップロードするとこうなります。



7.導入完了
FC2ブログの場合以上の行程をコピペするだけでLitebox1.0を導入することができます。

もし不明な点がありましたらコメントされるか以下のサイトを参考にしてください。

Litebox 1.0 をブログに適用する - 小粋空間

2007.01.23 |  Comments(2)  | Web



Comment

すいません…。

上記の方法でやってみたのですが、できませんでした…。
もしよろしければ解決策を教えて頂けないでしょうか？

2007/07/30 (月) 16:43 |  YSFX  [URL]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2007/09/30 (日) 23:01 |    []

コメントの投稿