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. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  2. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  3. FirefoxでWEBページ全体をフルスクリーンショット!見ているページの全画面…
  4. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. screenpresso-capture-ecmg

    ワードプレス

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

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

  2. description-video_ec
  3. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  4. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  5. unveil-lazy-load_ec

    ワードプレス

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

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

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

特集記事

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

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

todoist

人気記事

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

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

tcd-mag

ピックアップ記事

  1. todoist-constitution_ec
  2. quicktag_ecmg
  3. todoist-advanced_ec
  4. annotation-image-ecmg
  5. tcd-theme-options_ecmg
  6. todoist-productivity_ecmg

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

retina-os-solution

掘り出し記事

  1. todoist-share_ec
  2. screenpresso-initial-setting_ec
  3. browzer-extension_ec
  4. todoist-re-schedule_ec
  5. meta-seo-inspector_ecmg
  6. retina-os-solution_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. child-theme_ecmg
  2. tcd-theme-options_ecmg
  3. simple-image-sizes_ec-ps
  4. sns-count-cache_ecmg2
  5. dash_ecmg
  6. jpg-gif-png_ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. todoist-tips_ecmg
  2. improvement-flow_ecmg
  3. tcd-mag_ecmg-ps
  4. extension-tools-for-bloggers_ec
  5. tcd-theme-user-review_ecmg
  6. valuable-content-from-image_ec

人気記事

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

最近の記事

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

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  2. adjust-the-button_ecmg

    ワードプレス

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

    ワードプレス

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

    マネジメント

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

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
PAGE TOP