WordPress ふわっと画像が拡大しちゃうプラグイン『Easy FancyBox』

プラグイン

よくブログを徘徊しているとサムネイル画像をクリックするとふわっと画像が大きくなる様にされていますよね。カッコいいですよね~!

こういう機能を「Lightbox」というようですね。JavaScriptアプリケーション処理されています。

検索するとたくさんの種類の「Lightbox」プラグインが見つかると思います。

私も色々と検討し、その中でもこれかなと思って導入しているプラグイン『Easy FancyBox』を今回ご紹介します。

 

↓ クリックしてみてくださいね!こんな感じで拡大します。 ↓

 

 

Easy FancyBoxのインストール

 

早速、進めていきましょう!

『プラグイン』『新規追加』検索『Easy FancyBox』『インストール』『有効化』で完了!

WordPressのプラグインインストールは本当に簡単です。

 

 

 

Easy FancyBoxの設定

 

管理画面の『設定』『メディア』、もしくは『プラグイン』『インストール済みプラグイン』から行います。

 

基本的にはそのままの設定で問題なく機能します。

下記はwordpressの標準メディア設定画面です。画像サイズは任意に設定されていると思います。

Easy FancyBoxで拡大ポップアップ出来るなら小さめでも良いという場合もあるかもしれません。

あなたのサイトに合うサイズに設定しておくと良いでしょう。

 

 

 

Easy FancyBoxをインストールすると下記設定画面が追加されます。

画像以外にもPDFなんかも登録出来るんですよね。

特に他はデフォルトのままで問題ありません。

 

 

 

Easy FancyBoxの使い方

 

・単独画像を貼る場合

 

記事作成画面の『メディアを追加』をクリック!

 

 

 

左側一覧「メディアを追加」になっている事を確認してサムネイル画像をクリック!

 

 

 

右下の「添付ファイルの表示設定」のリンク先を必ず『メディアファイル』して『投稿に挿入』をクリック! ※挿入後も画像をクリックで編集可能です。

 

 

プレビューで確認してみましょう!

最初に紹介した画像の様にポップアップすればOKです。

 

 

・ギャラリーを貼る場合

Easy FancyBoxは画像一覧も作成する事が出来ます。

写真家の方や絵を描く方には特に便利な機能ではないでしょうか?

 

先にこちらをご覧ください。画像をクリックしてみてくださいね。

 

【ギャラリーサンプル】

 

こんなギャラリーも簡単に出来てしまいます。

 

では早速やっていきましょう!

左側一覧「ギャラリーを作成」を選択しグループにしたいサムネイル画像にチェックを入れていきます。

 

 

選択したら右下の『ギャラリーを作成』をクリック!

 

次の画面に移ります。

ここでは画像の並び順を入れ替えが出来ますのでドラッグ&ドロップでお好みのレイアウトにしてください。入れ替えが完了したら右下の『ギャラリーを挿入』をクリック!

 

 

 

プレビューで確認してみてください。

先ほど紹介したようなギャラリーが出来たら完了です!

 

 

画像をクリックするとギャラリー登録した画像をページ送りで閲覧する事が出来る様になります。

左右に矢印が表示されるので自由に行き来出来ます。

 

 

以上、Easy FancyBoxの使い方でした。

 

 

まとめ

 

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

特に難しい設定も無く、カッコいい演出が出来る様になるプラグインです。

基本一度設定してしまえば意識する事なく画像の挿入が出来ますのでブログ立ち上げたらまず導入しましょう!

 

こちらの記事もどうぞ!

『PS Auto Sitemap』サイトマップを自動で作成してくれるプラグイン-wordpress
今回はサイトの目次の役割を果たすサイトマップを自動で生成してくれるプラグインの紹介です。 Wordpressを使われている方なら大抵の方が使われてるくらい人気のあるサイトマップ自動生成プラグインなんです。そのサイトのカテゴリー毎の記事の構成
WordPress カテゴリー入れ替えプラグイン『Category Order and Taxonomy Terms Order』
りくりん(@rikurin_mh)です。 前回、ブログのサイトマップを自動で作成するプラグイン『PS Auto Sitemap』を紹介しました。 でもこのプラグイン、とても便利で助かるんですがカテゴリーの順序を変える事までは出来ません。 W
…nomy-terms-order//

コメント

タイトルとURLをコピーしました