2009年10月25日 22:29
今までブログ内の画像をクリックすると、別ウィンドウで拡大画像が表示されていました。
今回導入するこの「FancyZoom」というスクリプトを用いれば、画面を遷移させずに拡大画像を表示させることが可能となります。
それでは実際にFC2ブログに導入してみましょう。
HTMLの知識があると楽ですが、無くても簡単にできます。
それとテキストエディタがあると作業が楽になります。（メモ帳でもできます）
ちなみに自分のお気に入りはサクラエディタです。
以下から説明します。
まず、コチラからFancyZoomをダウンロードしてきます。
この記事を書いている時点での最新版はFancyZoom1.1です。
解凍して中身を確認します。
「__MACOSX」と「FancyZoom 1.1」フォルダが存在しますね。
「__MACOSX」フォルダは今回使用しません。
「FancyZoom 1.1」フォルダ内を確認すると、「images-global」と「js-global」フォルダがあります。
「images-global」フォルダ内にさらに「zoom」フォルダがあります。
「zoom」フォルダ内に画像ファイルが２５個あるハズです。
こいつら全部を「ファイルアップロード」でアップロードしてください。
次に「js-global」フォルダ内を確認してください。
２つのスクリプトファイルがあるハズです。
こいつら２つをアップロード・・・するのはチョット待ったぁぁぁぁ！！
このままアップロードしても正常には動作しません。
ちょっとスクリプトファイルの中身を書き換える必要があります。
「FancyZoom.js」ファイルをテキストエディタで開きます。
ちなみにテキストエディタでの開き方は、ファイルを右クリックして「プログラムから開く」から使用するテキストエディタを選択してください。
サクラエディタならば右クリックから「SAKURAで開く」を選択します。
中身を見てみるとズラーっと訳わからんJavaScriptが書いてあります。
この中から
var zoomImagesURI = '/images-global/zoom/';
の部分を探してください。（だいたい４０行目あたり？）
中身を解析してないんで適当ですが、おそらく先ほどの画像ファイルのパスを指定している変数でしょう。
この/images-global/zoom/の部分を書き換えます。
ここにはアップロードした画像ファイルのパスを書きます。
画像ファイルのパスとは、ブログで画像を挿入する際に出てくる
<a href="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/script.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/script.jpg" alt="2009102502" border="0" width="200" height="150" /></a>
のhttp://blog-imgs-27.fc2.com/m/o/c/mocheblog/です。
自分のブログでは「http://blog-imgs-27.fc2.com/m/o/c/mocheblog/」となっていますね。
つーことで、書き換えましょう。
var zoomImagesURI = '/images-global/zoom/';
↓
var zoomImagesURI = 'http://blog-imgs-27.fc2.com/m/o/c/mocheblog/';
書き換えたら保存して、「FancyZoomHTML.js」と一緒にアップロードしてください。
あと少しだ頑張れ！
最後にブログのHTMLを少しいじります。
管理ページから「テンプレートの編集」を選択します。
すると下のほうにHTML編集のテキストエリアがあるハズです。
まずは<head>タグと</head>タグの間に以下を追記します。
<script src="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/FancyZoom.js" type="text/javascript"></script>
<script src="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/FancyZoomHTML.js" type="text/javascript"></script>
このhttp://blog-imgs-27.fc2.com/m/o/c/mocheblog/はスクリプトファイルへのパスです。
画像ファイルと同じ方法で確認してください。
あとは<body>タグ内にonload属性を書き加えます。
<body onload="setupZoom()">
これで作業は終わりです。
ちゃんと画像が拡大されているでしょうか？
最後にちゃんと拡大されるか確かめてみましょう。
ちなみに<a>タグの中にrel="nozoom"を書き加えると拡大されなくなります。
それでは、また次回(・∀・)ノシ
【追記】
FancyZoomとは別の画像拡大表示スクリプト「Pirobox」というのを現在代わりに導入しています。
（この記事はFancyZoomで画像が拡大されます。）
FancyZoomとどう違うかは、
FC2ブログにPirobox(V.1.2.2)を導入してみた
で確認してみてください。
今回導入するこの「FancyZoom」というスクリプトを用いれば、画面を遷移させずに拡大画像を表示させることが可能となります。
それでは実際にFC2ブログに導入してみましょう。
HTMLの知識があると楽ですが、無くても簡単にできます。
それとテキストエディタがあると作業が楽になります。（メモ帳でもできます）
ちなみに自分のお気に入りはサクラエディタです。
以下から説明します。
まず、コチラからFancyZoomをダウンロードしてきます。
この記事を書いている時点での最新版はFancyZoom1.1です。
解凍して中身を確認します。
「__MACOSX」と「FancyZoom 1.1」フォルダが存在しますね。
「__MACOSX」フォルダは今回使用しません。
「FancyZoom 1.1」フォルダ内を確認すると、「images-global」と「js-global」フォルダがあります。
「images-global」フォルダ内にさらに「zoom」フォルダがあります。
「zoom」フォルダ内に画像ファイルが２５個あるハズです。
こいつら全部を「ファイルアップロード」でアップロードしてください。
次に「js-global」フォルダ内を確認してください。
２つのスクリプトファイルがあるハズです。
こいつら２つをアップロード・・・するのはチョット待ったぁぁぁぁ！！
このままアップロードしても正常には動作しません。
ちょっとスクリプトファイルの中身を書き換える必要があります。
「FancyZoom.js」ファイルをテキストエディタで開きます。
ちなみにテキストエディタでの開き方は、ファイルを右クリックして「プログラムから開く」から使用するテキストエディタを選択してください。
サクラエディタならば右クリックから「SAKURAで開く」を選択します。
中身を見てみるとズラーっと訳わからんJavaScriptが書いてあります。
この中から
var zoomImagesURI = '/images-global/zoom/';
の部分を探してください。（だいたい４０行目あたり？）
中身を解析してないんで適当ですが、おそらく先ほどの画像ファイルのパスを指定している変数でしょう。
この/images-global/zoom/の部分を書き換えます。
ここにはアップロードした画像ファイルのパスを書きます。
画像ファイルのパスとは、ブログで画像を挿入する際に出てくる
<a href="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/script.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/script.jpg" alt="2009102502" border="0" width="200" height="150" /></a>
のhttp://blog-imgs-27.fc2.com/m/o/c/mocheblog/です。
自分のブログでは「http://blog-imgs-27.fc2.com/m/o/c/mocheblog/」となっていますね。
つーことで、書き換えましょう。
var zoomImagesURI = '/images-global/zoom/';
↓
var zoomImagesURI = 'http://blog-imgs-27.fc2.com/m/o/c/mocheblog/';
書き換えたら保存して、「FancyZoomHTML.js」と一緒にアップロードしてください。
あと少しだ頑張れ！
最後にブログのHTMLを少しいじります。
管理ページから「テンプレートの編集」を選択します。
すると下のほうにHTML編集のテキストエリアがあるハズです。
まずは<head>タグと</head>タグの間に以下を追記します。
<script src="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/FancyZoom.js" type="text/javascript"></script>
<script src="http://blog-imgs-27.fc2.com/m/o/c/mocheblog/FancyZoomHTML.js" type="text/javascript"></script>
このhttp://blog-imgs-27.fc2.com/m/o/c/mocheblog/はスクリプトファイルへのパスです。
画像ファイルと同じ方法で確認してください。
あとは<body>タグ内にonload属性を書き加えます。
<body onload="setupZoom()">
これで作業は終わりです。
ちゃんと画像が拡大されているでしょうか？
最後にちゃんと拡大されるか確かめてみましょう。
ちなみに<a>タグの中にrel="nozoom"を書き加えると拡大されなくなります。
それでは、また次回(・∀・)ノシ
【追記】
FancyZoomとは別の画像拡大表示スクリプト「Pirobox」というのを現在代わりに導入しています。
（この記事はFancyZoomで画像が拡大されます。）
FancyZoomとどう違うかは、
FC2ブログにPirobox(V.1.2.2)を導入してみた
で確認してみてください。
- コメントをする・見る
- Comments(6)
- トラックバックをする・見る
- Trackbacks(0)
- カテゴリー
- ブログカスタマイズ
最新コメント