デザインテンプレート販売中 >>

Easy FancyBoxの設定と使い方|動かないときのチェックポイントとは?

記事内の画像クリックで拡大表示させるプラグイン、Easy FancyBoxの設定と使い方をご紹介します。

このプラグインを導入することで動きのあるブログ、読者さんが画像を確認しやすいブログを作ることが可能です。

ブログをオシャレにしよう!

Easy FancyBoxの設定方法

まずは、Easy FancyBoxプラグインをインストール&有効化しましょう。

Easy FancyBox

WordPressのプラグインのインストール方法|手動&FTPのやり方も解説
このページでは、WordPressのプラグインのインストール方法を紹介しています。 プラグインのインストールはWordPressを使っていく上で必須のスキルですので、是非この機会に色々なプラグインのインストール方法があることを覚えてお...

 

有効化が完了したら、Easy FancyBoxプラグインの設定をクリックします。

 

画像サイズの幅と高さを設定します。

特にこだわりがない人はデフォルトのままで問題ありません。

 

その他は触る必要がありませんので、そのまま1番下までスクロールして変更を保存をクリックします。

Easy FancyBoxの使い方

アフィ
アフィ

Easy FancyBoxは1枚の画像を挿入する場合と、複数の画像を挿入する場合で使い方が異なります。

メディア(1枚の画像)を挿入する方法

まずは、いつもどおりエディターを開きましょう。

今回はクラシックエディターで話を進めます。

 

エディターが開けたら、メディアを追加をクリックします。

 

記事に挿入したい画像を選択し、リンク先をメディアファイルに、サイズは自分のお好みのものを選んで投稿に挿入をクリックします。

 

すると、このようにエディターに画像が挿入されます。

今回は中サイズで投稿してみました。

 

プレビューで投稿記事をプレビューし、該当の画像をクリックしてみてください。

このように拡大表示が行われます。

ギャラリー(複数の画像)を挿入する方法

複数の画像を数カラムに分けて横並びに表示させることも可能です。

記事投稿画面でメディアをクリックします。

 

ギャラリーを作成をクリックします。

 

記事に挿入したい画像を選択し、ギャラリーを作成をクリックします。

 

リンク先をメディアファイルに、カラム数は横並びに表示させる数をお好みで、サイズもお好みに変更し、ギャラリーを挿入をクリックします。

 

プレビューを確認すると、このように横並びでギャラリーが表示されます。

 

画像をクリックすると、このように画像が拡大表示されます。

Easy FancyBoxのカスタマイズ方法

アフィ
アフィ

Easy FancyBoxを更に便利に使うカスタマイズ例をご紹介します。

キャプションを表示する

画像にキャプションを設定することで、画像の下に画像の説明文を表示させることが可能です。

今回はギャラリーにて行いますが、1枚のみの画像表示を行うメディアでも同様の機能が使えます。

画像選択後、画像の下のスペースにキャプションを入力することで、画像にキャプションが表示されます。

 

メニューの中にキャプションを入力しても、同様の結果が得られます。

 

実際の表示例がこちらです。

代替テキストを表示する

画像に代替テキストを設定することで、画像拡大時に代替テキストを表示させることが可能です。

今回はギャラリーにて行いますが、1枚のみの画像表示を行うメディアでも同様の機能が使えます。

画像選択後、代替えテキストに画像拡大時に表示させたい文字を入力します。

 

実際の表示例がこちらです。

Easy FancyBoxが動かないときのチェックポイント

Easy FancyBoxプラグインを有効化したにもかかわらず、画像をクリックしても拡大表示されないときはリンク先がメディアファイルになっているか確認しましょう。

他の設定をどれだけ正しく行っていても、リンク先でメディアファイルを選択していなければプラグインは動きません。

アフィ

2017年8月にブログをスタート。
1つの特化型ブログで月間75万PVを達成し、現在では複数の特化型ブログから安定的に月収50万円以上の収入を確保しています。
詳しく

アフィをフォローする

当ブログのデザインをあなたのブログにも実装してみませんか?

  • 3月15日ついにリリース
  • デザイン2種を展開
  • 今すぐあなたのブログをオシャレに
プラグインの使い方
アフィをフォローする
アフィブログ

コメント