プラグイン特集 ワードプレス入門

初心者大歓迎!!画像・動画をふわっと拡大表示出来る『Easy FancyBox』紹介します。

この記事でわかる事!!

☆画像・動画を拡大表示出来るプラグインの紹介。
☆『Easy FancyBox』の使い方。

こんな悩み有りませんか?

★画像・動画を拡大表示したいんだけどやり方が分からい!!

こんな記事ではそんな悩みを解決します!!

『Easy FancyBox』説明します!!

Easy Fancy Boxは、画像をクリックした時にふわっと浮かせることができるプラグインです。
商品ギャラリーや作品ギャラリーなどを作りたい時に活用できるプラグインです。

注意

Easy FancyBoxは、jQueryというjavascriptライブラリを利用していて、まれにご利用のテーマ・プラグインの相性で競合する・上手く動かない場合もあるのでご注意下さい。

『Easy FancyBox』のインストール方法

①プラグイン
②新規追加
③キーワード
*③に『Easy FancyBox』と入力してください。

インストールをしたら『有効化』を忘れずに!!

以上で『Easy FancyBox』のインストールは完了です。
簡単でしょ?

次からは『Easy FancyBox』の設定及び使い方を解説します。

『Easy FancyBox』の設定

主な設定

種類 設定内容
Media(メディア) 拡大表示をしたいファイルの種類の選択
Overlay(オーバーレイ) 画像の背景の透明度と色の選択
Window(ウインドウ) 画像周りの設定
Miscellaneous(その他) 画像の読み込みに関する設定
Images(画像) 有効化させる画像とスライドショーの設定
PDF(*PDFにチェックを入れた場合) 拡大表示するPDFのサイズや枠線、タイトルの設定
YouTube(*YouTubeにチェック入れた場合) 拡大表示するYoutube動画のサイズや枠線、タイトルの設定

『Version』の設定

*クリックすると拡大します。

クリック拡大後、閉じた後に最初の文章に戻らないような仕様にしたい場合は、『Version』を「FancyBox2」を選択して下さい。

『画像サイズ』の設定

挿入した際の画像サイズを設定して下さい。

ここでは自分が使いやすいサイズを設定しましょう!!

『メディア』の設定

*クリックすると拡大します。

ファイル 種類
Image 画像
Inline content 文章
PDF PDFファイル
SWF .swf形式のファイル
SVG .svg形式のファイル
Youtube Youtube動画
Vimeo Vimeo動画
Dailymotion Dailymotion動画
iFrames iframeを使用した文書

自分の使用するメディアを選択して下さい。
画像だけの使用であれば『Image(画像)』だけのチェックで良いです。

『オーバーレイ』の設定

*クリックすると拡大します。

ここでは画像周りの設定を行います。

種類 設定の内容
FancyBox でコンテンツが開かれた周囲にオーバーレイを表示 画像周りの透明化するかどうかを設定します。
オーバーレイがクリックされた時 FancyBox を閉じる 表示した画像を閉じるためのボタンを作るかの設定です。
画像周りを何色で透明化させるかの設定です。

『ウインドウ』について

*クリックすると拡大します。

種類 設定の内容
閉じるボタン (X) を表示 画像の右上に表示されるキャンセルボタンの表示。チェック必須です。
背景色 テキスト色 画像の枠線の色とタイトル文字の色を設定します。色コードは3ケタのコードで入力します。
枠線 拡大図の周囲枠の幅の設定です。
マージン 画像とWindows間の幅を設定。設定値には20~80の値を入力します。デフォルトの設定値は「10」です。
Esc キーで FancyBox を閉じる 「ESC」キーで拡大した画像を閉じるかの設定です。
Scale large content down to fit in the browser viewport. 表示する画像が画面内に収めるかの設定です。これもチェックしておきましょう。

『その他』について

*クリックすると拡大します。

ここでは画像の読み込みに関する設定をします。
基本的には全てデフォルトのままにします。

『画像』について

*クリックすると拡大します。

種類 設定の内容
自動検出 画像を拡大表示させたいファイル(.jpg等)を入力します。初期値は「.jpg」「.jpeg」「.png」「.webp」です。これ以外の画像を使う場合には半角スペースを入れてから続けて入力します。
設定対象 リンクを設けるための申請(設定)です。「すべての画像リンク」を選択。
class="fancybox" のあるリンクをすべてのメディアを取り扱うようにする。 画像のクラスに「fancybox」を設定した場合、強制的にFancyBoxの機能を有効にさせるかの設定です。「いいえ」を選択しておきましょう。
トランジションイン・アウト FancyBoxプラグインは、単一の画像を拡大するだけではなく、スライドショーのように画像を連結させる事が出来ます。
コンテンツがクリックされたら FancyBox を閉じる。 拡大した「画像」をクリックした時、画像を閉じるかの設定です。拡大した画像を間違えて閉じる可能性があるため、チェックは外しておいた方が無難です。
タイトルを表示 画像のタイトルを表示するかの設定です。画像だけを見せたい場合はチェックを外します。
Title Style タイトル文字の位置を設定します。
ギャラリーのナビゲーション矢印を表示する 矢印を押したとき、画像を閲覧できるかの設定です。
ギャラリー閲覧にキー操作を許可する スクロール時に画像を閲覧できるかを設定するために、Mousewheel jQueryの拡張スクリプトを有効にするかの設定です。
Make galleries cyclic, allowing you to keep pressing next/back. 画像の切り替えを永遠にループさせるかの設定です。
Allow gallery browsing by mousewheel action. 画像切り替え時の速度とフェードの速度を設定します。
スライドショー スライドショーの設定。動作時間 (ミリ秒単位)。高いほど遅くなります。

『PDF』について*チェックを入れた時のみ

*クリックすると拡大します。

拡大表示するPDFのサイズや枠線、タイトルの設定などを行います。

種類 設定の内容
自動検出 PDFであるか自動検出するための設定。PDFを使用する場合にチェックを入れます。
埋め込み PDFの埋め込みを何タグで行うかの設定です。「iFrame tag」に設定する事が無難だと思います。
幅/高さ/枠線 拡大する画像のサイズと枠線を設定。注:入力する数字には必ず「%」を付けて下さい。未入力の場合、単位がピクセルになります。
タイトルを表示 PDFのタイトルを表示するかの設定です。PDFだけを見せたい場合はチェックを外します。
Title Style タイトル文字の位置を設定します。
タイトルにサムネイルの alt 属性を許可する altタグをタイトルとして許可する場合は「Allow title from thumbnail alt tag」にチェックを入れます。

『YouTube』について*チェックを入れた時のみ

*クリックすると拡大します。

種類 設定の内容
自動検出 YouTubeであるか自動検出するための設定。YouTubeを使用する場合にチェックを入れます。
埋め込み YouTubeの埋め込みを何タグで行うかの設定です。「iFrame tag」に設定する事が無難だと思います。
幅/高さ/枠線 拡大する画像のサイズと枠線を設定。注:入力する数字には必ず「%」を付けて下さい。未入力の場合、単位がピクセルになります。
タイトルを表示 YouTubeのタイトルを表示するかの設定です。YouTubeだけを見せたい場合はチェックを外します。
Title Style タイトル文字の位置を設定します。

『Easy FancyBox』の使い方

1枚をふわっと拡大表示する


拡大表示したい画像を選んで....。

*クリックすると拡大します。

リンク先をメディアファイルにして挿入するだけです!!

『ギャラリー』を作成する

『ギャラリーを作成』ここから作成です。

ギャラリーに入れたい画像を選択!!

完成です!!

これが出来ると記事がグッと華やかになります。

設定も簡単なので是非お試し下さい!!

まとめ

今回は、画像を拡大表示出来るプラグイン『『Easy FancyBox』を紹介した。
細かい設定はさほど必要なく、画像の拡大表示だけであれば、「インストール」「有効化」そして「version」の確認程度ですぐ利用出来ます。

その上、画像が拡大表示される事で記事の華やかさやわかりやすさがグッと増すお得なプラグインと思います。

画像を多く使う方は是非ご利用になってはいかがでしょうか?

看板記事の紹介

なぜ今『転職』や『副業』なのか?

度重なる増税、不安定な社会情勢、納税義務の延長と、私達の未来は今大きく脅かされています。
将来の為に動くのであれば少しでも早い方が得策です。
この記事では、明るい未来を勝ち取るために『副業』を考えている方の応援ブログです。

もっと詳しく社会情勢や雇用の現実と未来を知りたい!!という方向けにこんな記事も書いてます。

👇知りたい方はこの記事をどうぞ!!👇

副業を始めてみたい!!

副業を始めてみたい方、このページにおいで!!
このページではブログを使った副業を1から解説しています。
『難しんじゃないの?』と、お思いの貴方、そんな事ありませんよ。
1つ1つ取り組めば確実に実行出来ますよ。
その良い例が私達です。
巻末に『収益公開』も行っています。
是非ご覧になって下さい。

👇詳細はコチラ👇

転職先を探したい!!

転職したい方、このページにおいで!!
このページでは、転職の探し方、お勧め転職サイトの紹介、面接の実際まとめてます。
貴方が理想とする職業や年収、環境がきっと見つかる!!
貴方がもっと貴方らしく輝ける場所(職場)がきっと見つかる!!
まだ転職を決めてない方も、まず動いてみても良いと思いますよ?
是非ご覧になって下さい。

👇詳細はコチラ👇

関連・参考記事はコチラ!!

Yamaoo Channelホーム

我らがYamaoo channnel のホーム画面です。

一つでも当てはまる人はクリック!!

〇将来が不安。
〇副業に興味がある。
〇ブログに興味がある。
〇副業を始めたいけどどうやっていいかわからない。
〇ブログで稼げるかを知りたい。

👇一つでも当てはまるものがあればクリック👇

yamaooホーム

ブログを基礎から学びたい!!~ブログ入門~

副業を始めたい!!
でもブログの始め方や種類が分からない....。
そんな方へ、今更聞けないブログの事やアフィリエイトの事解説します。

興味がある方は👇👇をどうぞ!!

ブログ入門

ワードプレスの使い方を学びたい!!~ワードプレス入門~

ブログを始めたけど、ワードプレス使い方が分からない。
そんな悩み有りませんか?
そんな方へ、ここではワードプレスについて解説します。

興味がある方は👇👇をどうぞ!!

ワードプレス入門

最強有料テーマアフィンガー6を学びたい!!~アフィンガー6入門~

ブログで稼ぎたいのであれば、有料テーマの導入は必須!!
ここでは最強有料テーマの呼び声が高い『アフィンガー6』!!
ここではアフィンガー6について解説します。

興味がある方は👇👇をどうぞ!!

アフィンガー6入門

SEOって難しい!?~SEO入門~

ブログで稼ぎたいのであれば、SEO対策は欠かせません。
でも....SEOってよくわからない....。
ここではSEOについて解説します。

興味がある方は👇👇をどうぞ!!

SEO入門

アフィリエイト特化

アフィリエイトに特化した記事をまとめております。
アフィリエイトを詳しく知りたい!!

そんな方は👇👇をどうぞ!!

詳しくはコチラ

アドセンス特化

アドセンスに特化した記事をまとめております。
アドセンスを詳しく知りたい!!

そんな方は👇👇をどうぞ!!

アドセンス特化

 

 

 

 

 

 

 

 

 

 

 

2024年5月
 1234
567891011
12131415161718
19202122232425
262728293031  
  • この記事を書いた人
  • 最新記事

炉具男と瑛斗

ブログ初心者の二人がアフィリエイト収入を目指します。 〇平日は会社員/アフターファイブと休日はブロガー兼アフィリエイター/毎日の収益とブログ・アフィリエイト・アドセンス・副業に関する記事を公開しています。/Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。/当メディアは新たにブログを始めるオーディエンスに惜しみなく協力いたします。

おすすめ記事はコチラ

1

ブログ初心者の私たちが毎日のアフィリエイト収益を公開します!! まだまだサイトを構築してる最中ですが近い将来、3~4サイトを運営予定です。 ★2022年11月の収益公開記事はこちらです! ★2022年 ...

2

この記事でわかる事 〇ブログでバックアップを取るべきもの。 〇ブログのおすすめバックアップ用プラグイン。 〇ブログのバックアップを取る方法。 WordPressでブログを始めたけど..... 〇ブログ ...

3

この記事でわかる事 AFFINGER6でのスマホヘッダーの高さ調整方法 虹子先生AFFINGER6を導入したけど、スマホヘッダーの高さ調整方法がわからない…そんな人いませんか? スマホヘッダーの高さ調 ...

4

この記事でわかる事 〇AFFINGER6で表の作成 〇AFFINGER6で横スクロール表の作成 『AFFINGER6を導入したのは良いけど、表の作り方が分からない!!』 そんな人いませんか? この記事 ...

5

この記事でわかる事 〇Wordpressブログの目次の作り方 こんな疑問ありません? WordPressで目次をつける方法が分からない 目次のプラグインの使い方が分からない 目次をつけるメリットが分か ...

6

この記事で伝えたい事 〇問い合わせフォームの意味 〇問い合わせフォームの作り方 こんな悩み有りませんか? 〇問い合わせフォームって何で必要なの? 〇問い合わせフォームの作り方が分からない(泣)。 サイ ...

-プラグイン特集, ワードプレス入門
-