Slimbox 2 入れてみました

ブログ初めて、自分の中ではまぁ定期的に更新しているので、

この辺りで一度テンプレートを変更してみました。

ついでに、前から気になってる

ブログ等で画像をクリックすると拡大してくれるJavaScript

を導入してみました。

Javascriptで画像のスライドショー表示は LightBox JS が有名らしいのですが

いかんせん普段JacaScriptを触らないので、ライブラリの善し悪しがわかりません。

そこでgoodpicさんの記事を参考にしつつ、直感で選びました。

Lightbox と同等の機能をmootoolsライブラリで実現。軽さ（mootools + slimboxで21KB）がウリ。

ということでSlimBox2に決定。

記事にはSilimBoxSlimboxが紹介されていたのですが、bloggerを使っているのでSlimbox2を選びました。

理由は簡単

ほかの人がやっていたから。

ということで、早速導入を
参考にさせていただいた記事は otherさんのSlimbox 2をBloggerに導入するです。

こちらを見ていただけるとすべてわかります。。。otherさんありがとうございました。

先ほどの記事を参考にして、準備を行うとOKです。

注意点1
GoogleのJavascriptAPIを使っていない場合は、

<script src="http://www.google.com/jsapi" type="text/javascript">

を

<script>google.load('jquery', '1');</script>

の前に入れてください

自分はこれでつまづきました。。

注意点2

最後に、記事の中のリンク先画像パス内の s1600-h の部分を削除し、rel=”lightbox”を追加する。

ですが、

s1600-hは投稿エディタを新しくしないと、通常のエディタで画像を挿入したタグでは出ません

ダッシュボードから「設定」→「基本」→「グローバル設定」の "新しくなったエディタ"

選択すると使用できます。

さっそく、前回の記事の画像をすべて拡大表示するように変更してみました。

結構いい感じ。

あと、今回初めてブログにコードを掲載したので

クリボウさんのコードをハイライトする「Code Prettify」ウィジェット を一緒に入れてみました。

こちらは、簡単に導入できるので皆さんもぜひどうぞ。