ワードプレス

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

=応用編=

enlarge-image-ins4

応用編

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

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

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

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

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

「Easy FancyBox」基本編はこちら

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

Easy FancyBoxをインストールすると、管理画面『設定』→『メディア』内に、プラグインの設定項目が追加されます。

 クリックで拡大

enlarge-image-11

上の画像は設定画面のごく一部です。が、怖気づく必要はまったくありません。
このサイトでの設定例を交えて、キモとなる部分を紹介していきます(※記事公開時点)

対象画像形式を追加

enlarge-image-12

『Images』セクション内の『Autodetect』では、拡大させる対象となる画像形式を追加できます。デフォルト状態に『.gif』の拡張子を追記することで、GIFアニメーションもクリックして拡大できるように設定しています。

 クリックで拡大

enlarge-image-13

拡大・縮小時のエフェクトを変更

enlarge-image-14

同セクション内の『Behavior』では、拡大・縮小時のエフェクトを変更できます。上の段が拡大時、下の段が縮小時(元に戻るとき)の設定になります。

例えば、『Transition In』と『Transition Out』をともに『Fade』に設定すると、フワッと拡大し、フワッと縮小するようになります。

enlarge-image-15

enlarge-image-16

ビョイーン、も楽しいですがフワッ、もいいですね。上品です。
実際に変更して、好みの挙動に設定してみてください。

右側の『Easing』は、左側の『Transition』が『Elastic』の場合のみ適用されます。

閲覧ストレス対策 – 表示情報を変更

enlarge-image-ins5

キャプション表示

re-enlarge-image-01

同セクション内の『Appearance』では、画像拡大時のキャプション表示内容を変更できます。場所の変更や、altに記述されている内容をキャプションとする、などという設定が可能。

必要性を感じないため、私は『Show title…』のチェックを外し、全て非表示にしています。

左右の矢印を表示

また同セクション内の『Gallery』では、『Show the gallery navigation arrows』にチェックを入れています。

re-enlarge-image-02

これにより、拡大画像の左側・右側にマウスカーソルを持っていくと、矢印マークが表示されます。矢印が表示されることで、「記事内にある画像を行き来できる」ということを、やんわりと印象づけることができるのです。

enlarge-image-19

これは、後述する「複数画像を比較してもらいたい場合」にも役立つ設定になります。

元の画面に戻りやすくする

デフォルトでは、拡大画像右上の「×」ボタンをクリックするか、画像の外側部分をクリックすることで元の画面に戻ることができます。

enlarge-image-20

でも閲覧者が直感的に、画像の外側をクリックしてくれるとは限りません。ましてや、こんなに小さい「×」ボタンを狙い撃ちせなあかんのかい・・・と、私なら思いそうです。

というわけでここでは、場所を問わずどこでももう一度クリックすれば、拡大前の画面に戻れるように設定しています。

enlarge-image-21

『Close FancyBox when content is clicked』にチェックを入れるだけ。この設定で「×」ボタンは実質不要になります。よって『Window』セクション内の『Show the (X) close button』のチェックを外すことで非表示にしてもよいでしょう。

enlarge-image-22

・・・が、私は閲覧者が迷うことのないように、あえて表示させたままにしています。これらの設定は、ちょっとした「閲覧ストレス対策」として行っているものです。

矢印キーで画像を比較してもらう

re-enlarge-image-03

『Images』セクション『Gallery』内の『Arrow key strokes browse the gallery』にチェックを入れると、キーボードの矢印キーで、記事内の画像を切り替えられるようになります。これはクリックして拡大した後、画像を比較させたいときなどに有効です

例えば「画像形式の使い分け方」を紹介した記事内では、劣化のないPNG形式と、あえて劣化させたJPEG形式の画像を並べ、あまり見栄えに差がないことを比較してもらっています。

 クリックで拡大後、左右キーで比較

jpg-gif-png_09

jpg-gif-png_10

こういった応用も可能になるわけですね。片方の画像を拡大しては閉じ・・・もう片方の画像を拡大しては閉じ・・・なんて作業をしていると、うまく比べることができませんから。

 関連記事

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

WordPressでは、複数の画像が並ぶフォトギャラリーを簡単に作成できます。

作成手順

(1)投稿画面内『メディアの追加』ボタン

(2)左カラムの『ギャラリーを作成』

(3)任意の画像を複数選択

(4)右下の『ギャラリーを作成』ボタン

で、下図のようになります。

 『ギャラリーを作成』ボタン押下後

enlarge-image-24

ここでも『リンク先』は必ず『メディアファイル』に設定。カラム数や挿入サイズは任意です。

そしてここからが重要。Easy FancyBoxを導入していれば、一枚挿入したときと同じように、クリックで拡大表示されます。

クリックで拡大(左右キーで切替え)

左右の矢印マークをクリックすることで、拡大されたまま、途切れることなく画像たちを閲覧できるようになりました。これぞフォトギャラリー、といったかんじですね。さらに左右キーでの切りかえを有効にしていれば、チコチコとたくさんクリックする必要もありません。

WordPressの初期状態では、画像をクリックしても「画像だけのページ」が表示されます。

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

enlarge-image-ins6

YouTubeやVimeoなどの動画は、共有コードをコピーして簡単に埋め込むことができます。

【例】YouTube→WordPressへ貼り付け

enlarge-image-42

でも、特にたくさんの動画を貼り付けたいときなどは、ページ全体が表示されるまでの時間が遅くなりがち。これはYouTube側に呼び出しをかけてから動画を表示させているわけなので、しょうがないことでもあります。

さらに動画がズラッと並んでいると見栄えも野暮ったくなってしまう・・・
そんなときは、こんなテクニックを使うとスマートです。

 クリックで再生


tcd-theme_01

上では、代わりの画像を表示させておいて、クリックすると動画がポップアップ表示されるようにしています。これなら、「動画を見よう」とクリックしたときに、初めてYouTube側にアクセスするため、ページ全体が表示されるまでの待ち時間も、見栄えの問題も解決します

画像クリックで動画をポップアップさせる方法

方法も簡単。上の動画例はYouTubeですが、まずEasy FancyBoxの設定画面内『Media』セクションで、任意のソース元にチェックを入れます。

enlarge-image-31

『Images』のチェックは外さないように。画像が拡大しなくなってしまいます。

あとはWordPressのテキストモードで以下のように記述します。

<a href="https://youtu.be/li1sylr8UUY">
<img src="画像URL" />
</a>

挿入した画像をaタグで挟んで、リンク先をYouTubeの共有コードにしているだけ。直感的。

ここではMacbookの無料モックアップ素材を利用していますが、検索すればたくさん出てきます。引用元の記載は不要か?などの情報に注意して選びましょう。

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

enlarge-image-ins7

Easy FancyBoxは、スマートフォンやタブレットで閲覧しても、画像や動画をタップすることでポップアップ表示させることができます。

ただし、もともと画面が小さいデバイスで閲覧する場合、ポップアップしても拡大されたように見えないことが普通です。

 Before | After

enlarge-image-33

enlarge-image-32

これはデバイスの画面の大きさによるので、どうしようもないことです。閲覧者にはピンチアウト操作でズームしてもらう、という手段が妥当でしょう。2本指でクワッ!と開く操作のことですね。(デバイスをその都度横向きにしてもいいけど酔いそう・・・)

現在ではスマートフォンをメインにしたインターネットユーザーも多いため、当然のようにピンチアウトしてくれることがほとんどでしょう。ただし対象としている読者層によっては・・・

ちっさくて見えへんわぇ

と諦めてしまうことも想像できます。

拡大しなくても見えやすい画像を用意する

対策としては、【用意する画像自体をモバイルフレンドリーにする】ことが考えられます。

全体像が広くなってしまうのであれば、重要な部分だけをトリミングしたり、キャプチャー画像であれば、拡大表示させた状態で撮る。これだけで解消されることもあるでしょう。

例えば下の画像も、赤枠で囲んである部分が「伝えたいポイント」だとすると、必要となる箇所は部分的です。

enlarge-image-04

なので思い切って、必要な場所だけをトリミングしてみます。

enlarge-image-40

enlarge-image-41

トリミングするだけでも格段に見えやすくなりました。俯瞰したイメージが必要な場合は別ですが、文章で補足できるところはバッサリと切ることができる、ということですね。

さらに上の2つの画像は、PCでは横並びに表示させ、スマートフォンではひとつずつ、縦に並ぶように設定してあります。かっこよさげに聞こえますが、クリックひとつで済んでます。

 関連記事

このように、ひとつの配慮が三ツ星ホテル級のオモテナシに・・・とまでは言えませんが、ピンチアウトが不要になるだけでもずいぶん違うでしょう。特にモバイルユーザーを対象とした記事であれば、非常に有効と言えます

なおここではデスクトップユーザーのために、クリックで拡大することもできるようにしています。閲覧デバイスの画面サイズが大きくなると、まだ”見えにくい”場合があるため、こんなあわせ技も効果的になってくるのです。

注意書きで済ます、という荒技も

それでもやっぱり、限界はあります。画像一枚に必要とする時間も増えます。

というわけで、「クリックで拡大」「ピンチアウトしてご覧ください!」のような注意書きをしておけば済む、という荒技も覚えておくと幸せになれます。ええ、この記事でも頻出してます。

・・・「ピンチアウト」くらいは検索してくれることを願いましょう。

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

最後に、このサイトで行っているEasy FancyBox設定項目全体をセクションごとに貼り付けておきます。参考にしつつ、好みにカスタマイズしてください。

 クリックで拡大後、左右キーで閲覧

re-enlarge-image-04

re-enlarge-image-05

re-enlarge-image-06

『Do not include standard WordPress jQuery library』は不具合が出ない限りできるだけチェックを入れましょう。重複読み込みを避けてくれるためページ表示速度対策にもなります。

re-enlarge-image-07

re-enlarge-image-08

re-enlarge-image-09

基本編へ戻る

固定ページ:
1

2

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  2. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  3. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  4. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  5. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

関連記事

  1. retina-os-solution_ecmg

    ワードプレス

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

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

  2. widgetoon-js-count-jsoon_ecmg

    マーケティング

    Twitterのシェア数表示を復活!「widgetoon.js & count.jsoon」の登録方…

    簡単登録で、後はおまかせ。Twitterは以前仕様変更があり、公式…

  3. quicktag_ecmg

    ワードプレス

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

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

  4. unveil-lazy-load_ec

    ワードプレス

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

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

  5. favicon-generator_ecmg

    ワードプレス

    ファビコン表示を一括設定。WordPressプラグイン「Favicon by RealFavicon…

    WEB上で見かける、ハイセンスなアイツ。名前は通称「ファビコン…

  6. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

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

特集記事

  1. adjust-the-button_ecmg
  2. valuable-content-from-image_ec
  3. theme-change_ecrt
  4. tcd-theme-user-review_ecmg
  5. tcd-mag_ecmg-ps
  6. todoist_ec

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

todoist

人気記事

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

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

tcd-mag

ピックアップ記事

  1. dash_ecmg
  2. facebook-page-plugin_ecmg-ps
  3. simple-image-sizes_ec-ps
  4. chrome-font_ecmg-1
  5. media-setting_ec
  6. lightshot_ecmg

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

retina-os-solution

掘り出し記事

  1. screenpresso-initial-setting_ec
  2. facebook-app-id-app-secret-ecmg2
  3. todoist-share_ec
  4. retina-weight-saving_ecmg
  5. LightShot-Screenpresso_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. annotation-image-ecmg
  2. original-share-button_ecmg-ps
  3. facebook-page-plugin_ecmg-ps
  4. widgetoon-js-count-jsoon_ecmg
  5. chrome-full-screen-capture-ecmg
  6. simple-image-sizes_ec-ps

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. retina_ecmg
  2. tcd-theme-selection_ecmg-ps
  3. todoist-extension_ecmg
  4. adjust-the-button_ecmg
  5. todoist-tips_ecmg
  6. extension-tools-for-bloggers_ec

人気記事

  1. compress-jpeg-png-images-ecmg
  2. jpg-gif-png_ecmg
  3. todoist-basic_ec-ps
  4. chrome-full-screen-capture-ecmg
  5. media-setting_ec
  6. child-theme-mechanism_ecmg-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. todoist_ec

    マネジメント

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

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  3. tcd-mag_ecmg-ps

    ワードプレス

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

    ワードプレス

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

    マネジメント

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