他ブログ最新記事

FC2ブログでのFancyZoom導入法

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」フォルダ内に画像ファイルが25個あるハズです。
2009102501
こいつら全部を「ファイルアップロード」でアップロードしてください。

次に「js-global」フォルダ内を確認してください。
2つのスクリプトファイルがあるハズです。
2009102502
こいつら2つをアップロード・・・するのはチョット待ったぁぁぁぁ!!
このままアップロードしても正常には動作しません。
ちょっとスクリプトファイルの中身を書き換える必要があります。

「FancyZoom.js」ファイルをテキストエディタで開きます。
ちなみにテキストエディタでの開き方は、ファイルを右クリックして「プログラムから開く」から使用するテキストエディタを選択してください。
サクラエディタならば右クリックから「SAKURAで開く」を選択します。

中身を見てみるとズラーっと訳わからんJavaScriptが書いてあります。
この中から

var zoomImagesURI = '/images-global/zoom/';

の部分を探してください。(だいたい40行目あたり?)
中身を解析してないんで適当ですが、おそらく先ほどの画像ファイルのパスを指定している変数でしょう。
この/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()">

これで作業は終わりです。
ちゃんと画像が拡大されているでしょうか?
最後にちゃんと拡大されるか確かめてみましょう。

2009102503
ちなみに<a>タグの中にrel="nozoom"を書き加えると拡大されなくなります。

それでは、また次回(・∀・)ノシ

【追記】
FancyZoomとは別の画像拡大表示スクリプト「Pirobox」というのを現在代わりに導入しています。
(この記事はFancyZoomで画像が拡大されます。)
FancyZoomとどう違うかは、
FC2ブログにPirobox(V.1.2.2)を導入してみた
で確認してみてください。
関連記事
スポンサーサイト


1クリックしようとすると璃緒ちゃんが微笑みます


コメント

  1. | URL | U8z.8SKQ

    出来ました!ありがとうございます。

  2. もちぇ | URL | -

    Re: タイトルなし

    コメントありがとうございます。

    > 出来ました!ありがとうございます。
    おぉ、出来ましたか!
    お役に立てて幸いです。

  3. 漆黒のプリンス | URL | -

    動作報告

    でもコレ、ieだと新しいウィンドウが開いちゃいますね。
    まぁ、僕はchromeなんでいいですけど。

  4. もちぇ | URL | -

    Re: 動作報告

    > 漆黒のプリンスさん
    コメント&ご報告ありがとうございます。
    自分の環境で確認してみました。
    IE7、IE8では正常に動作しますが、
    IE9では確かに新規タブに画像が表示されてしまいますね。
    Google Chrome(ver12)とFirefox(ver3.6)でも正常に動作します。
    FancyZoom自体が2008年のモノですし、ver1.1以降の最新版が見つからない(存在しない?)ので
    IE9を使用している場合はご了承ください、としか言えませんね。
    一応解決策でも探っておきます。

  5. ミゾレレ | URL | -

    拡大画像をカッコよく表示したくて12時間格闘しました。
    でも出来ず…。

    しかし一晩寝てこのブログをみつけたら、数十分で出来ました。
    HTMLなんて全く無知な自分でもできました。
    本当にありがとうございます。

  6. もちぇ | URL | -

    Re: タイトルなし

    > ミゾレレさん
    導入できたみたいでヨカッタです。
    HTMLを知らない方でもできるように書いたので、
    このようにご報告されるとこちらも嬉しいです!

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://mocheblog.blog22.fc2.com/tb.php/131-ea4be60f
この記事へのトラックバック