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. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  2. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  3. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  4. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. unveil-lazy-load_ec

    ワードプレス

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

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

  2. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。お悩み相談室のコーナーです。…

  3. tcd-theme-options_ecmg

    ワードプレス

    理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

  4. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな簡単さ。小見出しのデザインを美しくしたい?ああ、例え…

  5. set-double-rectangle_ecmg
  6. annotation-image-ecmg

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Windows用の万能ツ…

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

特集記事

  1. retina_ecmg
  2. display-speed_ec
  3. valuable-content-from-image_ec
  4. improvement-flow_ecmg
  5. tcd-theme-selection_ecmg-ps
  6. tcd-theme-user-review_ecmg

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

todoist

人気記事

  1. jpg-gif-png_ecmg
  2. chrome-font_ecmg
  3. child-theme_ecmg
  4. child-theme-mechanism_ecmg-ps
  5. media-setting_ec
  6. todoist-basic_ec-ps

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

tcd-mag

ピックアップ記事

  1. tcd-css-customize_ecmg
  2. annotation-image-ecmg
  3. todoist-class_ecrt
  4. gif-animation_ec
  5. phrase-express_ecmg
  6. original-share-button_ecmg-ps

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

retina-os-solution

掘り出し記事

  1. analytics-ip-filter-ecmg
  2. backup-all-in-auto_ec
  3. theme-manual-update-ecmg
  4. todoist-design_ec
  5. mailbox-goodbye-newapp_ec
  6. favicon-generator_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. tcd-theme-options_ecmg
  2. widgetoon-js-count-jsoon_ecmg
  3. todoist-routine_ecrt
  4. todoist-productivity_ecmg
  5. intuitive-custom-post-order_ec
  6. chrome-font_ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. tcd-mag_ecmg-ps
  2. tcd-theme-user-review_ecmg
  3. display-speed_ec
  4. todoist_ec
  5. extension-tools-for-bloggers_ec
  6. improvement-flow_ecmg

人気記事

  1. jpg-gif-png_ecmg
  2. screenpresso-initial-setting_ec
  3. child-theme_ecmg
  4. child-theme-mechanism_ecmg-ps
  5. media-setting_ec
  6. chrome-full-screen-capture-ecmg
  7. chrome-font_ecmg

最近の記事

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

    ワードプレス

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

    マネジメント

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  5. adjust-the-button_ecmg

    ワードプレス

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