プラグイン WordPress

【WordPress】プラグイン『Easy FancyBox』で画像をポップアップと拡大させる方法

※ 当サイトではアフィリエイト広告を利用しています

ブログに入れた画像をクリックしたらポップアップで拡大させたいけど出来る?

ブログには画像を入れることが多いと思いますが、中にはグラフなど文字が小さい画像などはクリックして拡大させて見せたい時もあるかと思います。

そんな時は『Easy FancyBox』というプラグインを使えば簡単に実装出来ます。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

プラグイン『Easy FancyBox』で画像をポップアップと拡大させる方法

まずはプラグインをインストールして有効化します。

管理画面の『プラグイン新規追加 』から『Easy FancyBox』と検索して見つかったら『今すぐインストール』をクリックしてそのまま『有効化』をクリックします。

プラグイン『Easy FancyBox』インストール

プラグイン『Easy FancyBox』インストール

 

記事に画像を入れる

次に記事の中に拡大させたい画像を入れましょう。

ここからはブロックエディタで解説しますが、クラシックエディタでも基本的には同じです。

まずは投稿の編集画面の+をクリックします。

ブロックエディタ投稿画面:+をクリック

ブロックエディタ投稿画面:+をクリック

次は画像をクリックします。

ブロックエディタ投稿画面:画像をクリック

ブロックエディタ投稿画面:画像をクリック

そして既にアップロードされている画像を使うときは『メディアライブラリ』をクリック、新しくアップロードする時は『アップロード』をクリックして画像を選択します。

ブロックエディタ投稿画面:画像をアップロード

ブロックエディタ投稿画面:画像をアップロード

そして画像が入れられました。

ブロックエディタ投稿画面:画像を挿入

ブロックエディタ投稿画面:画像を挿入

ここまでは投稿に画像入れる通常の作業ですが、ここからポップアップで拡大させる為の作業をします。

 

画像のリンクをメディアファイルにする

まずは画像をクリックします。すると編集メニューが表示されます。

ブロックエディタ投稿画面:リンクアイコンをクリック

ブロックエディタ投稿画面:リンクアイコンをクリック

上の赤枠をクリックとこちらが表示されるので、メディアファイルを選択します。

ブロックエディタ投稿画面:メディアファイルをクリック

ブロックエディタ投稿画面:メディアファイルをクリック

これで完了です。それでは投稿で確認してみましょう。

公開前にプレビューで確認したい場合は右上にあるプレビュー → 新しいタブでプレビューをクリックします。

ブロックエディタ投稿画面:新しいタブでプレビュー

ブロックエディタ投稿画面:新しいタブでプレビュー

そしてこちらがプレビュー画面です。

プレビュー画面

プレビュー画面

この画像をクリックするとこのようにポップアップで拡大されます。

プレビュー画面:画像クリックで拡大

プレビュー画面:画像クリックで拡大

閉じるときは右上の×ボタンか、周りのグレー部分をクリックすれば元に戻ります。

 

Altテキスト(代替テキスト)を書く

Altテキストを書くと、ポップアップした時に画像の下に文字が表示されます。

編集画面で画像が選択された状態で右上の歯車(設定)をクリックし、画像設定のAltテキストに表示させたいテキストを書きます。

ブロックエディタ投稿画面:Altテキスト

ブロックエディタ投稿画面:Altテキスト

そして画像をポップアップさせるとこのように下にテキストが表示されます。

プレビュー画面:Altテキスト表示

プレビュー画面:Altテキスト表示

 

画像サイズは元のサイズ以上にはならない

1つ注意点があります。

画像はクリックするとポップアップで拡大されますが、サイズは元のサイズ以上にはなりません。

例えばアップロードした画像の元サイズが幅300pxの場合、ポップアップはされますが300px以上にはなりません。

プレビュー画面:元サイズ以上にはならない

プレビュー画面:元サイズ以上にはならない

なので画像が記事の幅より小さい場合はポップアップされるだけで拡大されないので、記事の幅を超えて拡大させたい場合は記事の幅より大きいサイズの画像を使いましょう。

かといって一眼レフなどで撮影した画像をそのままアップロードすると非常にサイズが大きくなってしまうので、必ずリサイズしましょう(1500px以下くらいが目安)

また、リサイズした後に圧縮も忘れないようにしましょう。

  1. 画像をリサイズ(サイズを小さくする)
  2. 画像を圧縮(容量を小さくする)

どちらもしないとどんどんサイトの容量を圧迫して重くなるので、必ずやるようにしましょう。

画像の圧縮については以下の記事を参照下さい。

あわせて読みたい
【WordPress】画像圧縮プラグイン『TinyPNG JPEG, PNG & WebP image compression』の使い方
【WordPress】画像圧縮プラグイン『TinyPNG JPEG, PNG & WebP image compression』の使い方

続きを見る

あわせて読みたい
無料でも使える画像圧縮サイト『TinyPNG』有料版の登録方法と使い方
無料でも使える画像圧縮サイト『TinyPNG』有料版の登録方法と使い方

続きを見る

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-プラグイン, WordPress