enlarge-image-ecmg

ワードプレス

ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Easy FancyBox」の設定と応用例

記事のなかに画像を挿入したものの、思っていたより小さい・・・

これじゃあ、画像内の細かい内容が見えにくい・・・

そんなとき、クリックひとつで拡大表示させることができれば、閲覧者にとても伝わりやすくなります。例えば、こんなふうに。

 クリックで拡大

enlarge-image-01

ビョイーン、と拡大されましたか?
これなら画像の細部も伝わりそうですね。拡大時のエフェクトも楽しい。

実はこれ、プラグインをひとつインストールするだけで同じことができます。だから、WordPress初心者でもすぐに使える。さらに、今まで作った記事画像にもすぐに適用できる

プラグインの名前は「Easy FancyBox」。イージーでファンシーな様子をお届けします。

Easy FancyBoxでできること

「Easy FancyBox」は多機能ですが、主に以下のような点が嬉しいプラグインです。

応用編

1. 拡大の挙動を好みにカスタマイズ

2.「コレがしたかった!」なフォトギャラリーを作る

3. YouTubeなどの動画をスマートに埋め込む

4. スマホやタブレットユーザーへの配慮

【まとめ】このサイトでの設定例

ビョイーンと拡大したいだけなら基本編で終了。
応用編ではこのサイトでの設定例を交えて、さらに有効的な活用方法を紹介します。 応用編へ

=基本編=

enlarge-image-ins1

1. 画像を「そのページ内で、ポップアップ表示で」拡大できる

冒頭で紹介したように、画像を「そのページ内で、ポップアップ表示で」拡大できるのが一番の特徴。WEB上の記事を閲覧しているとき、こんな場面に出くわしたことがあるはずです。

ちょっと画像内の説明が見えにくい・・・クリックしてみよう。

enlarge-image-02

はらぁ!!??? 画像だけになってもた・・・

enlarge-image-03

【画像をクリックしたら、その画像だけが表示されているページへ移動する】、という現象ですね。確かに大きなサイズが表示されるんですが、この状態になると、閲覧者はブラウザの「戻る」ボタンを押さなければ、元のページへ帰ることができません

一方、「そのページ内で、ポップアップ表示で」拡大されれば、拡大画像を閉じるだけでOK。
”閲覧ストレス”がとても軽減されます

 クリックで拡大

enlarge-image-04

2. 拡大時のエフェクトが気持ちいい

どんなサイズで挿入した画像でも、気持ちのいいエフェクトで拡大表示されます。応用編で後述しますが、エフェクトの種類も好みのものに変更できます。

 全てクリックで拡大

enlarge-image-05

enlarge-image-06

enlarge-image-07

enlarge-image-08

ちなみに、これらの拡大された画像は【アップロードしたときの、オリジナルサイズの画像】です。記事内には小さい画像が表示されているだけ。つまり、

クリックした時に、アップロードした元画像が表示され、拡大しているように見えている】ということです。だから上の画像たちも、それぞれ拡大後の大きさが違うんですね。

・・・ハテナマークが飛んでますか?そんなあなたは、こちらの記事もあわせてどうぞ。

 関連記事

WordPressを利用するなら、早いうちに知っておきたい知識です。

3. 設定不要。インストールしたらすぐに使える

enlarge-image-ins2

ポップアップで拡大表示させるためには、通常はWEBサイト内に「Lightbox」というスクリプトを実装する必要があります。定番とはいえ、それには相応の知識と、初心者にとっては少し怖いカスタマイズが必要になります。が。

Easy FancyBoxならインストールするだけ。クリック数回で完了します

Easy FancyBoxをインストール

enlarge-image-09

インストール方法は、通常のWordPressプラグインと同様です。管理画面内『プラグイン』→『新規追加』→『Easy FancyBox』で検索 → インストール&有効化。以上です。

4. 直感的。WordPressのデフォルト操作で画像挿入

あとはもう、拡大させたい画像の『リンク先』を『メディアファイル』にするだけ

enlarge-image-10

いつも画像を挿入するときにやっているデフォルト操作で済むのも、嬉しいところです。

上の画像は、『メディアを追加』ボタンをクリックしたあとの右下セクションです。

5. 既存の記事画像にも適用される

さて、『リンク先』を『メディアファイル』に指定して挿入した画像は、もうビョイーンと拡大表示されるようになっています。これはつまり・・・【既に公開済みの記事画像に対しても、同じ指定をし直してやれば、拡大機能が有効化される】、ということ。

別の言い方をすると、既に『リンク先』を『メディアファイル』に指定していた画像たちは、プラグインをインストールするだけで、拡大表示されるようになります。

6. ユーザビリティーアップで検索エンジン最適化

enlarge-image-ins3

Easy FancyBoxをインストールしていない状態だとどうなるでしょう。同じように、『リンク先』を『メディアファイル』に指定し、挿入した画像をクリックすると・・・

enlarge-image-02

enlarge-image-03

例の残念な現象が起こります。

少し振り返りますが、この状態になると、閲覧者はブラウザの「戻る」ボタンを押さなければ、元のページへ帰ることができません。ユーザビリティーが損なわれている、とも言えるでしょう。閲覧者によってはその時点でページを閉じ、離脱してしまう可能性も考えられます

また、画像がひとつだけ表示されているページを行き来させていることが、果たして検索エンジンに対してどんな印象を与えるのかは定かではありません。なんにせよ、訪問者の視点も頭にインストールしておけば、結果的に”読まれるコンテンツ”に繋がっていくのではないでしょうか。


次は応用編。このサイトで行っている設定例を交えて、さらに有効的な活用方法を紹介します。

応用編へ

ページ:

1

2

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  2. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…
  3. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  4. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  2. theme-manual-update_ec

    ワードプレス

    アップデート通知が来ない!?WordPressテーマを手動でアップデートする方法

    アップデート通知、なんでこないの?ある有名なストーリーがあります。…

  3. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  4. set-double-rectangle_ecmg
  5. sns-count-cache_ecmg

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス!「ページを表示するたびに、今のシェア数…

  6. like-button-card_ecmg-ps
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. business-books_ecmg
  2. tcd-mag_ecmg-ps
  3. todoist_ec
  4. display-speed_ec
  5. retina_ecmg
  6. todoist-extension_ecmg

ピックアップ記事

  1. sns-count-cache_ecmg
  2. intuitive-custom-post-order_ec
  3. tcd-theme-options_ecmg
  4. enlarge-image-ecmg
  5. todoist-routine_ecrt
  6. dash_ecmg

タスク管理で、自己管理。

todoist

掘り出し記事

  1. retina-os-solution_ecmg
  2. backup-all-in-auto_ec
  3. analytics-ip-filter_ecmg
  4. retina-weight-saving_ecmg

魅力的なブログを、今すぐ作ろう。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. intuitive-custom-post-order_ec
  2. jpg-gif-png_ecmg
  3. media-setting_ec
  4. quicktag_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. blog-contents_ecrt
  2. reset-button_ecrt
  3. irreplaceable-ecmg
  4. modern-dilemma-ecmg
  1. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  2. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  3. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  4. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  5. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP