記事内の画像クリックで拡大表示させるプラグイン、Easy FancyBoxの設定と使い方をご紹介します。
このプラグインを導入することで動きのあるブログ、読者さんが画像を確認しやすいブログを作ることが可能です。
Easy FancyBoxの設定方法
まずは、Easy FancyBoxプラグインをインストール＆有効化しましょう。
有効化が完了したら、Easy FancyBoxプラグインの設定をクリックします。
画像サイズの幅と高さを設定します。
特にこだわりがない人はデフォルトのままで問題ありません。
その他は触る必要がありませんので、そのまま１番下までスクロールして変更を保存をクリックします。
Easy FancyBoxの使い方
Easy FancyBoxは１枚の画像を挿入する場合と、複数の画像を挿入する場合で使い方が異なります。
メディア（1枚の画像）を挿入する方法
まずは、いつもどおりエディターを開きましょう。
今回はクラシックエディターで話を進めます。
エディターが開けたら、メディアを追加をクリックします。
記事に挿入したい画像を選択し、リンク先をメディアファイルに、サイズは自分のお好みのものを選んで投稿に挿入をクリックします。
すると、このようにエディターに画像が挿入されます。
今回は中サイズで投稿してみました。
プレビューで投稿記事をプレビューし、該当の画像をクリックしてみてください。
このように拡大表示が行われます。
ギャラリー（複数の画像）を挿入する方法
複数の画像を数カラムに分けて横並びに表示させることも可能です。
記事投稿画面でメディアをクリックします。
ギャラリーを作成をクリックします。
記事に挿入したい画像を選択し、ギャラリーを作成をクリックします。
リンク先をメディアファイルに、カラム数は横並びに表示させる数をお好みで、サイズもお好みに変更し、ギャラリーを挿入をクリックします。
プレビューを確認すると、このように横並びでギャラリーが表示されます。
画像をクリックすると、このように画像が拡大表示されます。
Easy FancyBoxのカスタマイズ方法
Easy FancyBoxを更に便利に使うカスタマイズ例をご紹介します。
キャプションを表示する
画像にキャプションを設定することで、画像の下に画像の説明文を表示させることが可能です。
画像選択後、画像の下のスペースにキャプションを入力することで、画像にキャプションが表示されます。
メニューの中にキャプションを入力しても、同様の結果が得られます。
実際の表示例がこちらです。
代替テキストを表示する
画像に代替テキストを設定することで、画像拡大時に代替テキストを表示させることが可能です。
画像選択後、代替えテキストに画像拡大時に表示させたい文字を入力します。
実際の表示例がこちらです。
Easy FancyBoxが動かないときのチェックポイント
Easy FancyBoxプラグインを有効化したにもかかわらず、画像をクリックしても拡大表示されないときはリンク先がメディアファイルになっているか確認しましょう。
他の設定をどれだけ正しく行っていても、リンク先でメディアファイルを選択していなければプラグインは動きません。
コメント