みなさんこんにちは。
「おっぱいぷるぅんぷるん！」ってツイッターでつぶやくと秒でファボが付きます。
ぜぇれさんです。
今回はワードプレスでLightBoxを簡単に導入できるプラグイン「Easy FancyBox」の導入方法と使い方をご紹介します。
記事には大きな画像を使いたいところですが、最近はスマホからの閲覧がメイン…そうなってくると大きな画像は縮小されてなかなか見えません。
そこでLightBoxを導入して、画像はポップアップ形式にしちゃおうという算段です。
よろしくお願いします。
[amazonjs asin=”B06WWRBSH3″ locale=”JP” title=”LITSTA リティスタ Coin Wallet2 コインホルダー付き小銭入れ 青緑 Blue Green イタリアンレザー(pueblo)”]
「Easy FancyBox」って？
「Easy FancyBox」はワードプレス上にLightBoxを簡単に実装できるプラグインです。
LightBoxというのは画像をクリックすると大きな画像がポップアップする機能を呼びます。
このようにクリック（タップ）すると画像がポップアップする機能です。
ピンチズームにも対応しています。
各種設定項目
まずはプラグインのインストールから。
「Easy FancyBox」を検索してインストールして下さい。
プラグインインストールの手順についてはコチラを参考にしてください。
記事内での実装
インストールが完了した時点で、こだわりが無ければ細かな設定は実は不要です。
早速ですが記事内で実装する手順をご説明します。
記事投稿画面にて、メディアを追加をクリックします。
①続いて挿入したい画像を選択し
②リンク先をメディアファイルに変更します。
上記の手順で画像を挿入すると以下のようなコードが挿入されます。
この状態で記事を公開するだけで、実装完了です。
その他基本的な設定
画像以外にもyoutube動画やpdfなど、様々なメディアをポップアップ表示させることが可能です。
設定項目は多く英語でわかりづらい部分もあるため、僕自身の設定と合わせ基本的な部分を解説します。
Chromeの翻訳機能でも比較的内容を把握できるため、細かくカスタマイズしたい方はチャレンジしてみてください。
まずはプラグインのリストからEasy FancyBoxの設定へ進みましょう。
ポップアップさせたいメディアはしっかりと選んでおきましょう。
Imagesの設定項目で自動検出させる拡張子を設定しておきましょう。
Youtubeなどの動画にチェックを入れていた場合に設定項目が追加されます。
細かなところまで突き詰めると、理解しなければいけないことが多く大変ですが、初期設定のままでの簡単に美しく機能するので個人のサイトなどではあまり気にしなくてもいいと思いますよ。
いかがでしたか？今回以下のような内容でお話させていただきました。
気の利いた最後の一言を模索し続ける。
ぜぇれさんでした。
[amazonjs asin=”B07F3LGLR5″ locale=”JP” title=”Teemzone マネークリップ カードケース メンズ RFID＆磁気スキミング防止 カーボン カードと紙幣収納 薄型 ビジネス プレゼント 三ヶ月保証付き …”]