なんだかものすごく長い記事になりそうな予感がしますので、今回は最初にお礼から始めます。
前回の本館更新後、拍手をいつもの4割増ほどいただいております(*^ｰ^)
どうもありがとうございます！！
これはやっぱり「彼」の効果でしょうか？
後書きにも書きましたが、次回も引き続き出てきますので、どうぞお楽しみに！
レス不要のメッセージを下さったお客様、ご好意に甘えさせていただきます。
本当にどうもありがとうございました！(*^ｰ^)
では本題。
気軽に投稿できてテンプレートさえ選んでしまえばあまりソースを弄る必要もないるブログサービスに本拠地を移してからじきに２年を迎えようとしているのですが、どうも定期的にいじり倒したくなる時期が来るようです。
その時期になったのか、久しぶりにそんな衝動に駆られて、画像の表示方法をすこしばかりいじってみようと思い立ちました。
これまで画像（こちらでは主に写真、本館では最近UPしていませんが自作絵）の表示方法は一貫して、小さめのサムネイル+サムネクリック時に別タブ（IEでは別ウィンドウ）での画像のみ表示にこだわってきました。
他所様の画像表示方法を見て「これカッコいいな」と憧れていた表示形式はあったのですが、不勉強が祟って、それはflashで動作させているものだから自分には無理と思い込み、諦めていました。
しかし少し前にそれが大抵はJavaScriptで表示させているものだと知り、それならば自分にもできるかもと試してみることにしてから３日。
chromeとIEでは問題なく表示可能とわかって、粛々とブログのhtmlを書きなおしています。
とりあえずこちらのブログでは作業完了。
数日中に本館でもソースを書き換え、記事内の記述もそれ用に追加する予定です。
というか、この記事を書きながら並行作業しているので、書き終わった頃には作業完了しているかもｗ
そこまで気に入った表示のさせ方とは、おそらくネットをそれなりに閲覧されている皆様なら一度は目にしたことのあるであろう、アレです。
サムネイルをクリックすると、画像が新たにウィンドウを開くわけでもなく、元のページの上に黒い半透明のウィンドウのようなもので閲覧可能になる、いわゆるlightboxのようなもののことです。
実を言えばそれこそ数日前に気づいたのですが、現在使っているBloggerでも標準でそのような表示機能が先月あたりから実装されていたようです。
実際、まだなにも手を加えていない本館の方でも画像はそのような表示になっています。
↓こんな感じ。
いくら自分のブログでもなんか恥ずかしくなったのでモザイクなどかけてみたらかえって(/ω＼)ｲﾔﾝな雰囲気にｗ
まあそれはともかく。
……ちょっと違うんですよ。
私がイメージしていたのはああいう感じじゃないんです。
ふわっと開いて、びろーんでぱっと表示、仕上げににょろっとclose×が出てくる、ってのが理想なんです！
て、こんな書き方でわかる人がいるわけないですねｗ
真面目な参考例 → Lightbox 2
まあ、こんな感じが良かったんです。
でもBloggerに実装されたのは残念ながらこういうふうに開かない。
じゃあ自分ででやってみるしかないじゃない！
ってことで、他所様のお力を借りまくって（）やってみました。
まずは普通にlightboxを導入してみようかと思い、調べてみたのですが、なかなか面倒であるようなことを書いている方が多かったので早速躊躇ｗ
なんでもlightboxはjsファイルと画像ファイルのドメインが同じでないと画像を読み込んでくれないんだとか。
画像はBlogger繋がりの某所に置いているけれど、jsファイルをUPできる所ではないので無理です。
しかしめげずにもう少しなんとかならないものかと検索してみたところ、slimboxなるものがあることを知りました。
なんでもSlimboxの2はjQuery版のLightBoxで、前述のような問題がないのだとか。
なので早速、主に表示確認用に使っている隠しブログでテスト。
Slimbox 2をBloggerに導入する - Web Scrap
まずはこのログを参考にさせていただき、実行！
ところが……なにも起こらない……(´･ω･`)
当然ですが、なにかがいけないんだろうとよくよく読み返し、更に2つのサイトを参照。
ShanaBrian Website
WWWLIKE！オボエトコ！忘れないでね: BloggerにSlimboxを実装してみました。
ここでようやく原因を理解。
最初に参考にしたブログの記述では、jQueryはGoogle AJAX APIを利用することになっています。
これが使えてないんじゃないかと気づき、いそいそとjQueryをダウンロードしてきて、サーバーへうｐ。
そうしたらやっと上手くいきました(ﾟ∀ﾟ)
ちなみにやったことは以下の通り。
1. digitalia.be よりslimbox2をダウンロード
2. 落としてきたものを解凍し、入っていたcloselabel.gif ・ loading.gif ・ nextlabel.gif ・ prevlabel.gif ・ slimbox2.jsをサーバーにup
3. 更に同梱されているslimbox2.cssの内容のうち、gifのurlを先程upした場所のパスに書き換えてから同じ所にup
4. jQuery: The Write Less, Do More, JavaScript Libraryここで右側の「Download」をクリック、ソースが表示されたら全文をテキストエディタなどにコピペして「jquery.js」というファイルを作成、これをサーバーにup
5. Bloggerのhtmlのheadタグの中に下記を書き込む。
<link href='*******/slimbox2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='*******/jquery-1.7.js' type='text/javascript'/>
<script src='*******//slimbox2.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a[rel*=lightbox]').slimbox();
});
</script>
6. 最後にブログの各記事の画像パスのa要素に rel="lightbox"を付け加えてまわります。
※ちなみにBloggerでは、画像パス内にs1600-hとあった場合、これは削除したほうがいいようです。
以上！＼(^o^)／
意外と簡単にできました。
3日もかかっちゃったけど！（）
でもまあ、少しばかり達成感を味わえて幸せなので良しとしようｗ
既存の画像で動作は確認できているけれど、もう一度テストがてら、本館に数カ月前に描いた落書きでも載せてこようかな⊂（ ＾ω＾）⊃
以上、Bloggerへのslimbox2導入方法（自分用メモ）でした。