WordPressで画像を表示するなら「Easy FancyBox」
Easy FancyBoxとは？
WordPressで、画像をモーダルで拡大するためのプラグインです。
実際に見てみる方が早いでしょう。
こちらの画像をクリックすると、拡大表示されます。
インストール
プラグイン > 新規追加より「Easy FancyBox」と検索し、プラグインをインストールします。
設定
インストールしただけでは、動作しないため、設定をしましょう。
設定 > メディアを開きます。
ここで、拡大表示するファイル種類を選択します。
私は、画像のみにしています。
次に拡大したい画像のリンク先がメディアファイルになっているか確認します。
ここまでの設定が完了したら、画像の拡大表示ができるはずです。
もし、動作しない場合は、以下を確認します。
fa-chevron-circle-right画像のリンク先が「メディアファイル」になっているか
デフォルトの「画像のリンク先」を変更
画像の「リンク先」は、デフォルトでは「なし」になっています。
そのため、画像を挿入するごとに、リンク先を変更する必要があり、非常に手間です。
デフォルト設定を変更しておきましょう。
※ これまでの投稿には反映されません。
http://ドメイン名/wp-admin/options.phpへアクセスします。
大体の場合は、wpになっていると思うため、ドメイン名の部分を「ドメイン名/wp/」とすれば、問題ないと思います。
image_default_link_typeという設定を変更すれば良いのですが、設定項目が非常に多いです。
そのため、「Ctrl + F」を押し、ページ内部で検索をします。
検索ワード「image_default_link_type」
すると、デフォルトが「なし」の場合は、「none」となっているはずです。
これを「file」に変更しましょう。
fa-chevron-circle-rightcustom：カスタムURL
fa-chevron-circle-rightfile：メディアファイル
fa-chevron-circle-rightpost：送付ファイルのページ
マウスを画像に載せたときの動作
マウスカーソルを画像の上に載せた時（ホバーした時）、画像の周りに色をつけるようします。
ここでいう画像は、FancyBoxで設定された画像のことです。
外観 > カスタマイズ > 追加CSS よりCSSを設定します。
.fancybox img:hover{
box-shadow: 0px 0px 5px 3px lightblue;
-moz-box-shadow: 0px 0px 5px 3px lightblue;
-webkit-box-shadow: 0px 0px 5px 3px lightblue;
}
これをすることで、画像にマウスを載せた際に、周りに水色で枠が表示されます。
関連書籍
