画像を美しく拡大/WPプラグイン「Easy FancyBox」

easy-fancybox


WordPressプラグイン「Easy FancyBox」

jQueryのFancyBoxを使うことでスムーズで美しく画像を拡大するプラグイン。

<主な特徴>
  • jQueryのFancyBoxを使用
  • JPG、GIF、PNGら画像に対応
  • WordPress、NextGENギャラリー対応
  • SWF (Flash) 動画もOK
  • SVG画像もOK
  • iFrames、YouTube動画も可能

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

クリックすると、画像がふわーと拡大するのはカッコいい。
 そう、誰もが一度はやってみたくなります。
 いろんなこういった「Lightbox」系プラグインがあるのですが、これもシンプルで簡単にできました。

日本語化

設定のメディアから、この各種設定が出来ますが、英語です。そのままでもいいのですが、せっかくですので日本語化しましょう。

下記サイトで日本語化のファイルを配布していますので、ダウンドードしたmoファイルを、/wp-content/plugins/easy-fancybox/languagesにアップロードすれば日本語になりました。

本当にありがとうございます。

有効化後の設定、使い方

設定のメディアにこの詳細設定画面がありますので、必要に応じて設定します。

 対象のメディアを選択します。

「Easy FancyBox」の設定その1

リンク、オーバーレイ、ウィンドウの項目毎に、例えば、画像の枠のカラーや、その周りのデザインを決められます。

 「Easy FancyBox」の設定その2

 画像の拡大するとき、フェードにするなど動きを変更、タイトルの表示・非表示を選べます。

「Easy FancyBox」の設定その3

ほぼデフォルトでOKでしたが、効果を見ながら変更すればいいと思います。

セーブして設定は完了。

さて、さっそくテストです。

リンク先ををメディアファイルにして、画像を挿入します。

「Easy FancyBox」の設定その5

※リンク先ををメディアファイルにしないとポップアップしません。

その後記事を公開し、確認します。

「Easy FancyBox」の設定その6

画像をクリックすると、拡大しました。

ギャラリー登録

ギャラリーでも「Easy FancyBox」は美しい。

登録された画像をクリックします。
「Easy FancyBox」の設定その7

拡大されて、端にマウスをあわせると、矢印が出るので、クリックすると移動する。
fancy21

WPで今回作成したデモサイト

まとめ

 「Easy FancyBox」の設定は至ってシンプルです、日本語化しなくてもほぼデフォルで出来ます。このポップアップが気持ちよくて、ついつい画像をクリックしてしまう自分がいます。
 いろいろギャラリーなども応用が出来そうですので、サイトによってはいいかもしれない。

気をつけなければいけないのは、こういったjQuery系のプラグインは干渉しまくりですので、不具合があせば取捨選択が必要になるかと思います・

LINEで送る
Pocket

タグ:

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す