こんにちは "osaboo"です。"@osaboo_Bot"
AFFINGER6で画像をポップアップする方法をご紹介します。
WordPressプラグイン Easy FancyBoxの「導入・設定・使い方」のご紹介です。
CSS等、難しいことは一切不要で!プラグインの設定だけ注意すれば「OK」だよ。
初心者さんには特に「Easy FancyBox」がおすすめ!^^/
![osaboo](https://osaboo.info/wp-content/uploads/2021/07/cropped-osaboo-logo-0-100x100.jpeg)
この記事の画像は、WordPressプラグイン「Easy FancyBox」の機能で 拡大表示(ポップアップ)します。
\ 画像をクリックして頂くとイメージがしやすくなります。^^/
![Wordpress-01-nega](https://osaboo.info/wp-content/uploads/2023/07/Wordpress-01-nega-1024x538.png)
![WordPress:グレーロゴ](https://osaboo.info/wp-content/uploads/2023/04/21058-18-1024x538.jpeg)
![Wordpress-01](https://osaboo.info/wp-content/uploads/2023/03/Wordpress-01-1024x538.png)
それではご覧ください!
\初心者でも安心! コスパ最強の洗練されたWordPressテーマ/
\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//
- 少しづつ増え続ける当サイトオリジナル特典付!-
WordPress標準での画像拡大表示方法
![Wordpress-01](https://osaboo.info/wp-content/uploads/2023/03/Wordpress-01-1024x538.png)
この章では、WordPress標準での画像拡大表示方法をご紹介します。
プラグインを使わずに WordPressのメディア設定で 簡単に画像の拡大(ポップアップ)は可能です。但し、選択した画像が別画面で表示されるため使い勝手はいまいち?!よくないかと…手順はとても簡単です。
※ 作業は投稿(記事編集)画面での作業になります。
STEP1ブロック挿入ツールを切り替えます。
『+』をクリックします。
![投稿画面:ブロック挿入ツールを切り替え](https://osaboo.info/wp-content/uploads/2023/05/22103-1.jpeg)
STEP2ブロックタブメニューから『画像』を選択
ブロック挿入ツールが『x』切り替わり 以下の画面が表示されます。
メディアから『画像』を選択して投稿画面に挿入します。
『画像』をクリックします。
![ブロック挿入ツール:ブロックタブ|メディア|画像](https://osaboo.info/wp-content/uploads/2023/10/27223-1.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
「メディアの選択またはアップロード」の画面が表示されます。
挿入する『画像ファイル』を選んで『選択』をクリックします。
❶ ❷ を処理します。
![メディアの選択またはアップロード||メディアライブラリ](https://osaboo.info/wp-content/uploads/2023/10/27223-7a.webp)
※ 選択した画像が投稿(記事編集)画面に挿入されました。
STEP3画像にリンクを挿入
投稿(記事編集)画面に挿入された画像を選択して ツールバーの『リンクを編集』アイコンをクリックします。
![メディア|画像とツールバー|初期状態](https://osaboo.info/wp-content/uploads/2023/10/27223-2.webp)
画像にリンクを挿入する手順(詳細)
『リンクを挿入』アイコンをクリックします。
![メディア|画像|ツールバー|操作1](https://osaboo.info/wp-content/uploads/2023/10/27223-3.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
ドロップダウンメニューから『メディアファイル』をクリックします。
![メディア|画像|ツールバー|操作2](https://osaboo.info/wp-content/uploads/2023/10/27223-4.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
「メディアファイル」が表示されていれば OK です。
![メディア|画像|ツールバー|操作3](https://osaboo.info/wp-content/uploads/2023/10/27223-5.webp)
記事に添付されている画像に「メディアファイル」をリンクすることで、画像の単独表示が可能になります。
STEP4プレビューで画像を確認
以下のように画像のみが表示された 新しいブラウザに切り替わります。
![メディアファイル|画像拡大表示サンプルプレビュー](https://osaboo.info/wp-content/uploads/2023/10/27223-6.webp)
WordPress標準での画像拡大表示方法は、以上です。
Easy FancyBoxとは?
![Easy FancyBoxとは?](https://osaboo.info/wp-content/uploads/2023/10/27223-101-1024x538.webp)
Easy FancyBoxとは、ウェブサイト上の画像、ビデオ、PDFなどのメディアコンテンツを美しいポップアップウィンドウで表示できるWordPressプラグインです。
Easy FancyBoxの導入方法
![Easy FancyBoxの導入方法](https://osaboo.info/wp-content/uploads/2023/10/27223-102-1024x538.webp)
この章では、Easy FancyBoxの導入方法をご紹介します。
![WordPress管理-ダッシュボード-プラグイン-新期追加](https://osaboo.info/wp-content/uploads/2022/12/18746-2.jpeg)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
プラグインを追加の画面が表示されます。
❶ ❷ を処理します。
![プラグインを追加:Easy FancyBox](https://osaboo.info/wp-content/uploads/2023/10/27223-8.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
インストールが完了すると以下の画面に表示が切り替わります。
『有効化』をクリックします。
![プラグインを追加:Easy FancyBox|有効化](https://osaboo.info/wp-content/uploads/2023/10/27223-9.webp)
有効化が完了すると以下のようにインストール済みプラグインの欄に「Easy FancyBox」が追加されます。
![Easy FancyBox|有効化状態](https://osaboo.info/wp-content/uploads/2023/10/27223-10.webp)
以上でインストールの完了です。
Easy FancyBoxの設定方法
![Easy FancyBoxの設定方法](https://osaboo.info/wp-content/uploads/2023/10/27223-103-1024x538.webp)
この章では、Easy FancyBoxの設定方法をご紹介します。
設定の肝となる箇所を抜粋してご紹介します。
設定場所は…
![WordPress管理:ダッシュボード|設定|メディア](https://osaboo.info/wp-content/uploads/2023/10/27223-11.webp)
「メディア設定」の画面が表示されます。
「FancyBox」の詳細設定は、下側にスクロールすると出てきます。
下側にスクロールします。
![WordPress管理:ダッシュボード|設定|メディア|top](https://osaboo.info/wp-content/uploads/2023/10/27223-12a.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
Easy FancyBoxの設定は、ここからです。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|top](https://osaboo.info/wp-content/uploads/2023/10/27223-12-0.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
Version
SWF や Internet Explorer バージョン 8 以前の下位サポートを維持したい場合は、レガシー を選択してください。
デフォルトのままで OK です。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|Version](https://osaboo.info/wp-content/uploads/2023/10/27223-12-1.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
メディア
デフォルトのままでも問題ないですが…動画を使う予定がある場合は、以下のようにチェックを入れます。
『YouTube / Vimeo』にチェックを入れます。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|メディア](https://osaboo.info/wp-content/uploads/2023/10/27223-12-2.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
オーバーレイ
極端な変更は避けた方が良いかと…見にくくなります。
デフォルトのままで OK です。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|オーバーレイ](https://osaboo.info/wp-content/uploads/2023/10/27223-12-3.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
ウインドウ
表示の外観なのでお好みで調整してみましょう。
デフォルトのままで OK です。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|ウインドウ](https://osaboo.info/wp-content/uploads/2023/10/27223-12-4.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
その他
ポップアップのスピードにこだわるのであれば調整しましょう。
デフォルトのままで OK です。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|その他](https://osaboo.info/wp-content/uploads/2023/10/27223-12-5.webp)
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
画像
画像の拡張子で使っていないものがあると認識されないので注意が必要です。
.jpg,.png,.webp,.gif,.jpeg を入れておけば ほぼ問題ないと思います。読み込む画像の拡張子は全て書き込んでおきましょう。
動作
表示イメージを変えるにはここの設定を変更してみましょう。「いい感じがつかめます」
自動検出:使用している画像拡張子は全て入れます。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|画像](https://osaboo.info/wp-content/uploads/2023/10/27223-12-6.webp)
※ すべての設定が終了したら『変更を保存』をクリックして完了です。
![yajirusi-sita-80x40](https://osaboo.info/wp-content/uploads/2023/10/yajirusi-sita-80x40-1.webp)
YouTube / Vimeo
『YouTube / Vimeo』にチェックを入れた場合に表示される項目です。
デフォルトのままで OK です。
![WordPress管理:ダッシュボード|設定|メディア|Fancy Box|YouTube / Vimeo](https://osaboo.info/wp-content/uploads/2023/10/27223-12-7.webp)
Easy FancyBoxの使い方
![Easy FancyBoxの使い方](https://osaboo.info/wp-content/uploads/2023/10/27223-104-1024x538.webp)
この章では、Easy FancyBoxの使い方をご紹介します。
Easy FancyBoxの使い方は、超簡単です。^^/
WordPress標準での画像拡大表示方法でご紹介した、画像にリンクを挿入する手順(詳細)と同じです。
画像に『メディアファイル』のリンクを設定するだけです。
まとめ!AFFINGER6で画像をポップアップ!Easy FancyBoxの導入・設定・使い方「画像の拡大表示をオシャレに」
WordPressプラグイン「Easy FancyBox」の「導入・設定・使い方」をご紹介しました。AFFINGER6の標準拡張機能ではできない画像の拡大表示(ポップアップ)を可能にする方法をご紹介しました。
画像の拡大表示をオシャレに!^^ 表現したい方は 是非、トライしてくださいね。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/