gtag('config', 'UA-172463047-1');

サイト作りテクニック

サイト作りの小技・画像をクリックするとポップアップさせ、閉じるボタンも表示するプラグイン

サイトを作っていて、画像や説明をクリックして拡大させたり、ポップアップさせたり、戻るの☒ボタンを付けたいって事有りますよね。プラウザの戻るや←をクリックすると、トップページに戻ってしまいます。色々なサイトを見ると、大抵ポップアップ&戻るの☒のボタンが右上に付いています。いったいどう設定してるのか知りたいですよね。

 

画像をクリックするとポップアップさせ、閉じるボタンも表示するプラグインとは

画像をクリックするとポップアップして大きな画像になるページを見てますよね。これって、「Easy FancyBox」プラグインを使ってるんです。

WordPressのプラグインEasy FancyBox

Easy FancyBoxのページ

あ、すみんません。WordPressのプラグインの説明って大抵英語なんですよ。

読むのが面倒な方のために、簡単解説しておきますね。

Easy FancyBoxのインストール

①WordPressにログインして、「プラグイン」→「新規追加」を選択します。

②キーワードに【Easy FancyBox】と入力(検索)⇒インストール⇒有効化

Easy FancyBox の基本設定

  • 「Easy FancyBox」の設定は、管理画面の [設定]-[メディア] に追加されます。
  • 【メディア】でポップアップさせるメディアタイプを選択します。通常は画像のみ(Images)で OK です。
  • 【オーバーレイ】でメディアを表示する際のオーバーレイの挙動設定を行います。ここもデフォルトのままで OK です。

  • 【ウインドウ】でポップアップした画面のデザイン設定を行います。ここもデフォルトのままで OK です。
  • ポップアップ画面に×ボタンをつけるには、「Show the (X) close button」をオンにします。(デフォルトでオンです)

  • 【その他】さらに細かな設定を行えますが、ここもデフォルトのままで OK です。

  • 【画像】 で対象となる画像の挙動、ギャラリーの設定を行うことができます。GIF画像を使うなら自動検出に .gif を追加してください。これがないと、GIF画像をクリックしてもポップアップしてくれません。

 

記事に画像を載せる時のポイント

「Easy FancyBox」プラグインの設定が無事に済みました。次は投稿画面での画像の貼り方です。

これをしないと、ポップアップも☒も付きませんので、しっかりおさえましょう。

  • メディア(画像)を追加するとき、【リンク先】をメディアファイルにする
  • サイズの大きな画像を用意する

以上で⇩のようにポップアップ&閉じる☒ボタンの完成です。

画像をクリックしてみてね★

-サイト作りテクニック
-

© 2021 Pio's Room