Overlayここでは画像周りの設定を行います。FancyBox.画像周りの透明化するかどうかを設定します。clicked.表示した画像を閉じるためのボタンを作るかの設定です。FancyBox.」で画像周りを透明化させた場合の透明度を設定します。設定値は「0」から「1」までの少数単位で入力します。デフォルトは「0.7」です。Color画像周りを何色で透明化させるかの設定です。色コードは3ケタのコードで入力します。デフォルトは「#777」です。Windowsここでは表示する画像の枠線の色やタイトル文字の色、画像の幅などを設定します。button画像の右上に表示されるキャンセルボタンを表示するかどうかの設定です。チェックを入れるようにしましょう。color[]画像の枠線の色とタイトル文字の色を設定します。色コードは3ケタのコードで入力します。color」には「#FF0(赤)」を設定しています。上記画像でいう赤枠の幅を設定します。設定値には「0」から「100」の値を入力します。枠線が不要であれば「0」を入力します。Margin画像とWindows間の幅を設定しています。設定値には「20」から「80」の値を入力します。デフォルトの設定値は「10」です。scrollingスクロール時の自動追尾機能を有効にするかの設定です。FancyBox「ESC」キーで拡大した画像を閉じるかの設定です。viewport表示する画像が画面内に収めるかの設定です。理由がない限りチェックは入れるようにします。Miscellaneousここでは画像の読み込みに関する設定をします。基本的には全てデフォルトのままにします。loadページを開いたときにページを読み込むかの設定です。milliseconds遅延時間を設定します。初期値は1000ミリ秒(1秒)です。visit?ポップアップを最初に表示するかの設定です。「いいえ」しか選択できません。rulesIE8との互換性ルールを持たせるかの設定です。必要な場合にのみチェックを入れます。OtherメタデータのJQuery拡張スクリプトを含めるかの設定です。設定することはできません。Imageここでは画像に関する設定を行います。Autodetect画像を拡大表示させたいファイル(.jpg等)を入力します。初期値は「.jpg」「.jpeg」「.png」「.webp」です。これ以外の画像を使う場合には半角スペースを入れてから続けて入力します。toリンクを設けるための申請(設定)です。links」以外に選択はできません。images?画像のクラスに「fancybox」を設定した場合、強制的にFancyBoxの機能を有効にさせるかの設定です。随時設定するべきなので「いいえ」を選択します。Outトランジション効果とイージング効果を設定するかの設定です。FancyBoxプラグインは、単一の画像を拡大するだけではなく、スライドショーのように画像を連結させることができます。トランジション効果とイージング効果は、その切り替え時の変化や緩急などを指します。FancyBoxにおける画像切り替えの設定は本記事の最後で解説しています。transition.画像切り替え時の透明度を設定します。画像切り替えの設定が必要な場合にチェックを入れます。clicked拡大した「画像」をクリックした時、画像を閉じるかの設定です。拡大した画像を間違えて閉じる可能性があるため、基本的にチェックは外します。title画像のタイトルを表示するかの設定です。画像だけを見せたい場合はチェックを外します。Positionタイトル文字の位置を設定します。tag」にチェックを入れます。Advancedタイトル文字を隠すかの設定です。action」以外に選択でできません。Autogalleryページ内の画像間の切り替えに関する設定です。only」は、画像を単一で拡大させます。gallery」は、画像の切り替えを有効化させます。gallery」を選択します。arrows画像間の切り替えにおける矢印を表示するかの設定です。gallery矢印を押したとき、画像を閲覧できるかの設定です。jQueryの拡張スクリプトを有効にするかの設定です。next/back.画像の切り替えを永遠にループさせるかの設定です。画像A、B、Cを連続させた場合、この機能を無効にすると「A←→B←→C」という動きになります。有効にさせた場合、「C←→A←→B←→C←→A」というように端まで動いた後、反対の画像に推移するようになります。speed画像切り替え時の速度とフェードの速度を設定します。共に「0」から「6000」までの値を入力します。単位はミリ秒(1000ミリ秒=1秒)で、デフォルトは「300」です。Advanced画像間の切り替え形式の設定です。「Slideshow(スライドショー)」以外に選択できません。PDF拡大表示するPDFのサイズや枠線、タイトルの設定などを行います。AutodetectPDFであるか自動検出するための設定です。PDFを使用する場合にチェックを入れます。WithPDFの埋め込みを何タグで行うかの設定です。tag」に設定します。拡大する画像のサイズと枠線を設定します。入力する数字には必ず「%」を付けてください。入力しない場合、単位がピクセルになってしまいます。枠線の幅指は次の通りです。titlePDFのタイトルを表示するかの設定です。PDFだけを見せたい場合はチェックを外します。Positionタイトル文字の位置を設定します。tag」にチェックを入れます。Youtube拡大表示するYoutube動画のサイズや枠線、タイトルの設定などを行います。□AutodetectYoutubeであるか自動検出するための設定です。Youtubeを使用する場合にチェックを入れます。拡大するPDFファイルの幅と高さ、枠線を設定します。入力の仕方はPDFと同じです。幅と高さには必ず「%」を入れるようにしましょう。titleYoutubeのタイトルを表示するかの設定です。Youtubeだけを見せたい場合はチェックを外します。Positionタイトル文字の位置を設定します。tag」にチェックを入れます。最後に、拡大表示させた画像をスライドショー形式にする方法を解説します。next/back.」のチェック項目にチェックを入れます。このチェックを入れるだけで同一ページ内にある画像は全て連結され、スライドショーのように連続で表示することができます。個別に設定することはできず、全てのページにおいて画像が連結されるため注意してください。Slider」などのプラグインを併用するようにしましょう。FancyBoxの設定方法について解説しました。分からないことがあればWordPressのサポートフォーラムで質問してみましょう。当サイトでも質問を受け付けておりますのでお問い合わせください。画像系この記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。Calendar』の使い方と設定方法RECOMMENDこちらの記事も人気です。Avatars』の使い方と設定方法プロフィールブログ運営者:Meredy当ブログを運営しているMeredy(メルディ)と言います。WordPressで使える無料のプラグインの解説をしています。解説記事は徐々に増やしていきますのでよろしくお願いします。