Blogger de Lightbox
Betaの頃は普通に使えたLightbox。 Betaがとれてから、しばらくして使えなくなったLightbox。直リン画像なら使えたんだけど、その作業が面倒くさいからずっと放置してました。最近、ParsonalなBlogを作っていて、どうしてもLightbox系を入れたくて奮闘してたら使えたので、メモ。
Bloggerを使ってる人は、Google Page Creatorを使ってる人も多いと思う。自分もその1人。だけど、Google Page Creatorは不便な事にフォルダのアップロードができない。だから、まずはDownloadしてきた「.js」ファイルの中の画像へのパスを書き直してやる必要がある。ここまでの順序としては
1.Lightbox系のファイルをDownloadする
2.必要なパーツ画像をアップロードする
3.「.js」ファイル内のパーツ画像へのパスを書き直す
4.「.js」ファイルをアップロードする
5.「.CSS」ファイル内のパーツ画像へのパスを書き直す
6.「.CSS」を開いて、Bloggerへコピペ
7.BloggerへJavaScriptの記述をする
(1.は好きなものを選ぶ。例えばココあたりから。2.はa=hrefやimg src=といった記述を探す（Lightboxの場合）。5.はurlやgif, png等を探す。7.はDownloadしたサイトに説明されていると思います。)
3.の部分の一例（Lightboxの場合）
a href="#" id="loadingLink"
img src="images/loading.gif" を
a href="#" id="http://xxx.xxx/loading.gif"
img src="http://xxx.xxx/loading.gif"にする。
（その他のパスも変える）
1.Bloggerに投稿する時に画像をローカルから指定して画像をアップロードする
2.表示を「HTMLの編集」にする
3.画像へのリンクが2つある。最初にくるほうがクリックされて表示される方で、後のがサムネール画像。
4.rel="lightbox" （Lightboxの場合） title="xxx"を書き足す
3.の部分の説明
ex. 「http://xx.blogger.com/_xxx/xxx/xxx/s1600-h/xxx.JPG」
上記のものは最初にくるほう。この「s1600-h/」を消してあげるだけでよい。
(LightBoxを使わないで、ここの数値を変えると、表示される画像のサイズ指定ができるので、大きすぎる画像をアップロードした時なんかに有効。)
ちなみに後の方にある「http://xx.blogger.com/_xxx/xxx/xxx/s320/xxx.JPG」の「s320」の部分の数値を変える事でサムネールの大きさを変える事ができるけど、指定サイズでなければ表示されない。 (72,144,200,288,320,400,512....etc)
参考 クリボウのBlogger Tips: Blogger で画像の表示サイズを変更する方法
というわけで、「s1600-h」を消すだけで、できたというオチでした。いろいろと試した中で、自分の技量不足でうまくできなかったものもあったけど、だいたいのものは「.js」「.css」内の画像のパスさえ変えればできると思います。ちなみにCSSのみでLightbox風を再現する方法もあるみたいです。
