[実践編 Level 18.] WordPress(ワードプレス)|ページビルダープラグイン「Elementor」の使い方④ トップページに画像ギャラリーを設置してみよう!

WordPress(ワードプレス)簡単にトップページに画像ギャラリーを設置することが可能だ。

ギャラリーの設置方法はいくつかあるが、やはりここでもプラグインを使うのが最善策だ。

このレベルでは、オススメのギャラリープラグイン「Image Photo Gallery Final Tiles Grid(通称:Final Tiles Gallery)」を使って、ギャラリーの設置方法を攻略していく。

Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:

https://www.dammy.wordpress-quest.com/

※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。
基本的にデモサイトのカスマイズは、
当サイトで記載してある方法以外は使っていない。

画像や動画のギャラリーを作成できるプラグイン「Final Tiles Gallery」

ここでは、下記の参考画像ようなギャラリー(画像の一番下部分)を目指したいと思う。

プラグインをインストールしよう

先ずは、プラグインをインストールするところから始めよう。

プラグインの新規追加画面で「Final Tiles Gallery」と入力してインストールしよう。

「Final Tiles Gallery」は、レスポンシブ対応(画面のサイズのよって自動で可変)のギャラリープラグインで、画像と動画に対応している。

インストールしたら早速使ってみよう。

「Final Tiles Gallery」の使い方

インストールが完了すると、ダッシュボードに「Final Tiles Gallery」のアイコンが表示されるのでクリックしよう。

インストールが完了したら、下記のような画面が表示されるので、ここは「SKIP」で問題ない。

ダッシュボードのメニューに「Final Tiles Gallery」が追加されるのでクリックしよう。

メニュー画面が表示されたら、「Add Gallery」を選択する。

初めて「Final Tiles Gallery」インストールすると、設定ウィザードが表示されるが、基本的に後から設定できる項目なので、デフォルトのままスルーでもOKだ。

ギャラリーのタイトルと説明を記入する画面が表示させるので入力したら、「NEXT」で先に進もう。

続いて、どこからギャラリーの画像を呼び込むかを選択できる。

ここは「Media library」を選択でOKだ。

続いて、ギャラリーの画像に表示させるタイトルやキャプションなどを選べる。

ここは後からでも変更可能なので、とりあえずデフォルトのままでOKだ。

最後に、ギャラリーの種類とアップロードする画像のサイズなどを選べるが、ここもデフォルトのままで大丈夫なので、「SAVE」をクリックして完了させよう。

ギャラリーの設定

設定ウィザードが完了すると自動的にギャラリーが作成される。

作成されたギャラリーを編集するには、鉛筆マークをクリックしよう。

画像の追加

この画面から様々な設定が可能だが、先ずは画像を追加してみよう。

画像を追加するには、一番下の「Images」から可能だ。

「Images」の設定画面では、下記画像を参考に設定を変更しよう。

ハイライト以外の箇所はデフォルトのままで構わない。

SourceUser Images
・自分でWordPressにアップロードした画像を使う場合

Loading methodLazy
・Lazyは画像を遅延させて込み込みできる機能

Image sizeLarge(1024 × 1024)
・ギャラリーに設定する画像のサイズ

ここで一番重要なのは「Image size」で、ここを小さく設定してしまうと、ギャラリー画像が小さくなってボヤける原因になるので、必ず「Large」にすることを忘れないようにしよう。
画像を追加するには「ADD IMAGES」をクリックする。

ここでは、正方形のギャラリーを作ることが目的なので、画像のサイズは予め正方形にしてアップロードしている。

「Final Tiles Gallery」は画像が正方形でなくてもギャラリーの画像を自動で調整してくれるが、その場合は画像のサイズは固定ではなく、ランダムで大きくなったり小さくなったりと自動で調整される。

画像が追加できたら、下のディスクのアイコンをクリックして一旦保存しよう。

試しに現段階のギャラリーをトップページ挿入してみよう。

挿入はショートコードで可能だ。

ショートコードはギャラリー設定画面の一番上に表示されている。

ショートコードをコピーしたら、トップページのElementor編集画面でショートコードを追加すればギャラリーが表示されるはずだ。

参考までに、現段階までの設定をしたギャラリーのサンプルを掲載するので動作を確認してみてほしい。

タイトルとキャプションの設定

ギャラリーのサムネイルにタイトルとキャプションを設定してみよう。
ギャラリーの編集画面に戻って、再度「Images」を選択する。
「Source:」を「User Images」にすると先ほど追加した画像の一覧が表示される。
画像一覧から編集したい画像を選んで、「EDIT」を選択。

隣の「REMOVE」を選択すると画像をギャラリーから削除できる。

 

この画像の編集画面で設定した「Title」と「Caption」がそれぞれギャラリーに反映させる。

ちなみに、ここを空欄にすると画像には何も表示されない。

この画面から画像にリンクを設定することも可能だ。

Link target」では、リンクを押した時の動作を選べる。

同じウィンドウで開くには「Open in same page」、別ウィンドウで開く場合は「Open in _blank」を選ぼう。

設定したら、右下の「save」を押して保存しよう。

列の並び設定

Final Tiles Galleryでは1列にいくつ画像を表示させるかの設定も可能だ。

列の設定は「一般」の項目から行っていく。

設上から6番目の「Number of columns」〜「Number of columns (Phone portrait)」までが列の設定となる。
・Number of columns = PCでの列の個数
・Number of columns (Tablet landscape) = タブレット(横向き)での列の個数
・Number of columns (Tablet portrait) = タブレット(縦向き)での列の個数
・Number of columns (Phone landscape) = スマホ(横向き)での列の個数
・Number of columns (Phone portrait) = スマホ(縦向き)での列の個数
列の数が多いほど画像は小さくなるので、プレビューで確認しながら個数を設定しよう。

キャプションの設定

キャプションの大きさや位置などを調整するには、「Captions」で設定できる。
無料版では動作しない項目も多いので、ここでは主要なものだけ紹介する。
・Caption icon = キャプションの頭にアイコンを設定できる。タイトルにアイコンが挿入される訳ではないので注意しよう。アイコンを使う場合は、タイトルは空欄にした方が見栄えがいいかと思う
・Caption icon color = アイコンの色を選べる
・Caption icon size (px) = アイコンのサイズを選べる。なお、アイコンのサイズはキャプションと同じか、1px大きくするとバランスがいいだろう
・Caption font size (px) =キャプションのサイズを選べる。デフォルトでは12pxだが、少し大きすぎるので、7pxぐらいを個人的にはオススメする
・Caption frame = キャプションに枠を付けれる
・Caption frame color = 枠の色を選べる
・Caption color = キャプションの色を選べる
・Caption background color = マウスオーバー(画像にマウスを置いたとき)したときの背景色を選べる
・Caption opacity (%)= 背景色の透明度を選べる。数値が低いほど下の画像が透けて見える
・WordPress caption field = メディアライブラリーに設定した画像に対して、どの部分をキャプションに使うか設定できる。つまり、タイトルをキャプションとしても表示することが可能だ。その場合は「Title」を選択。キャプションを表示させないなら「Don’t use captions」を選ぶとキャプションが非表示になる
・WordPress title field = ディアライブラリーに設定した画像に対して、どの部分をタイトルに使うか設定できる。タイトルを表示させないなら「Don’t use title」を選ぶとキャプションが非表示になる
・Caption Vertical Alignment = キャプションの位置を設定できる
・Caption Horizontal Alignment = キャプションの並びを設定できる
・Title font size (px) =タイトルのサイズを選べる。デフォルトでは14pxだが、ここも10pxくらいが綺麗なサイズだろう

デモサイト

より「Final Tiles Gallery」を知りたい冒険者のために、公式が公開しているデモサイトのリンクを貼っておく。

デモは有料版を使っているので、無料版ではできない動作もあるので注意しよう。

【Final Tiles Gallery デモサイト】
https://www.final-tiles-gallery.com/wordpress#demo

主要な設定は以上となる。

 画像ギャラリーの設置は「Final Tiles Gallery」を使おう
 キャプション、タイトルの設定などをしよう
 「Final Tiles Gallery」を表示させるにはショートコードを使おう
「Final Tiles Gallery」はデフォルトでも十分使えるくらい高機能だが、ちょっと設定を変えればより美しいギャラリーを作ることができる。
無料でも十分なくらいだが、さらに深い表現をしたい場合は有料版も検討してみていいかと思う。
では、冒険者諸君、GOOD QUEST !!