ワードプレス

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

=応用編=

enlarge-image-ins4

「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

キャプション表示

enlarge-image-17

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

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

左右の矢印を表示

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

enlarge-image-18

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

enlarge-image-19

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

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

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

enlarge-image-20

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

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

enlarge-image-21

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

enlarge-image-22

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

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

enlarge-image-23

『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設定項目全体をセクションごとに貼り付けておきます。参考にしつつ、好みにカスタマイズしてください。

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

enlarge-image-34

enlarge-image-35

enlarge-image-36

enlarge-image-37

enlarge-image-38

enlarge-image-39

基本編へ戻る

ページ:
1

2

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  2. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  3. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  4. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  5. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…

関連記事

  1. tcd-theme-selection_ecmg-ps
  2. media-setting_ec

    ワードプレス

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

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

  3. annotation-image_ecmg

    ワードプレス

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

    注釈画像も、自由自在。前回までの記事では、Screenpres…

  4. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

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

  5. compress-jpeg-png-images_ecrt

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG ima…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトで表示されている…

  6. screenpresso-capture_ec

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでブログに必須のスクリーンショットを撮る方法

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

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

特集記事

  1. tcd-mag_ecmg-ps
  2. todoist-tips_ecmg
  3. todoist_ec
  4. display-speed_ec
  5. tcd-theme-user-review_ecmg
  6. retina_ecmg

ピックアップ記事

  1. tcd-theme-options_ecmg
  2. lightshot_ecmg
  3. simple-image-sizes_ec-ps
  4. original-share-button_ecmg-ps
  5. todoist-basic_ec-ps
  6. customized-theme-update_ecmg-1-ps

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

todoist

掘り出し記事

  1. facebook-fast-display_ecmg
  2. todoist-share_ec
  3. backup-all-in-auto_ec
  4. feedly-count-problem_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. sns-count-cache_ecmg
  2. todoist-class_ecrt
  3. enlarge-image-ecmg
  4. tcd-css-customize_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. modern-dilemma-ecmg
  2. reset-button_ecrt
  3. irreplaceable-ecmg
  4. restriction_ecmg-ps
  1. todoist-tips_ecmg

    マネジメント

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

    マネジメント

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

    ワードプレス

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

    ブログ

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

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
PAGE TOP