さくらのブログにfancyboxを組み込む
さるねこ父が運営に関わっている「長崎の町ねこ調査隊塾」のブログは、さくらのブログというマイナーなブログサービスを利用しています。さるねこブログ同様、ねこ写真が頻繁に出てくるので、その見栄えをよくするために、fancybox という画像ポップアップスクリプトを組み込んでみました。ここで覚え書きとしてまとめておきます。
- fancybox のサイトから jquery.fancybox-1.3.4.zip をダウンロード
- fancybox は既に Version 2 がリリースされていますが、さほど凝ったことをするわけではないので、旧バージョンを使います
- zip ファイルを解凍し、そのなかの fancybox フォルダの内容（画像＋スクリプト）を適当なサーバにアップロードします
- さくらのブログを使おうとするなら、さくらのレンタルサーバを使えているはずなので、そこを使います
- 以下では、さくらのレンタルサーバのドメインを xxxxx.sakura.ne.jp、fancybox フォルダをその下の /home/xxxxxx/www/fancybox にアップロードしたとします
- さくらのブログの管理画面 - [デザイン] - [ＨＴＭＬ] から、現在適用されているHTMLの編集を行ないます
- タグを探し、その直前に次の3行を追加（青字・紫字部分は2で設定したように合わせる）：fancyboxが使えるようになります
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xxxxx.sakura.ne.jp/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="http://www.xxxxx.sakura.ne.jp/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
- どのタグ/セレクタに fancybox を作動させるのか、どのような挙動を行なわせるのかを、上記3行に引き続いて指定します
- たとえば <a class="photo"></a> に作動させることにして、クリックすると現在の画面にフェードがかかる(overlay)ようにする場合、下記のようになります
- オプション値について詳しくは fancybox の解説ページを参照して下さい
<script type="text/javascript">
$(document).ready(function() {
$("a.photo").fancybox({
'speedIn' :600,
'speedOut' :200,
'overlayShow' :true
});
});
</script>
- 以上、HTMLテンプレートの head 要素にスクリプトを追記したら準備は完了で、以降は個々の記事内で使われている写真等へのリンク a タグに photo クラス属性を追加するだけで、fancybox の画像ポップアップ効果が利用できます
(適用前) <a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
(適用後) <a class="photo" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
おしまい。なお、fc2 ブログでも基本的には同じように画像＋スクリプトをサーバにアップして、それを HTML テンプレートから参照すれば使えますが、fc2 ブログだけを利用している場合、ファイルのアップロード先やアップロード時の作業にちょっとした注意が必要だったりするようです。詳しくは、こちらやこちらの記事を参照。
- 関連記事
テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ
