プラグイン WordPress

【WordPress】画像をポップアップで拡大出来るプラグイン「Easy FancyBox」の使い方

【WordPress】画像をポップアップで拡大出来るプラグイン「Easy FancyBox」の使い方
ブログに入れた画像をクリックしたらポップアップで拡大させたいけど出来る?

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

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

効率よくWordPress制作したい人はこちら

画像をポップアップで拡大出来るプラグイン「Easy FancyBox」の使い方

 

プラグインをインストール

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

プラグインのインストールが初めての方は以下の記事を参照下さい。

WordPress】プラグインのインストール方法

 

記事に画像を入れる

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

代替テキストを書く

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

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

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

 

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

1つ注意点があります。

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

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

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

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

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

リサイズで画像を適切なサイズにした後、圧縮でさらに容量を小さくします。

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

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

WordPress】画像圧縮プラグイン TinyPNG JPEG, PNG & WebP image compressionの使い方

無料でも使える画像圧縮サイト TinyPNGの有料版の登録方法

以上になります。

 


WordPress案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-プラグイン, WordPress
-