WordPress

【WordPress】画像クリックで全画面にフワっと大きく表示する方法( Easy FancyBox プラグインを使う方法 )





記事上に配置したイメージをクリックすると、画面全体に大きく拡大して表示する方法です、

「Easy FuncyBox」プラグインを使うととっても簡単です。


記事内では小さく利用している画像でも1クリックで大きく表示できるのでユーザー(読者)にも見やすく読みやすいページになります。



クリックした画像をふわっと大きく表示するサンプル



記事上に配置したイメージをクリックすると、画面全体に大きく拡大して表示します。



画像を大きく表示するサンプル

( 本記事上のイメージも、クリックすることで画面に大きく表示しています。)



Easy FancyBox プラグインのインストールと設定



■ Step.1 プラグインをインストールする



プラグインの新規追加画面


WordPress の管理画面から、「プラグイン」→「新規追加」 で 「Easy FancyBox」を検索するとプラグインが出てきます。



Easy FancyBox プラグイン


確認してインストールし、有効化します。



■ Step.2 East Funcy Box を設定する



設定画面


WordPress の管理画面から、「設定」→「メディア」で設定画面を表示します。

大きな画面を表示するとき(消えるとき)に、フェードイン、フェードアウトさせたい場合は、「動作」設定で、トランジションイン、トランジションアウトの設定を「Elstic」から「フェード」に変更します。



ポイント



細かくいろいろな動作を設定することが可能ですが、サイト全体で統一した設定となり、イメージ個別に設定することはできません。

イメージの多くに適用してから設定を変えるとすべてに適用されてしまいますので、FasncyBox 導入時にいろいろと設定を試し、最初に設定を固めてしまうことをお勧めします。




記事内の画像を、ふわっと大きく表示させる方法



イメージをメディア設定する方法


イメージにリンクを貼る操作(リンクボタン)をクリックして、リンクではなく、「メディアファイル」を設定します。



完成です!プレビュー画面で実際の動作を確認してください。



WordPress の「ギャラリー」で利用する方法



WordPress には「ギャラリー」(画像を並べて表示する)機能があります。ギャラリーを利用した場合の、画像をふわっと大きく表示させる場合の方法です。



■ Step.1 ギャラリーを作成する



ギャラリーを作る


ブロックで「ギャラリー」を指定して、「アップロード」または「メディアライブラリ」で画像を選択します。



■ Step.2 ギャラリーにリンクで「メディアファイル」を設定します





ギャラリーのプロパティでリンク先に「メディアファイル」を設定します。



完成です!プレビュー画面で実際の動作を確認してください。



まとめ



記事上に配置したイメージをクリックすると、画面全体に大きく拡大して表示する方法では、「Easy FuncyBox」プラグインを使うと簡単です。



  • 「Easy FancyBox」プラグインを使うと簡単です
  • イメージに適用する場合は、リンクで「メディアファイル」を設定します
  • ギャラリーに適用する場合は、リンクで「メディアファイル」を設定します


おしゃれな記事をぜひ書いてくださいね。



WordPress のおすすめテーマ





WordPress の情報、テクニック一覧はこちらをクリック!













ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com