トップでも投稿でも映える! 無料ギャラリープラグイン「Modula」

WordPressには多くのプラグインがあります。今回は、その中でも写真のギャラリーに使えるプラグインを紹介いたします。

ギャラリーのプラグインは多いですが、その中でも優れたプラグインだと思います。設定がとても簡単で、レスポンシブデザインに対応して、シンプルで美しいギャラリーが作成できます。写真をクリックすると拡大され、モダールウィンドウで写真が見れます。ギャラリーの種類も3種類あり、用途に合わせて使い分けることができます。

今回は、筆者が10年くらい前に撮影したフランス旅行の写真をモチーフに、ギャラリーを作成していきながら、Modulaの使い方、デモで使用した設定を紹介していきます。なお、このプラグインは有料版(Premium)もありますが、無料版のみを使用していきます(無料版で機能は十分だと思います)。

1.Modulaをダウンロードして有効化

WordPressダッシュボードのプラグイン＞新規追加＞検索で「Modula」と入力すれば、トップに出てきます。ダウンロードして、有効化します。

左上のプラグインです。

2.写真を選択しギャラリーを作成

ダッシュボードのサイドメニューにModulaが出てきます。Modula＞Galleriesをクリックします。タイトルを入力し、メディアライブラリーから写真を複数枚選択し、ギャラリーを作成します。

「Add New」ボタンをクリック

「Select from Library」ボタンをクリック

ギャラリーに入れたい写真を全て選択。右下のギャラリーに追加ボタンをクリック

右側の「Save Gallery」(2回目以降は「Update Gallery」)ボタンで保存します。

3.ギャラリーの設定をする

下にスクロールしていくと設定画面があります。設定項目は多いですが、PROとなっているところは無料版では設定できないので、比較的シンプルに設定できます。大きく分けて３つのスタイルがあり、1番上の歯車マークの「General」の「Galley Type」で設定します。

Gallery Typeによって設定項目は異なります。

Creative Gallery

高さ、幅を指定して、そのグリッドの中に、写真を自動でレイアウトされます。デバイスごとの高さ指定で、1画面で見せれるので、トップページのアイキャッチや、サムネイルとして使うことができます。写真のトリミングは縦長、横長関係なく、ランダムに行われます。

「Gutter」は写真の隙間のピクセル数で、今回は0に設定し、隙間なく敷き詰めるようにします。「Random Factor」は、0にすると統一形状、100にすると細長い長方形などグリッドがバラバラになります。Suffle Imageをチェックすると、写真の順番がランダムに表示され、リロードごとに、写真の順番が変更になります。

項目	説明	設定値
Gallery Type	スタイル	Creative Gallery
Gutter	写真と写真の隙間	0
Width	ギャラリーの幅	100%
Image Size	写真のサイズ	Medium
Height	ギャラリーの高さ	800px
Random factor	トリミング形状。0は統一。100はバラバラ。	50
Shuffle images	写真がランダムな順番で表示	チェック有

Custom Grid

マニュアルで、自由に写真の大きさ、配置、トリミング形状を設定できます。写真右下の三角を移動すると、トリミング形状、サイズが変更します。

右下の三角形を移動してサイズ、トリミングを変更

みっちり写真を敷き詰めず、間にグリッドの隙間を入れることもでき、そこから背景を見せることができます。また、スマホでも、PCでも設定したレイアウトは変わりません。手間はかかりますが、ギャラリーのレイアウトにこだわり、手動で行いたい場合使用します。

項目	説明	設定値
Gallery Type	スタイル	Custom Grid
Gutter	隙間	5px(SP)〜10px(PC)
Image Size	写真のサイズ	Medium

Masonry

縦、横の写真サイズを考慮して、自動でレイアウトされます。

レイアウトは、レスポンシブデザイン対応のAutomaticと1カラム(One Column)から6カラム(Six Column)の固定、7種類から選べます。今回は、スマホ対応も考慮してAutomaticに設定しました。簡単に写真のイメージを損なうことなく配置されるので、スッキリ見せる時におすすめです。今回は、「Shuffle Images」をチェックせず、順番は、写真の入れ替えで指定しました。

項目	説明	設定値
Gallery Type	スタイル	Masonry
Column Type	レイアウト	Automatic
Low Height	写真の高さの最低値	250px
Last Row Alignment	最後の写真の位置	Justify
Gutter	隙間	5px(SP)〜10px(PC)
Width	ギャラリーの幅	100%
Image Size	写真のサイズ	Medium
Shuffle Images	写真がランダムな順番で表示	チェック無

4.投稿ページに反映させる

投稿ページなどに表示するには、ギャラリーのショートコードを使います。「Gallaries」の「Shortcode」のショートコード右のマークをクリックします。これでコピー完了です。

今回は、投稿ページである「BLOG」に反映させます。新規追加で新しいページを作成し、ブロック＞ウィジェット＞ショートコードをクリックします。先ほどコピーした、ショートコードをペーストします。これで、完了です!

テキストボックスにショートコードをペースト

下書き保存し、プレビューを表示させ、ギャラリーを確認します。変更したい場合は、ギャラリー左下の「Edit Gallery」をクリックします。Modulaの編集画面に移動するので、写真やスタイルを変更します。下書きの状態で修正、プレビュー確認を繰り返し、OKになったら公開しましょう。

「Edit Gallery」をクリックすると

編集画面に移動します。

実際にWebサイトで使うときは、写真を入れ替えるだけで好きな時に簡単に更新ができます。また、新規にギャラリーを追加していき、アーカイブで過去のギャラリーを見ることもできます。全幅でアイキャッチとしてギャラリーを表示させたり、用途に合わせて色々使えそうですね!

CXG DESIGNでは、プラグインの設定を行い、簡単に更新できるWordPressサイトを作成しています。ご依頼の方は、コンタクトフォームよりお問い合わせください。