WordPressでブログ記事を書くときに画像を挿入する機会はたくさんありますが画像を入れてみたものの「画像内の小さい文字が見えずらい」「画像が思っていたよりも小さい」ということがあると思います。
画像をクリックすれば拡大表示できれば見やすくなります。
そんな時はWordPressの素敵なプラグイン「Easy FancyBox」です。
このプラグインをインストールするだけで画像をクリックした際に同一画面内で画像をポップアップ表示で拡大表示することが出来ます。
WordPressの標準機能で画像のリンク先として「メディアファイル」を選択すれば画像だけを拡大することは出来ますが、同一ページとして画像拡大画面に遷移するため、記事を読み進めるためには一度ブラウザの戻るボタンを押さないとと元の記事ページに戻ることが出来ません。画像を拡大するたびに元記事から離脱しなければならないため、ユーザビリティが損なわれます。場合によっては、画像拡大画面に遷移した後に画像ページを閉じて、離脱してしまう可能性もあります。
「Easy FancyBox」を導入して、ブログを見てくれている方にとって分かりやすく親切なサイトにしましょう。
Easy FancyBoxのインストール
「Easy FancyBox」のインストールは簡単です。
WordPressのプラグインから新規追加を選択します。
プラグインを追加の画面からキーワードのところに「Easy FancyBox」と入力して検索
「Easy FancyBox」検索されたら今すぐインストールをクリック
インストールが出来たら有効化します。
有効化が完了すると以下のようにプラグイン一覧に表示されます。
Easy FancyBoxを使ってみる
Easy FancyBoxの設定を行っていない画像
Easy FancyBoxの設定を行った画像
画像をクリックするとビヨーンとポップアップしてきたと思います。
この表示方法だと画面遷移もありませんし、ポップアップ画像も右上の「✖ボタン」を押すか、画像以外のところをクリックすれば元の記事にすぐに戻れます。
画像の設定方法
画像の編集画面のリンク先を「メディアファイル」に指定
Easy FancyBoxのプラグインを入れていない状態で同じ設定をしている場合は別画面に遷移しますが、プラグインを入れていると同じ画面で画像をポップアップさせることが出来るようになります。
代替テキスト表示有無
デフォルトの設定だと代替テキストを設定している場合、以下のように代替テキストの内容がそのまま表示されてしまいます。
FancyBoxの設定を変更するで代替テキストの内容を非表示に出来ます。
WordPressの設定から「メディア」を選択します。
「Images」の設定に「Allow title from thumbnail alt attribute.」の項目があります。
この設定項目のチェックをはずします。
そうすると以下のように代替テキストの内容を非表示にすることが出来ます。基本的に代替テキストの内容はブログの画面上に表示させる必要はないと思いますので、非表示の設定にしておきましょう。
記事数が増えてからでもこの設定をすれば、過去の記事すべてに適用されるので安心です。
デフォルトでリンク先をメディアファイルに
WordPressは、画像を挿入する際にデフォルトで「なし」に設定されています。画像を追加するたびに画像編集するのは手間なのでデフォルトでメディアファイルが選ばれるようにWordPressの設定デフォルト設定を変更しましょう。
以下のURLにアクセスしてください。
「自サイトのURL/wp-admin/options.php」
※例）私のサイトの場合
「https://zaiteku-cookie.com/wp-admin/options.php」
以下のようなWordPress「すべての設定」が確認できる画面になります。
この画面の中から「image_default_link_type」の項目を検索（Ctrl+F）してください。
デフォルトでは空欄になっていると思いますので、「file」と入力して一番左したにある「変更を保存」をクリック。
以上で設定完了です。
画像追加時に添付ファイルの表示設定の項目でリンク先として「メディアファイル」が選ばれるようになりました。
関連の書籍