enlarge-image-ecmg

ワードプレス

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

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

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

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

 クリックで拡大

enlarge-image-01

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

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

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

スポンサーリンク

Easy FancyBoxでできること

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

基本編

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

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

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

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

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

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

応用編

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. FirefoxでWEBページ全体をフルスクリーンショット!見ているページの全画面…
  2. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  3. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  5. WordPressで子テーマを作る際に知っておくべき仕組みと注意点

関連記事

  1. like-button-card_ecmg-ps
  2. media-setting_ec

    ワードプレス

    知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

    意外と知らない、WordPressの”お気づかい”ひとつの画像をW…

  3. tcd-theme-options_ecmg

    ワードプレス

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

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

  4. screenpresso-capture-ecmg

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでパソコン画面のスクリーンショットを撮る方法

    ピクセル単位でキレイにキャプチャー。前回の記事ではScreenpr…

  5. facebook-app-id-app-secret-ecmg2

    マーケティング

    今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得し…

    こんなに簡単だったんですか。サイト運営をしていると、Faceboo…

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

特集記事

  1. theme-change_ecrt
  2. todoist-tips_ecmg
  3. todoist-extension_ecmg
  4. valuable-content-from-image_ec
  5. tcd-mag_ecmg-ps
  6. extension-tools-for-bloggers_ec

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

todoist

人気記事

  1. compress-jpeg-png-images-ecmg
  2. media-setting_ec
  3. child-theme-mechanism_ecmg-ps
  4. chrome-full-screen-capture-ecmg
  5. child-theme_ecmg
  6. todoist-basic_ec-ps

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

tcd-mag

ピックアップ記事

  1. original-share-button_ecmg-ps
  2. compress-jpeg-png-images-ecmg
  3. annotation-image-ecmg
  4. media-setting_ec
  5. spark-tutorial-ecmg
  6. customized-theme-update_ecmg-1-ps

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

retina-os-solution

掘り出し記事

  1. LightShot-Screenpresso_ecmg
  2. mailbox-goodbye-newapp_ec
  3. browzer-extension_ec
  4. todoist-design_ec
  5. todoist-share_ec
  6. screenpresso-initial-setting_ec

ゆっくり、フシギな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. blog-theme-mag_ecmg-ps
  2. chrome-full-screen-capture-ecmg
  3. facebook-page-plugin_ecmg-ps
  4. jpg-gif-png_ecmg
  5. sns-count-cache_ecmg2
  6. simple-image-sizes_ec-ps

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. theme-change_ecrt
  2. display-speed_ec
  3. valuable-content-from-image_ec
  4. tcd-theme-user-review_ecmg
  5. extension-tools-for-bloggers_ec
  6. tcd-theme-selection_ecmg-ps

人気記事

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

最近の記事

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. extension-tools-for-bloggers_ec

    ブログ

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. todoist-extension_ecmg

    マネジメント

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

    ワードプレス

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