ココログ＋WindowsLiveWriterでLightBox.jsを使う

LightBox.jsとはサムネイル画像をクリックすると別ウィンドウを開いたり画面が切り替わらずにリンク先の画像を表示するjs。下の画像をクリックしてみればわかります。よくみる本家LightBox2はこちらで確かめてください。

ちなみにこのYoutube動画はとってもお気に入り。

ココログ（ベーシック）でどうやるかは以下の通り。
面倒な人は１，２，３を飛ばしてもかまいません（ほんとか？）。

１．必要なファイルを拾ってくる

今回は敷居の低いlightbox.jsを使います。ここにあります。ページの真ん中あたりにDOWNLOADという項目があり5つのファイル（lightbox.js , lightbox.css, overlay.png , loading.gif , close.gif）をダウンロードしておきます。

２．ファイルを編集する

面倒なのでしないことにします。（動くのを確認してから頑張りましょう）

３．アップロードする

ココログの管理ページの中にあるファイルメニューから5つのファイルをアップロードします。面倒なので「ホーム」にアップロードしちゃいます。

４．読み込まれるようにする

方法はいくつかあると思います。一般的に知られているのはamazonのアフィリエイトなどでも推奨されているマイリストを使う方法、もしくはどっかに埋め込んじゃう方法。今回は後者を選びます。サブタイトルに埋め込みます。

「ブログ」→「設定」で「ブログのサブタイトル」に自分のサブタイトルに直接以下のように追記します。サブタイトルを使っていない人はそのまま記述。

<script type="text/javascript" src="https://yk.tea-nifty.com/lightbox.js"></script><link href="https://yk.tea-nifty.com/lightbox.css" rel="stylesheet" type="text/css">

中に書いてあるリンクは自分のアップロードしたURIに変更してください。
１，２，３を飛ばしてしまった人は変更せずにそのままコピペしましょう。

これで準備完了です。

５．テストします。

ここに書いてあるように画像のリンクは以下のようになっているはずですから<a>タグの中に rel=”lightbox”と書いてあげればOK。

<a href="Eminem.png" rel="lightbox"><img src="Eminem-thumb.png" /></a>

これでできますが毎回書くのは面倒です。
書かなくてすむようにjsファイルを変更するか（簡単です）、ツールに勝手にやってもらうかのどちらかを選択します。今回はツールのWindows LiveWriterにやってもらいます。

６．Windows LiveWriterに頑張ってもらう

いきなり残念ですが現バージョンではLightBoxに簡単に対応していません。ですが次のバージョンのRC（英語版です）では標準でLightBoxに対応しているのでそれを使いましょう。

Writer Zone Technical Preview Now Available for Download
http://windowslivewriter.spaces.live.com/blog/cns!D85741BB5E0BE8AA!1508.entry

インストール方法は略、以前書いたようにやれば問題なし。すでにインストールしている方は「Tools」「Accounts…」「Edit…」「Update Account Configration…」を実施しましょう。これで自動認識されます（すごい）。

準備完了。

で、画像を挿入するとLightBox対応と表示されます。

７．その他後始末

もし、4項の読み込み方法でマイリストを使った場合、無駄にマイリストが表示されてしまう方もいると思います。その場合はカスタムCSSで以下のように記述すればマイリスト自体の表示を止めることが可能です。

.module-typelist  { display: none;}