Appleのホームページみたいな画像拡大エフェクトを簡単に実点するWP FancyZoom
Appleのホームページは、ものすごく魅力的なデザインだよね。もちろん、感じ方は人それぞれだけど、少なくともhamasakuは大好きだよ。
特に目を引くのは画像の拡大エフェクト。Appleらしさが出ているというか何と言うか、2ch風に言うと(･∀･)イイって表現がぴったりだと思うよ。
実は、このエフェクトを実現する為のJavascript（FancyZoom）は、cable.nameで配布されていて、ヘッダ部分にscriptタグを追加すればすぐ使える様になっている優れものなんだ。でも、テーマファイルに手書きでタグを書き込むと、後々のメンテナンスに影響が出てくるし、それになんか美しくないよね。
前にも書いたけど、hamasakuは形から入るから、ビジュアルはとっても大事。なので、もっと簡単に導入する方法がないものかと探してみる事にしたよ。
「WordPress FancyZoom」で検索すると、12,000件のページがヒットしたよ。やっぱり同じ事を考える人がいるんだよね。プラグインとして配布してくれている人がいたよ。
導入方法は簡単。作者のホームページにも記載してある通り、
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 panelThat’s it!
日本語に直すと、1.最新バージョンをダウンロードして、2.プラグインフォルダにアップして、3.管理者画面からアクティブにすると書いてあるよ。本当に簡単。
あと、管理者画面の[設定] – [WP FancyZoom]にて、プラグインをインストールしたディレクトリパスを設定する欄があるので、こちらも忘れずにチェック。
デフォルトでは「wp-content/plugins/wp-fancyzoom」となっていて、一見問題なさそうに見えるけど、実は落とし穴があるよ。デフォルトの状態だと、相対パスで書かれているから、これを絶対パス（もしくはhttpで始まるアドレス）に変更してあげる必要があるよ。何故かという、ここで設定したパスが、Javascriptのsrcで使われるからなんだよ。
変更前
hamasakuの環境では「/wp-content/plugins/wp-fancyzoom」に修正したんだよ。「http://blog.hamamoto.info/wp-content/plugins/wp-fancyzoom」でも良いと思うよ。
変更後
とりあえず、これで設定は終了。あとは、普通に画像を挿入するだけで、あの素敵な拡大エフェクトに勝手にしてくれるよ。拡大画像の下に注釈を入れる場合は、Aタグにtitle属性を、画像を拡大したくない場合は、rel=”nozoom”と設定すればOK。本当に簡単だよね。
関連記事
Facebook comments:
