MENU
Category
プロフィール背景画像
ツヨシ|溝口 剛の画像
ツヨシ|溝口 剛
Tsuyoshi Mizoguchi
当ブログを運営しているツヨシ(33)です。22歳~30歳まで会社員として働く。30歳の時に会社員を辞め、ブロガーとして独立。現在は札幌にてブログを書きながら、妻と息子と仲良く暮らしています。当ブログは「雇われずに好きな事で生きていく」をテーマに転職や個人で稼ぐ方法をメインに配信しています。
>>「無料LINEマガジン」登録はこちら<<

WordPressの画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方

2020 5/28
WordPressの画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方
はじめのアイコン画像はじめ

WordPressに挿入した画像が小さいから拡大させたい!画像をポップアップさせるプラグインが知りたい!

本記事では、上記の悩みにお答えしていきます。

この記事を読めば、WordPressの画像をクリックしたら拡大(ポップアップ)させるプラグインを知ることができますよ。

お洒落なサイトが誰でも作れる!

ブログを書くのが楽になるテーマ「SWELL」

  • 誰でも簡単にオシャレなブログが作れます!
  • WordPressの使いやすさがアップします!
  • キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です!
  • アフィリンクの一元管理機能が標準装備されてます!

\一度使うと他のテーマには戻れません!/

※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです!

この記事を書いてる人

溝口 剛
Tsuyoshi Mizoguchi

   

1986年生まれ 33歳 札幌在住
8年間会社員として働くも会社員としての生き方が嫌になり、フリーランスへ。現在はブログより年間1,000万円の収益を得ています。

この記事の内容

1. WordPressの画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方

WordPressに挿入した画像をクリックした時に拡大させるプラグインは色々とありますが、最もおすすめなのが「Easy FancyBox」です。

インストールしただけで、簡単に使うことができ、画像だけではなく、PDFファイルやYoutubeも拡大(ポップアップ)することができます。

ここでは、「Easy FancyBox」の使い方について解説していきます。

Easy FancyBoxの使い方
  1. 「Easy FancyBox」をインストールする
  2. 記事に拡大させたい画像を挿入する
  3. 画像のリンク先を「メディアファイル」にする
  4. 画像に説明文を入れる時は「代替えテキスト」に入力

1-1. 「Easy FancyBox」をインストールする

まずはプラグイン「Easy FancyBox」をインストールしましょう。

WordPressの管理画面から「プラグイン→新規追加」を選択し、「Easy FancyBox」と検索。

「Easy FancyBox」をインストールして、有効化させます。

「Easy FancyBox」は、設定が一切要らないプラグインなので、下準備はこれでOKです。

1-2. 記事に拡大させたい画像を挿入する

次に実際に拡大させたい画像の設定についてです。

まずは、WordPressの記事に画像を挿入します。

1-3. 画像のリンク先を「メディアファイル」にする

次に、画像の「編集」を選択します。

「画像詳細」という画面が表示されるので、その中の「リンク先」を「メディアファイル」に指定します。

1-4. 拡大した画像に説明文を入れる時は「代替えテキスト」に入力

さらに、拡大した画像に説明文を入れたい時は、「代替えテキスト」に説明文を入力しましょう。

すると、以下のように画像をクリックすると拡大(ポップアップ)され、説明文が表示されるようになります。

「Easy FancyBox」画像を拡大するサンプル

といった感じで、「Easy FancyBox」を使えば、初心者でも簡単に写真や画像を拡大させる事ができますのでおすすめです。

2. 「Easy FancyBox」以外の画像を拡大させる4つのプラグイン

ちなみに、「Easy FancyBox」以外にも画像を拡大させるプラグインはあります。

個人的には「Easy FancyBox」が最もおすすめなプラグインですが、もし他のプラグインも試してみたいと考えている方は、参考にしてみてください。

画像を拡大させるプラグイン
  • FancyBox for WordPress
  • WP jQuery Lightbox
  • WP Lightbox 2
  • WP SexyLightBox

3. WordPressで画像を拡大(ポップアップ)させる時の画像サイズ

次に、WordPressで画像を拡大(ポップアップ)させる時の画像サイズの注意点について解説します。注意点は以下の3つです。

拡大させる時の画像サイズの注意点
  1. 記事内の画像表示最大幅よりも大きいサイズにする。
  2. 拡大する画像のサイズは1200px~1500pxがおすすめ!
  3. 「リサイズ→圧縮処理」を行うことを忘れない。

3-1. 記事内の画像表示最大幅よりも大きいサイズにする。

まず、拡大させる画像のサイズは、記事内の画像表示最大幅よりも大きいサイズにしましょう。

私が使っているスワローの場合、記事内の画像表示最大幅は「800px」です。

つまり、それよりも大きいサイズの画像をアップロードしないと、単にポップアップされるだけで、画像が拡大されるという見た目にはなりません。

なので、あなたが使っているWordPressのテンプレートの画像表示最大幅を調べて、それよりも大きい画像サイズでアップロードしましょう。

WordPressテンプレートの画像表示最大幅がわからない方は以下の記事を参考にしてみてください。

3-2. 拡大する画像のサイズは1200px~1500pxがおすすめ!

先ほどお話した通り、拡大する画像は記事内の表示最大幅より大きいサイズの画像を使うことがおすすめですが、

あまりにも大きすぎる画像をアップロードしてしまった場合、ページの表示速度が重くなってしまいます。

そのため、拡大する画像のサイズは1200~1500pxに設定しておけば問題ないです。

3-3. 「リサイズ→圧縮処理」を行うことを忘れない。

特に拡大する画像は、サイズが「1200px~1500px」と大きくなるため、そのままブログにアップしてしまうと、

容量がとても重くなります。

そのため、アップロードする前には「リサイズ→圧縮処理」を行うことを徹底しましょう。

「リサイズ→圧縮処理」の方法がわからない方は以下の記事で解説していますので、参考にしてみてください。

まとめ

今回は、WordPressの画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方について解説してきました。

Easy FancyBoxの使い方
  1. 「Easy FancyBox」をインストールする
  2. 記事に拡大させたい画像を挿入する
  3. 画像のリンク先を「メディアファイル」にする
  4. 画像に説明文を入れる時は「代替えテキスト」に入力

「Easy FancyBox」を使えば、画像・PDF・Youtubeを拡大(ポップアップ)が簡単に可能になるので、ブログの利便性を高めたい方にはおすすめです。

特に、私のブログのように解説系のコンテンツでは、非常に重宝するプラグインとなっていますよ。

「Easy FancyBox」を使って、見た目もオシャレにまたユーザービリティの高いブログを構築しましょう。

【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。

当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。

しかし、有料コンテンツで提供している情報は「楽して稼ぐ!」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。

また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。

月7桁をを達成したサイト設計方法です!

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。

  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 案件を選ぶ際の7つのポイントが学べます。
  • 購入されやすい商品の特徴。
  • 案件選びで重要な見るべきポイント。
  • 案件を取り組む際に確認すべき事項。

\アフィリ案件を選ぶ秘訣が学べます!/

この記事が気に入ったら
フォローしてね!

この記事の内容
閉じる