Easy FancyBoxの使い方ーWordPressプラグイン【初心者向け】

普通サイトで動きを出そうとすると、JavaScriptを書かなければなりませんが、今回紹介するEasy FancyBoxというプラグインを使えば、難しいことなくサイトに動きが出て見栄えがよくなります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

自分のサイトを運営していてたまにもっと動きが欲しいなと思ったりすることはあるでしょう。

普通サイトで動きを出そうとすると、JavaScriptを書かなければなりませんが、今回紹介するEasy FancyBoxというプラグインを使えば、難しいことなくサイトに動きが出て見栄えがよくなります。

これからその設定方法を説明していきます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター、サイトを見ていると写真とかが浮かび上がって表示されるようなのってありますよね?あれってWordPressだとできないんですか?

田島悠介

そのままだと難しいけど、プラグインを入れるとできるね。

大石ゆかり

教えてください!!!

 

Easy FancyBoxとは

WordPressのプラグイン「Easy FancyBox」を使うと、記事内の画像・サムネイルをクリックしたときに拡大ポップアップ表示させることができます。

 

インストールと設定

まず「プラグイン」「新規追加」からEasy FancyBoxを検索しインストール・有効化します。
設定画面へはWordPress管理画面の左メニュー「設定」「メディア」、あるいはプラグイン一覧の画面から行くことができます。
プラグイン一覧から見る場合は左メニューの「プラグイン」「インストール済みプラグイン」を選択します。

efb_p_1

Easy FancyBoxの「設定」をクリックします。

efb_p_2

プラグインを有効化していると、「メディア設定」ページ内に「FancyBox」の項目が自動で追加されています。表示の寸法や操作形式などについての設定はここで行います。

efb_p_3

 

[PR] WordPressで挫折しない学習方法を動画で公開中

画像に反映させる方法

WordPress管理画面の左メニューから「記事」「新規作成」を選択します。
記事作成画面から「メディアを追加」ボタンをクリックします。

efb_p_4

ポップアップ表示させたい画像をメディアライブラリから選択します。

efb_p_5

画像のリンク先を必ず「メディアファイル」に設定してから右下の「投稿に挿入」ボタンをクリックします。(ここで設定していないと反映されません)

efb_p_6

記事内で公開されている画像です。今回は中サイズで表示しています。

efb_p_7

画像をクリックするとポップアップ表示されます。

efb_p_8

 

ギャラリーに反映させる方法

Easy FancyBoxプラグインはWordPressのギャラリー機能にも対応しています。

先ほどと同じように記事作成画面で「メディアを追加」をクリックし、左メニューから「ギャラリーを作成」を選択します。
ギャラリー内に入れる画像を複数選択して右下の「ギャラリーを作成」ボタンをクリックします。

efb_p_9

ギャラリーの設定画面が表示されます。
ここでも必ずリンク先を「メディアファイル」にしておきます。サイズなどの設定が完了したら右下の「ギャラリーを挿入」ボタンをクリックします。

efb_p_12

記事内にギャラリーが追加されました。

efb_p_13

公開された状態のギャラリーはこのようになっています。どれかひとつの画像をクリックしてみます。

efb_p_14

先ほどと同じように画像がポップアップされますが、今度はギャラリー内の前後の画像に行き来できる矢印ボタンが自動で追加されています。
画像タイトルや矢印の表示/非表示は設定画面からいつでも変更可能です。

efb_p_15

 

このようにポップアップが表示されれば完了です。

今回の記事は以上です。

ぜひ、WordPressの使い方を覚えましょう!
 

大石ゆかり

画像だけじゃなくてPDFなんかも表示できるのってすごいですね!!

田島悠介

そうだね。表示が動的になるから、より印象が強くなるしね。

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。