WordPress

【WordPress】クリックで画像を拡大表示させるプラグイン「Easy FancyBox」の設定

WordPressでブログ記事を書くときに画像を挿入する機会はたくさんありますが画像を入れてみたものの「画像内の小さい文字が見えずらい」「画像が思っていたよりも小さい」ということがあると思います。

画像をクリックすれば拡大表示できれば見やすくなります。

そんな時はWordPressの素敵なプラグイン「Easy FancyBox」です。

このプラグインをインストールするだけで画像をクリックした際に同一画面内で画像をポップアップ表示で拡大表示することが出来ます。

WordPressの標準機能で画像のリンク先として「メディアファイル」を選択すれば画像だけを拡大することは出来ますが、同一ページとして画像拡大画面に遷移するため、記事を読み進めるためには一度ブラウザの戻るボタンを押さないとと元の記事ページに戻ることが出来ません。画像を拡大するたびに元記事から離脱しなければならないため、ユーザビリティが損なわれます。場合によっては、画像拡大画面に遷移した後に画像ページを閉じて、離脱してしまう可能性もあります。

「Easy FancyBox」を導入して、ブログを見てくれている方にとって分かりやすく親切なサイトにしましょう。

 

Easy FancyBoxのインストール

「Easy FancyBox」のインストールは簡単です。
WordPressのプラグインから新規追加を選択します。

プラグインインストール

 

 

 

 

プラグインを追加の画面からキーワードのところに「Easy FancyBox」と入力して検索
「Easy FancyBox」検索されたら今すぐインストールをクリック

easyfancybox検索

インストールが出来たら有効化します。

easyfancybox有効化

有効化が完了すると以下のようにプラグイン一覧に表示されます。

easyfancybox有効化完了

 

Easy FancyBoxを使ってみる

雪だるま(easyfancybox無効状態)Easy FancyBoxの設定を行っていない画像

Easy FancyBoxの設定を行った画像雪だるま(easyfancybox有効状態)

画像をクリックするとビヨーンとポップアップしてきたと思います。
この表示方法だと画面遷移もありませんし、ポップアップ画像も右上の「✖ボタン」を押すか、画像以外のところをクリックすれば元の記事にすぐに戻れます。

画像の設定方法

画像の編集画面のリンク先を「メディアファイル」に指定

easyfancybox設定方法

Easy FancyBoxのプラグインを入れていない状態で同じ設定をしている場合は別画面に遷移しますが、プラグインを入れていると同じ画面で画像をポップアップさせることが出来るようになります。

 

代替テキスト表示有無

デフォルトの設定だと代替テキストを設定している場合、以下のように代替テキストの内容がそのまま表示されてしまいます。
easyfancybox代替テキスト表示あり

FancyBoxの設定を変更するで代替テキストの内容を非表示に出来ます。
WordPressの設定(メディア)WordPressの設定から「メディア」を選択します。

「Images」の設定に「Allow title from thumbnail alt attribute.」の項目があります。

この設定項目のチェックをはずします。

easyfancybox詳細設定

 

そうすると以下のように代替テキストの内容を非表示にすることが出来ます。基本的に代替テキストの内容はブログの画面上に表示させる必要はないと思いますので、非表示の設定にしておきましょう。

記事数が増えてからでもこの設定をすれば、過去の記事すべてに適用されるので安心です。

easyfancybox代替テキスト表示なし

 

デフォルトでリンク先をメディアファイルに

WordPressは、画像を挿入する際にデフォルトで「なし」に設定されています。画像を追加するたびに画像編集するのは手間なのでデフォルトでメディアファイルが選ばれるようにWordPressの設定デフォルト設定を変更しましょう。

以下のURLにアクセスしてください。
「自サイトのURL/wp-admin/options.php」

※例)私のサイトの場合
「https://zaiteku-cookie.com/wp-admin/options.php」

以下のようなWordPress「すべての設定」が確認できる画面になります。
WordPressすべての設定

 

この画面の中から「image_default_link_type」の項目を検索(Ctrl+F)してください。
リンク先デフォルト設定項目

 

デフォルトでは空欄になっていると思いますので、「file」と入力して一番左したにある「変更を保存」をクリック。
easyfancybox変更を保存ボタン

 

以上で設定完了です。
easyfancybox添付ファイル表示設定

画像追加時に添付ファイルの表示設定の項目でリンク先として「メディアファイル」が選ばれるようになりました。

 

関連の書籍

 

-WordPress

Copyright© クキブロ -お得な情報みいつけた- , 2020 All Rights Reserved Powered by AFFINGER5.