読者です 読者をやめる 読者になる 読者になる

godmemo

デザイン/WEB屋のメモです。自分用

Word Pressギャラリープラグイン「FooGallery」が凄い! ギャラリーサイトにばっちりでLightboxもスマホに最適!【FooGallery:使い方】

WordPressプラグイン関連 wordpress WEB

f:id:godspade:20151104170658p:plain

FooGallery - The Best WordPress Gallery Plugin

WordPress ギャラリープラグイン Gallery Plugin レスポンシブ対応「FooGallery」は最強だった!! 

 

 

【この記事は、以前書いた記事に追記しています】 

ありがたいことに、こちらのフーギャラリープラグイン記事のアクセス沢山頂いております。

使い方がよくわからない方は、分かる範囲でお答え致しますので、お気軽にコメント頂けると嬉しいです。

このFoo Galleryプラグインは、操作もしやすく更新は自社でやりたいというクライアントにも親切設計なプラグインです。いろいろ細かい調整もしやすいです。かゆいところに手が届く感じで非常におすすめ!ギャラリーとして利用するには、やはりLightboxの機能も必要ですよね。

 

「Foo Gallery」プラグイン単体だと、Lightbox機能が動作しないため「Foo Gallery」プラグインと併せて「FooBox  Image Lightbox」が必要になります。

 スポンサーリンク  

まずは「Foo Gallery」と「FooBox Image Lightbox」のプラグインをダウンロードして、ワードプレスにインストール。

f:id:godspade:20151104163159p:plain

インストールは、ダッシュボード内>プラグイン>新規追加>「Foo Gallery」「FooBox  Image Lightbox」をそれぞれ検索> 今すぐインストール>有効化

直接ダウンロードする方は、Foo Galleryはこちら  FooBox  Image Lightboxはこちら

 

プラグインを有効化すると、ダッシュボードの左側にそれぞれ表示されます。

f:id:godspade:20151104164436p:plain

f:id:godspade:20151104164438p:plain

 

FooBox  Image Lightboxは、インストールして、有効化すればあとは特に細かい設定はしなくて良いと思うので、今回は説明はナシです。 

 

1、「Foo Gallery」をつかってみよう。ギャラリーを新規作成

まずは「Add New Gallery」から、ギャラリーを新規作成

f:id:godspade:20151104165816j:plain

ここで、ほとんどの作業を行います。

・タイトル     ギャラリーのタイトルなので、管理しやすいお好きなタイトルを入れます

・Gallery Items 画像のアップロード

・Gallery Setting  ギャラリーテンプレートの選択➡各種詳細設定を行います

・Custom CSS お好みでCSSの指定ができます

 

 ⬆画像内①の部分、無料版では5パターンのギャラリーデザインが選べます。詳細は後ほど。

 

2、画像のアップロード。Foo GalleryでLightboxを利用する際、画像のアップロード&管理するときの注意

f:id:godspade:20151104174917p:plain

①「キャプション」 記入したテキストが Lightboxで表示されるポップアップ画像でタイトルが表示

②「説明」 記入したテキストが Lightboxで表示されるポップアップ画像で説明表示

f:id:godspade:20151104175319p:plain

③「FooGallery Custom Target」

写真アップロードする際、セレクターで「Foo Box」の選択をお忘れなく!これをしないと Lightboxが作動しません。

 

 

3、無料版FooGalleryは5種類のGallery Templateを選択

どのデザインテンプレートも使い勝手が良いので、制作するWEBサイトのデザインコンセプトに合わせてお好みのデザインが選べると思います。

各テンプレートの詳細設定は、今回は割愛します。

 

ギャラリーテンプレート5種の紹介はこちら

Word Pressプラグイン「FooGallery」に感動。 ギャラリーサイトにばっちりでLightboxもスマホに最適!FooGalleryの使い方【Gallery Templateの一覧】 - godmemo

 

 

 4、各設定が終わったら「公開」をクリックして、ショートコードを発行

ギャラリーの設定が一通り終わったら、ショートコードが発行されますので、そのコードを、掲載したいところにコピペすれば完了です。

f:id:godspade:20151104173054p:plain

コピペしなくても、記事編集画面から、直接ギャラリーの選択も可能です

f:id:godspade:20151104173058p:plain

 

 

問題なくギャラリーページに反映されました。

f:id:godspade:20151104173052p:plain

 

f:id:godspade:20151104173040p:plain

サムネイルをクリックすると、FooBox  Image Lightboxが作動します。画像アップロード画面で、「キャプション」「説明」にテキスト入れたものが、 Lightbox画像下部に表示されます。

 

スマホサイトにも最適、「Foo Gallery」は最強のギャラリープラグインだと思う 

いろいろなワードプレス用のギャラリープラグインはありますが、実際に導入してみると、どれもデザインがいまいちだったり操作性があまりよくなかったりしてなかなかしっくりくるものがないです。

そんななか、出会ったのが「Foo Gallery」。実際に使ってみると、機能もデザインも最高!ということで惚れました。

Lightboxはスマホにも最適化されているので、非常にシンプル&オシャレで使い勝手が非常に良いです。 

「Foo Gallery」はどれも、そこらのプラグインよりもデザイン性が高く、高性能。しかも管理しやすい!細かい設定や使い方は今回掲載できませんでしたが、別の機会に追記してみたいと思います。