Cherry＆Lotus™

Appleのホームページみたいな画像拡大エフェクトを簡単に実点するWP FancyZoom

Appleのホームページは、ものすごく魅力的なデザインだよね。もちろん、感じ方は人それぞれだけど、少なくともhamasakuは大好きだよ。

特に目を引くのは画像の拡大エフェクト。Appleらしさが出ているというか何と言うか、2ch風に言うと(･∀･)イイって表現がぴったりだと思うよ。

実は、このエフェクトを実現する為のJavascript（FancyZoom）は、cable.nameで配布されていて、ヘッダ部分にscriptタグを追加すればすぐ使える様になっている優れものなんだ。でも、テーマファイルに手書きでタグを書き込むと、後々のメンテナンスに影響が出てくるし、それになんか美しくないよね。

前にも書いたけど、hamasakuは形から入るから、ビジュアルはとっても大事。なので、もっと簡単に導入する方法がないものかと探してみる事にしたよ。

「WordPress FancyZoom」で検索すると、12,000件のページがヒットしたよ。やっぱり同じ事を考える人がいるんだよね。プラグインとして配布してくれている人がいたよ。

WP FancyZoom Wordpress Plugin

導入方法は簡単。作者のホームページにも記載してある通り、

WP FancyZoom Wordpress Plugin ≪ Live Granadesから引用

Installing

1. Grab the latest version
2. Put the entire plugin folder in your wp-content/plugins/ folder
3. Activate the plugin in your Wordpress admin panel

That’s it!

日本語に直すと、1.最新バージョンをダウンロードして、2.プラグインフォルダにアップして、3.管理者画面からアクティブにすると書いてあるよ。本当に簡単。

あと、管理者画面の[設定] – [WP FancyZoom]にて、プラグインをインストールしたディレクトリパスを設定する欄があるので、こちらも忘れずにチェック。

デフォルトでは「wp-content/plugins/wp-fancyzoom」となっていて、一見問題なさそうに見えるけど、実は落とし穴があるよ。デフォルトの状態だと、相対パスで書かれているから、これを絶対パス（もしくはhttpで始まるアドレス）に変更してあげる必要があるよ。何故かという、ここで設定したパスが、Javascriptのsrcで使われるからなんだよ。

変更前