Easy FancyBoxの使い方ーWordPressプラグイン【初心者向け】
普通サイトで動きを出そうとすると、JavaScriptを書かなければなりませんが、今回紹介するEasy FancyBoxというプラグインを使えば、難しいことなくサイトに動きが出て見栄えがよくなります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
自分のサイトを運営していてたまにもっと動きが欲しいなと思ったりすることはあるでしょう。
普通サイトで動きを出そうとすると、JavaScriptを書かなければなりませんが、今回紹介するEasy FancyBoxというプラグインを使えば、難しいことなくサイトに動きが出て見栄えがよくなります。
これからその設定方法を説明していきます。
なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。
田島メンター、サイトを見ていると写真とかが浮かび上がって表示されるようなのってありますよね？あれってWordPressだとできないんですか？
そのままだと難しいけど、プラグインを入れるとできるね。
教えてください！！！
Easy FancyBoxとは
WordPressのプラグイン「Easy FancyBox」を使うと、記事内の画像・サムネイルをクリックしたときに拡大ポップアップ表示させることができます。
インストールと設定
まず「プラグイン」→「新規追加」からEasy FancyBoxを検索しインストール・有効化します。
設定画面へはWordPress管理画面の左メニュー「設定」→「メディア」、あるいはプラグイン一覧の画面から行くことができます。
プラグイン一覧から見る場合は左メニューの「プラグイン」→「インストール済みプラグイン」を選択します。
Easy FancyBoxの「設定」をクリックします。
プラグインを有効化していると、「メディア設定」ページ内に「FancyBox」の項目が自動で追加されています。表示の寸法や操作形式などについての設定はここで行います。
画像に反映させる方法
WordPress管理画面の左メニューから「記事」→「新規作成」を選択します。
記事作成画面から「メディアを追加」ボタンをクリックします。
ポップアップ表示させたい画像をメディアライブラリから選択します。
画像のリンク先を必ず「メディアファイル」に設定してから右下の「投稿に挿入」ボタンをクリックします。(ここで設定していないと反映されません)
記事内で公開されている画像です。今回は中サイズで表示しています。
画像をクリックするとポップアップ表示されます。
ギャラリーに反映させる方法
Easy FancyBoxプラグインはWordPressのギャラリー機能にも対応しています。
先ほどと同じように記事作成画面で「メディアを追加」をクリックし、左メニューから「ギャラリーを作成」を選択します。
ギャラリー内に入れる画像を複数選択して右下の「ギャラリーを作成」ボタンをクリックします。
ギャラリーの設定画面が表示されます。
ここでも必ずリンク先を「メディアファイル」にしておきます。サイズなどの設定が完了したら右下の「ギャラリーを挿入」ボタンをクリックします。
記事内にギャラリーが追加されました。
公開された状態のギャラリーはこのようになっています。どれかひとつの画像をクリックしてみます。
先ほどと同じように画像がポップアップされますが、今度はギャラリー内の前後の画像に行き来できる矢印ボタンが自動で追加されています。
画像タイトルや矢印の表示/非表示は設定画面からいつでも変更可能です。
このようにポップアップが表示されれば完了です。
今回の記事は以上です。
ぜひ、WordPressの使い方を覚えましょう！
画像だけじゃなくてPDFなんかも表示できるのってすごいですね！！
そうだね。表示が動的になるから、より印象が強くなるしね。
はい♪
[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
