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」というJavaScriptライブラリなどを実装する必要があります。定番とはいえ、それには相応の知識と、初心者にとっては少し怖いカスタマイズが必要になります。が。

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. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  2. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  3. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  4. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  5. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…

関連記事

  1. like-button-card_ecmg-ps
  2. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressテーマTCD「オリジナルウィジェット」の効果的な使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  3. retina_ecmg
  4. browzer-extension_ec

    ワードプレス

    なんでも計測!”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Ima…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

  5. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

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

特集記事

  1. adjust-the-button_ecmg
  2. tcd-theme-user-review_ecmg
  3. todoist_ec
  4. display-speed_ec
  5. extension-tools-for-bloggers_ec
  6. tcd-theme-selection_ecmg-ps

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

todoist

ピックアップ記事

  1. facebook-page-plugin_ecmg-ps
  2. unroll-me_ec
  3. chrome-font_ecmg
  4. enlarge-image-ecmg
  5. sns-count-cache_ecmg2
  6. customized-theme-update_ecmg-1-ps

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

tcd-mag

掘り出し記事

  1. analytics-ip-filter-ecmg
  2. screenpresso-capture-ecmg
  3. retina-text-widget-ecmg
  4. todoist-share_ec
  5. retina-weight-saving_ecmg
  6. favicon-generator_ecmg

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

retina-os-solution

ピックアップ記事

  1. child-theme_ecmg
  2. customized-theme-update_ecmg-1-ps
  3. spark-tutorial-ecmg
  4. todoist-class_ecrt
  5. gif-animation_ec
  6. annotation-image-ecmg

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. todoist-productivity_ecmg
  2. chrome-full-screen-capture-ecmg
  3. sns-count-cache_ecmg2
  4. phrase-express_ecmg
  5. facebook-fast-display_ecmg
  6. jpg-gif-png_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. extension-tools-for-bloggers_ec
  2. tcd-mag_ecmg-ps
  3. tcd-theme-selection_ecmg-ps
  4. display-speed_ec
  5. tcd-theme-user-review_ecmg
  6. adjust-the-button_ecmg

ピックアップ記事

  1. firefox-full-screen-capture-ecmg
  2. phrase-express_ecmg
  3. unroll-me_ec
  4. jpg-gif-png_ecmg
  5. tcd-css-customize_ecmg
  6. dash_ecmg

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  2. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  4. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
PAGE TOP