Wordpressでグリッドレイアウトを作る【プラグイン:Final Tiles Grid Gallery／テーマ:Luxeritas】

WordPressでグリッドレイアウトのデザインを作るプラグインの紹介と、WordPressのおすすめ無料テーマ巡りその4「Luxeritas」の紹介です。Luxeritasというテーマを使い、Final Tiles Grid Galleryというプラグインを導入したテストサイトはこんな感じに仕上がっております。

グリッドレイアウトのプラグイン「Final Tiles Grid Gallery」
WordPressの無料テーマの使用レビュー記事
- WordPressのプラグイン関連記事

グリッドレイアウトのプラグイン「Final Tiles Grid Gallery」

グリッドレイアウトはその名の通り、画像やオブジェクトを「並べる」レイアウトのことですが、今回紹介する「Final Tiles Grid Gallery」は、JavaScriptの中でも人気の「Masonry」というグリッドレイアウトプログラムが使えるプラグインです。Masonryのいいところは画像の縦幅と横幅のサイズがバラバラでも並べられること。わかりやすく言うと「Pinterest」のカードレイアウトのような感じにできます。

さらに、「Final Tiles Grid Gallery」ではオプションで「Lightbox」というプログラムも使えます。Lightboxは画像をクリックすると全画面に拡大されるプログラムです。結構よく見るあれですね。

Final Tiles Grid Gallery以外のグリッドレイアウトプラグインも何個か試してみたのですが、無料版ではMasonryが入ってなかったり、画像の掲載数に限りがあったり、使えそうなものがありませんでした。その点、Final Tiles Grid Galleryは設定が非常に簡単で使いやすく、制限もない。インストールして、有効化して、Addでギャラリーを作って、ショートコードを固定ページに貼り付ければグリッドレイアウトの完成です。

Final Tiles Grid Galleryの使い方

プラグインをインストールし、有効化すると、左のメニューに「Final Tiles Grid Gallery」という項目が追加されます。まずはギャラリーを新規で作成するので「Add Gallery」をクリック。

次の画面で、ギャラリーの名前（Name of the gallery）と説明（Description of the gallery）を入れ、Nextへ。次に「Media library」を選択し、Nextへ。最後にChoosed the layoutという項目で「Final Tiles」と「Masonry」の2種類のレイアウトを選べます（私の場合はバグで真っ白に表示されている）。レイアウトは後から変更可能。そして、写真も後で追加できるので、ここでは何もしなくてもOKです。

設定できる項目は9種類。

画像を追加する

画像の追加、サイズの変更は「Images」で行います。User imagesの右横にあるプルダウンから画像のサイズを選び、さらにその右横にある「Add images」で画像を登録します。動画は「Add video」で選択できます。

追加した画像にカーソルを合わせると、キャプションやタイトル、リンクの設定などが編集できます。×マークをクリックすれば削除も可能。「Toggle visibility」は画像を不可視化することができます。

レイアウトを設定する

「General」という項目で詳細設定を行います。ここで設定できるのは以下の通りです。

ギャラリータイトルと説明
レイアウトの種類（Final Tiles or Masonry）
画像の横幅サイズ
画像と画像の余白（マージン）
画像の並び順（ユーザー設定順／後ろ順／ランダム）
グリッドのサイズ
解像度（px）未満のグリッドサイズを無効にする

Final Tiles と Masonry の違いはレスポンシブしてみるとわかりやすいと思います。Final Tilesの場合、スマホビューで画像が一列表示されるのに対し、Masonryではカラム数が守られているみたいです。

画像のリンクと拡大表示（Lightbox）を設定する

拡大表示の設定をしない場合は「Links & Lightbox」のところで「No Lightbox」を選べばOK。モバイルだけ非表示とかも設定できます。以下、詳細です。

拡大画像のサイズ設定
グループのonとoff（ライトボックス画面で画像間移動ができる）
リンク先を新規タブで開く（target blank）
Twitterアイコンのonとoff
Facebookアイコンのonとoff
Google＋アイコンのonとoff
Pinterestアイコンのonとoff
SNSアイコンの色設定
SNSアイコンの形（丸 or バー）
SNSアイコンの表示場所（下 or 右）

キャプションの表示設定

「Captions」コーナーではキャプションの表示設定ができます。無料版ではあまり選べないので、ほとんどデフォルトです。背景の色や文字の色、文字サイズ、透明度（opacity）、表示場所などが選べます。

ホバーエフェクトの設定

「Hover effects」項目では、ホバーした時のエフェクト設定を変更できます。ホバーエフェクトとは、マウスのカーソルを合わせたときに表示されるエフェクトのことです。例えば画像にカーソルを合わせると、大きくなったり動いたりすることってありますよね。あれがホバーエフェクトです。無料版では設定ができないみたいなので、省きます。

画像のロード（読み込み）エフェクト設定

「Image loaded effects」項目では、画像をロードしているときのエフェクトを色々設定できます。私は使っていないので省略します。

スタイルの設定

「Style」項目ではデザインを設定できます。ざっくり設定できる項目は下記の通り。

画像のアウトラインの設定（border）
画像のアウトラインの角丸設定
画像のアウトラインの色設定
ローディングバーの色設定
ローディングバーの背景色設定
画像のシャドウ（影）のサイズ設定
画像のシャドウ（影）の色設定
タイルの背景色設定

CSSのカスタム設定

「Customizations」項目では、CSSのカスタム設定ができます。aタグにクラス名をつけたり、プログラムを追加したり、必要に応じてカスタマイズが可能です。

上級者用の詳細設定

「Advanced」項目は上級者向けの設定です。画像のロードをスクロール毎に行ったり、非同期設定にしたり、画像サイズをビューポート毎に%設定したり、結構細かいシステム的な設定を行えます。

ページの読み込み速度などを改善したい場合にはここの設定を変更すればいいかと思われます。よくわからなければデフォルトでOKでしょう。

これで全ての設定が完了です。出来たら右側にある「Publish」をクリックし、「Save gallery」で保存しましょう。上にショートコードが載っていますが、使っても使わなくてもOK。

なぜならFinal Tiles Grid Galleryは、固定ページや投稿画面で普通に追加ができるからです。導入は超簡単！

Final Tiles Grid Galleryを固定ページや記事に入れる

固定ページや投稿画面でFinal Tiles Grid Galleryギャラリー入れるのはとても簡単です。普通にメニュー項目から追加できるからです。

この複数画像のアイコンが目印。

クリックすると、画面に「Select gallery」というセレクトボックスが現れるので、ここで呼び出したいギャラリーのタイトルを選べばそれで完了！

さらに右側の「ブロック」項目ではレイアウトを Final Tiles か Masonry に変更できます。

今回使ったWordPressのテーマは「Luxeritas（ルクセリタス）」

WordPressのおすすめ無料テーマ巡りその4「Luxeritas」。今回のギャラリーサイトでは、WordPressの人気無料テーマ「Luxeritas」を使っています。高速処理には定評があり、ほとんどのまとめサイトで紹介されている有名なテーマ。高速化、SEO対策、多機能、レスポンシブ対応、高カスタマイズ。無料テーマなのに細かい詳細設定ができるところも優れたポイント。

数年前からずっと人気テーマとして君臨しているので、かなり評判は良さげ。実際使ってみても結構使いやすかったです。カスタマイズが結構色々できるんですよね。

おまけ：フランスのデザイン、アート、見どころ。

今回のデモサイトは、実際に私がフランスに行ったときに撮りためたデザインのアイデア画像集です。ルーブル、オルセー、ポンピドゥーセンターなど、パリで有名な美術館を巡りました。

この頃はポンピドゥーセンターが出来たばかりで、かなり面白かった記憶があります。外観はまるで未完成の建築現場のように足場だらけの骨組みデザイン。人気スポットでもあり、スリが横行する危険な場所でもあります。当時のスリ手口はアンケート詐欺でした。ちょうどダリの企画展が開催されていて激混みの最中でした。

そして、芸術の街と言われるモンマルトルもおすすめ。広場ではアーティストがたくさん絵を描いて売っています。日本でのストリートミュージシャンといえばギターの弾き語りが多いですが、こちらではハープやヴァイオリンがメインです。銅像や石像に扮したパフォーマーも多い。ちなみにモンマルトルの有名な詐欺手口はブレスレット詐欺です。

パリと日本の違いとして印象に残っているのは照明。日本ではオレンジや黄色が多い照明も、パリでは紫や赤などのカラー照明が多く使われていました。

買い物はセレクトショップmerciというところへ行きましたが、販売しているインテリアは全部おしゃれ。

気温0℃でも素足にパンプスを履き、テラス席でワインを飲むパリジャンは凄いなー、と感心。パリはデザイン的にとても見応えがあります。