[blog] Lightbox Plus の導入
ちょっと前から当blogでも導入してたのですが記事として残していませんでしたので。。
Lightbox Plusについてはこの辺にて。。
要はサムネイルをクリックした時にクールに見せるスクリプトです。はい。
これを当ブログシステムのさくらブログ(ベースとなってるSeesaaでも使えるかも？)で利用するためのメモ。
1.Lightbox Plusのダウンロード＆アップロード
配布サイト(SimpleBoxes)から関係ファイル(メインスクリプトやイメージ)をダウンロード。
アップロードは適当な所へ。
専用のディレクトリを作った方が管理は楽になります。
メインスクリプトやCSSファイルは使用画像ファイルの指定をhttpからのフルパスに変更する必要が出てくるかもしれませんので状況に応じて編集してください。
2.デザインHTMLの変更
blogメニューの「デザイン」＞「HTML」の画面から「HTMLの追加」を選んでHTMLの編集画面へ。
・メインスクリプト等の指定
</head>の直前辺りにメインスクリプトとCSSファイルの指定を追加します。
<script type="text/javascript" xsrc="(http～のフルパス)lightbox.js" mce_src="(http～のフルパス)lightbox.js"></script>
<link rel="stylesheet" xhref="(http～のフルパス)lightbox.css" mce_href="(http～のフルパス)lightbox.css" type="text/css" />
</head>
な感じで青文字の部分を追加。赤文字の部分は自分の環境に合わせて書き換えてください。
・リンクタグにrel属性を付加するScriptを追加
ずーと下の方に行き、</body>の直前あたりに
<script type="text/javascript">
<!–
function addRel(relElement) {
var obja = document.getElementsByTagName(“a");
for (var i = 0; i
</body>
と、青文字部分を追加。
適当なHTML名をつけて「保存」ボタンで保存。
編集したHTMLを有効にするために「適用」をチェックして「HTMLを適用」ボタンで適用。
あとは再構築ですべてを再構築して、動作を確認してみてください。
普段と同じように画像を挿入するだけでLightboxが適用になっているはずです。
過去の記事に関しても同様に適応されればOKです。
＊デザインテンプレートを変更してもHTMLはそのまま利用されてるのでテンプレートを変更しても修正することなくLightboxは適用されます。
参照サイト：
Lightbox JS で画像を表示する(Movable Type) – 小粋空間
lightbox plusで拡大画像(sb) – ボムガール