スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

さくらのブログにfancyboxを組み込む

さるねこ父が運営に関わっている「長崎の町ねこ調査隊塾」のブログは、さくらのブログというマイナーなブログサービスを利用しています。さるねこブログ同様、ねこ写真が頻繁に出てくるので、その見栄えをよくするために、fancybox という画像ポップアップスクリプトを組み込んでみました。ここで覚え書きとしてまとめておきます。

 

  1. fancybox のサイトから jquery.fancybox-1.3.4.zip をダウンロード
    • fancybox は既に Version 2 がリリースされていますが、さほど凝ったことをするわけではないので、旧バージョンを使います
  2. zip ファイルを解凍し、そのなかの fancybox フォルダの内容(画像+スクリプト)を適当なサーバにアップロードします
    • さくらのブログを使おうとするなら、さくらのレンタルサーバを使えているはずなので、そこを使います
    • 以下では、さくらのレンタルサーバのドメインを xxxxx.sakura.ne.jp、fancybox フォルダをその下の /home/xxxxxx/www/fancybox にアップロードしたとします
  3. さくらのブログの管理画面 - [デザイン] - [HTML] から、現在適用されている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" />

  1. どのタグ/セレクタに 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>

  1. 以上、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 ブログだけを利用している場合、ファイルのアップロード先やアップロード時の作業にちょっとした注意が必要だったりするようです。詳しくは、こちらこちらの記事を参照。

関連記事

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

Comment


非公開コメント

いくつになったの?
15枚の写真からランダムに表示します
@sarunekofumi-zrssfeed
検索フォーム
ブログ最新記事

 

→ さるねこふみ別館ブログ

→ オフィスさるねこブログ

全記事(数)表示
全タイトルを表示
カテゴリ
関連リンク
RSS Link
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
最新コメント/記事
データ取得中...
カテゴリー/アーカイブ