MVPlayer420

ワードプレスのカスタマイズ方法を中心にガジェットや日常の話をしてます。ブログ運営の話もしてますよ

WordPress

EasyFancyBox 設定方法と使い方

投稿日:

今回は筆者のおすすめプラグインでも紹介した、EasyFancyBoxの設定と使い方です。

デフォルトでも使えますし、簡単な設定で誰でも画像やサムネイルをクリックした時に拡大ポップアップとして表示してくれるプラグインです。

このプラグインは筆者も使ってるプラグインですので、もしよかったら試してみてください。
最初にプラグインのインストールトと有効化をしてください。

インストール方法などがわからない方はこちらを参照にしてください。
(WordPressのプラグインのインストールト有効化について説明しています。)

では、早速始めて行きましょう。

スポンサーリンク

 

 

EasyFancyBox 設定

プラグインの有効化が終われば、ダッシュボードから設定>メディアの順番でクリックします。

下図の様にFuncyBoxが出ていれば成功です。

 

Media

ポップアップで表示したい項目にチェックを入れます。

ご自身のサイトに合うようにカスタマイズしてください。

チェックボックスを入れると各項目が表示されますが、外すと項目が非表示になります。

 

Overlay

1つ目のチェックボックスは、FancyBoxで開いたコンテンツ周りのオーバーレイを有効にするかどうかです。

デフォルトでは画像の枠がグレーの透明レイヤーが有効になります。

2つ目のチェックボックスはオーバーレイをクリックした時にポップアップしたウインドウを閉じるかどうかです。

Opacity : 不透明度の事です。0~1の間で設定ができます。

デフォルトが0.7です。

ほとんど変えなくても大丈夫だと思います。

 

 

Window

1つ目のチェックボックスは閉じるボタン(X)を付けるかどうかです。

Background Color  : 背景色を設定

Text Color       : 文字の色を設定

Title Color               : タイトルの色を設定

Border Color           : 境界線の色を設定

border radius    : 境界線の丸みを設定

Dimensions     : ウィンドウサイズを設定

Behavior                 : 1つ目の☑はスクロールしても中央に固定する

2つ目の☑はEscキーでウィンドウが閉じるかどうか

3つ目の☑は自動縮小

open/close  speed     : 開閉時のスピード

 

Miscellaneous

Open on page load: 開いた時にページをロードするかどうか

Delay in milliseconds: 遅延時間(初期値:1000ミリ秒)

Hide popup after first visit? : 最初にポップアップを隠すかどうか「いいえ」のみ選択可
Include IE 8 compatibility style rules: IE8 互換のスタイルルールを適用するかどうか

 

images

To make images open in an overlay, add their extension to the Autodetect field or use the class “fancybox” for its link. Clear field to switch off all autodetection.:
オーバーレイで画像を開くには、下の「Autodetect」に拡張子を追加するか、リンクに「fancybox」クラスを使用します。
自動検出を全てオフにするには、「Autodetect」をクリアします。

Apply to: 選択不可
Force FancyBox to treat all media linked with class=”fancybox” as images?:
「class=”fancybox”」が記述されたすべてのメディアを画像として強制的に扱いますか?

「いいえ」か「はい」

Behavior

トランジション効果とイージング効果の設定。

Transition In: なし・Fade(フェイド)・Elastic(弾力のある、伸縮自在の)
Easing In  :    Linear(線)・Swing(スイング)・easelnBack・EaseOutBack

Transition Out: なし・Fade(フェイド)・Elastic(弾力のある、伸縮自在の)
Easing Out: Linear・Swing・EaselnBack・EaseOutBack

注意:イージング効果は、トランジションがエラスティックに設定されている場合にのみ適用。

Transparency fade during elastic transition.

チェックを付けるとエラスティックトランジションの時は、透明度が薄くなっていきます。

CAUTION: Use only when at least Transition In is set to Elastic!
「Transition In」が「Elastic」に設定されている場合にのみ使用すること。

Close FancyBox when content is clicked:コンテンツをクリックしてFancyBoxを閉じるかどうか

appearance

Show title : タイトルを表示するかどうか

Title Position: タイトルの位置

Allow title from thumbnail alt tag: サムネイルの alt タグをタイトルとして許可

Advanced: 選択不可

Gallery

 

Autogallery: 無効にすると、rel 属性を使用してイメージリンクを手動でグループ化できます。

Show the gallery navigation arrows: ギャラリーのナビゲーション(矢印)の表示

Arrow key strokes browse the gallery: 矢印キーを押すとギャラリーを閲覧

Include the Mousewheel jQuery extension script to allow gallery browsing by mousewheel action.:
Mousewheel jQuery を組み込んで、マウスホイール操作によるギャラリーブ閲覧をできるようにするかどうか

Make galleries cyclic, allowing you to keep pressing next/back.:
ギャラリーを「next」「back」を押し続けられるようにし、ギャラリーを循環させられるようにする。

Change speed: チェンジ速度

Fade speed: フェード効果の速度 単位はミリ秒。大きくなるほど遅くなります。 初期値:300 ミリ秒。

Advanced:選択不可

Inline content

オーバーレイでインラインコンテンツを開くには、div内のコンテンツを一意のIDでラップし、ターゲット “#uniqueID”を持つリンクを作成し、クラスに “fancybox-inline”属性を付けます。

 

☑インライン/ HTMLコンテンツのサイズを調整してみてください。 チェックを外すと、デフォルトの寸法が使用されます。

スクロール なし/自動/スクロールあり

スクロールとスクロールバーの可視性を定義します。

PDF

オーバーレイでPDFドキュメントファイルを開くには、自動検出を有効にするか、そのリンクに「fancybox-pdf」クラスを使用します。

☑自動検出の有無

オブジェクトタグもしくはiFreameタグの埋め込み

幅の大きさ 高さ 枠線 を指定できます。

☑タイトル表示の有無

タイトル表示の場所 浮遊させる/外に表示/内側に表示:サムネイルのaltタグからタイトルを許可する

 

SWF

オーバーレイでFlash(.swf)ファイルを開くには、自動検出を有効にするか、リンクに「fancybox-swf」クラスを使用します。
サムネイルaltタグ

☑自動検出の有無

幅/高さ/枠線の幅を決めます

☑タイトル表示の有無

タイトル表示の場所 浮遊させる/外に表示/内側に表示:サムネイルのaltタグからタイトルを許可する

 

SVG

オーバーレイでSVG(.svg)ファイルを開くには、自動検出をオンにするか、そのリンクに “fancybox-svg”クラスを使用します。

☑自動検出の有無

幅/高さ/枠線の幅を決めます

☑タイトル表示の有無

タイトル表示の場所 浮遊させる/外に表示/内側に表示:サムネイルのaltタグからタイトルを許可する

YouTube

オーバーレイでYouTubeムービーを開くには、自動検出をオンにするか、リンクに「fancybox-youtube」クラスを使用します。

☑自動検出の有無

幅/高さ/枠線の幅を決めます

☑タイトル表示の有無

タイトル表示の場所 浮遊させる/外に表示/内側に表示:サムネイルのaltタグからタイトルを許可する

Vimeo

オーバーレイでVimeoムービーを開くには、自動検出をオンにするか、クラス「fancybox-vimeo」をリンクとして使用します。

☑自動検出の有無

幅/高さ/枠線の幅を決めます

☑タイトル表示の有無

タイトル表示の場所 浮遊させる/外に表示/内側に表示:サムネイルのaltタグからタイトルを許可する

Dallymotion

オーバーレイでDailymotionムービーを開くには、自動検出をオンにするか、リンクに “fancybox-dailymotion”クラスを使用します。

☑自動検出の有無

幅/高さ/枠線の幅を決めます

☑タイトル表示の有無

タイトル表示の場所 浮遊させる/外に表示/内側に表示:サムネイルのaltタグからタイトルを許可する

iFrames

オーバーレイでウェブサイトまたはHTMLドキュメントを開くには、そのリンクに “fancybox-iframe”クラスを使用します。

☑自動検出の有無

幅/高さ/枠線の幅を決めます

☑タイトル表示の有無

タイトル表示の場所 浮遊させる/外に表示/内側に表示:サムネイルのaltタグからタイトルを許可する

リンクの設定

メディア挿入時にリンク先の設定が自分で決めれます。

メディアファイルを選択しないとプラグイン効果がでませんのでお気を付けください。

画像などをアップデートした時点でメディアファイルと指定されていますが、プラグイン導入前の画像などは指定されていない可能性があります。

 

いかがだったでしょうか?

難しい設定はほとんどなくデフォルトでも使えますので、画像をおしゃれに表示したい!と言う時などには良いプラグインだと思います。

筆者のHPも採用しています。

バグの報告はいくつかあるみたいですが、今のところ正常に動いていますのでストレスなく画像表示してくれています。

この機会にプラグインの導入をしてみてはどうでしょうか?

参考になったらシェアして頂けると励みになります。

では、今日はこの辺りで。

 

 

 

スポンサーリンク




スポンサーリンク




-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Akismet Anti-Spam (アンチスパム) 設定方法

今回紹介するのは、アンチスパム Akismet Anti-Spamです。 自分のサイトを悪意のあるスパムから保護してくれるプラグインです。 設定方法も簡単ですし、無料で使えますので説明をよく読んで自分 …

メニューバーに投稿一覧を乗せたい

スポンサーリンク     目次1 ハマった2 カテゴリーを追加する3 カテゴリーをメニューに追加4 実際に投稿してみよう!5 完成6 まとめ ハマった 丸一日はまった作業だったので …

BackWPup 設定手順書

  wordpressのバックアップを取るなら、BackWPupと言うプラグインがおすすめです。 WordPressの更新やデータベースを直接触ってデータが吹っ飛んだりと、あらゆる事故を未然 …

FaileZiila  インストールと設定方法

今回はmacユーザーのためのFTPソフトの紹介です。 FTPソフトっていくつかありますが、その中でもmacユーザーであれば、FaileZiila です。 FFFTPのソフトも紹介しましたが、こちらはw …

Google XML Sitemapsプラグイン 設定方法

  筆者おすすめプラグインでも紹介させて頂いた、Google XML Sitemapsプラグインの設定方法と使い方です。 ネットで記事を書いている人は、少なからずSEOは気になるはずです。 …



about me