- 細かな表・図を使う（画像を拡大させたい）
- WordPressでの記事で、もう少し動きを持たせたい
- 難しい設定はやりたくない・できない人
ブログ運営において、「表」「図」を使用するタイミングは数多くあります。
その際に「小さすぎる字」や「細かな表」があれば、記事を見てくれて人からすれば見にくくストレスを与える原因になります。
確かに文字が小さいと見る気なくなるもんね。。。
そんな時に便利なアクションが以下の動画のような『画像の拡大機能』です。
今回は、上記のように画像を拡大する方法をご紹介いたします。
誰でも簡単にできるので、是非実装してみてください！
では、どうぞ！！
目 次
画像を拡大させる方法
結論から言うと『Easy FancyBox』というプラグインを導入するだけです。
設定も多少変更した方が良いですが、デフォルト設定のままでも十分使用できます。
詳しい設定方法も画像付きで説明していますので、簡単に行えると思います。
では、次項より『Easy FancyBox』のインストール方法と設定方法をご説明します。
※本記事で使用している画像は、クリックすると全て拡大するようにしています。
「Easy FancyBox」のインストールと設定方法
『Easy FancyBox』のインストールと設定方法についてご説明します。
インストールは通常のプラグインと同様ですが一応紹介します。
インストール方法
インストール方法は以下の３ステップです。
- 「Wordpress」⇒「プラグイン」⇒「新規追加」をクリック
- 「キーワード入力」⇒「今すぐインストール」をクリック
- 「有効化」をクリック
以下にスクショを載せていますので、順番に対応してみてください。
これでインストールは完了です。
既に機能のほとんどを使用可能なのですが、次に細かな設定を紹介します。
設定方法
設定方法についてご紹介します。
まずは、先ほどインストールした「Easy FancyBox」の設定画面まで以下の要領で移動します。
すると細設定画面に移動すると思います。
設定する内容は以下の7項目です。
- 画面サイズ・ファイルアップデート
- メディア
- オーバーレイ
- ウィンドウ
- その他
- 画像
- YouTube・Vimeo
1つ１つ順を追って説明していきます。
画面サイズ・ファイルアップデート
こちらはデフォルト設定で問題ありません。
お好みでサイズを変更したい場合は数値を調整ください。
メディア
一番上の「画像」にチェックを入れておくと通常の画像であれば拡大表示をすることができます。
これはデフォルトでチェックが入っています。
追加で「Youtube」「Vimeo」にてチェックを入れておくことで、Youtubeも拡大して表示することができます。
具体的には以下のような動画が設定が可能です。
＼ 画像をクリックで動画が流れます ／
設定方法は簡単で以下のコードを記事内の「カスタムHTML」に貼るだけです。
<a href="https://www.youtube.com/watch?v=lGgEeAPl_bk">
<img src="https://www.ririmann.online/wp-content/uploads/2021/06/a9d428b0a80cc87000f374c6812215b5.png" />
</a>1行目の『<a href=”https://www.youtube.com/watch?v=lGgEeAPl_bk“>』赤文字部にYoutubeのURLを貼ることで再生される動画を変更することができます。
また、２行目の『<img src=”https://www.ririmann.online/wp-content/uploads/2021/06/a9d428b0a80cc87000f374c6812215b5.png” />』赤文字部の画像URLを変更することで画像が変わります。
この方法ならクリックしたタイミングでYouTubeと接続するので、記事全体の容量の低減（軽くなる）にも繋がるよ！！
オーバーレイ
オーバーレイ(画像をふわっと浮かせている時）の外枠の背景に対してどうするかが設定できます。
オーバーレイを有効化するか、オーバーレイをクリックされた時に画像を閉じるか、透明度、色の設定ができます。
特に変更する必要はないので、デフォルト設定で問題ありません。
ウィンドウ
オーバーレイ時の画像の周りの表示設定をすることができます。
「×ボタンを表示するか」「枠線をつけるか」「余白を取るか」「画像の大きさなど」の設定ができます。
こちらも特に変更する必要はないので、デフォルト設定で問題ありません。
その他
上記の画像赤枠部『Wordpressの標準のjQureryライブラリを含めない（jQureryの他のソースを含めている場合のみこれを使う）』は不具合が出ない限りできるだけチェックを入れることをおすすめします。
重複読み込みを避けてくれるためページ表示速度対策にもなります。
画像
３つの赤枠部について、説明します。
まず、①についてです。
これは検出される画像の形式を設定できます。
デフォルト状態に『.gif』の拡張子を追記することで、GIFアニメーションもクリックして拡大できるように設定できます。
本記事の冒頭に記載しているGIFアニメーションもクリックで拡大が可能です↓
そして、②についてです。
こちらは、同セクション内の『Appearance』では、画像拡大時のキャプション表示内容を変更できるというものです。
「場所の変更」「altに記述されている内容をキャプションとする」などの設定が可能。
筆者はチェックを外し、全て非表示にしています。
最後に、③についてです。
こちらは、２つともチェックを入れることで「画像移動矢印の表示」「カーソルキーでの移動」が可能になります。
以下のような『ギャラリー』を作成した際に有効になる設定です。
画像をクリックし、マウスを右端（左端）に近づけると以下のように次画像へ移動できる矢印が表示され、複数枚の画像があるということを表現することができます。
また、キーボードのカーソルキー「←」「→」でも画像の移動が可能になります。
ギャラリーってなんかおしゃれに見えるよね！
積極的に使っていきたい機能だ！！(笑)
YouTube・Vimeo
最後に「YouTube・Vimeo」についてです。
先に説明した『メディア』にて「YouTube・Vimeo」をチェックをいれた際は、この項目にてサイズの調整が可能です。
筆者はYoutubeのサイズを変更していますので、ご参考に。
「Easy FancyBox」の基本的な使い方
基本的な使い方は簡単で、拡大させたい画像を選択し、リンク先を「メディアファイル」に変更するだけです。
「クラシックエディタ」と「ブロックエディタ」で微妙に違うのでそれぞれ説明していきます。
また、「ギャラリー」の設定に関しても同様の方法で設定が可能となります。
クラシックエディタの場合
画像を選択する際に、サイドバーに以下の画像のようなリンク先を設定する箇所があります。
その部分を「メディアファイル」に変更すれば完了です。
既に挿入済みの画像もリンク先を変更することで拡大表示をさせることが可能です。
ブロックエディタの場合
続いてブロックエディタの場合です。
こちらも以下の画像の通り、画像をクリックするとメニューバーが表示されると思います。
その中央部に位置するアイコンをクリックし「メディアファイル」をクリックすると設定完了です。
凄い簡単だね！？！？
そうなんよ、、、
もっと早く導入しておけば良かった。
まとめ：「Easy FancyBox」導入で画像を拡大
『画像の拡大方法について』まとめます。
画像を拡大するには？
- 『Easy FancyBox』というプラグインを導入
インストール方法
- 「Wordpress」⇒「プラグイン」⇒「新規追加」をクリック
- 「キーワード入力」⇒「今すぐインストール」をクリック
- 「有効化」をクリック
設定項目は7つ
- 画面サイズ・ファイルアップデート
- メディア
- オーバーレイ
- ウィンドウ
- その他
- 画像
- YouTube・Vimeo
基本的な使い方
- クラシックエディタの場合
- ブロックエディタの場合
いかがだったでしょうか。
スマホで見てくれてる方にとっては効果が薄い、画像の拡大機能ですが、パソコンで見てくれる方に対してはに親切な機能だと思います。
簡単に設定できるので、気になる方は導入をおすすめします。
今回みたいなブログに関連する知識を「ブログのノウハウ公開」という記事でまとめてますので、お時間がある方は是非見てみてください。
読者にとってできるだけ見やすい記事を作れるかが重要なポイントです。
これからも日々努力し、一緒に工夫していきましょう！！
では、また！！
