![](https://cxg-design.jp/wp-content/uploads/2023/09/86b88964b5b0f4e9511df7de32e6b943.png)
トップでも投稿でも映える! 無料ギャラリープラグイン「Modula」
WordPressには多くのプラグインがあります。今回は、その中でも写真のギャラリーに使えるプラグインを紹介いたします。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
ギャラリーのプラグインは多いですが、その中でも優れたプラグインだと思います。設定がとても簡単で、レスポンシブデザインに対応して、シンプルで美しいギャラリーが作成できます。写真をクリックすると拡大され、モダールウィンドウで写真が見れます。ギャラリーの種類も3種類あり、用途に合わせて使い分けることができます。
今回は、筆者が10年くらい前に撮影したフランス旅行の写真をモチーフに、ギャラリーを作成していきながら、Modulaの使い方、デモで使用した設定を紹介していきます。なお、このプラグインは有料版(Premium)もありますが、無料版のみを使用していきます(無料版で機能は十分だと思います)。
1.Modulaをダウンロードして有効化
WordPressダッシュボードのプラグイン>新規追加>検索で「Modula」と入力すれば、トップに出てきます。ダウンロードして、有効化します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/b0d21f758289b90fbffbf268d830e1d5.png)
左上のプラグインです。
2.写真を選択しギャラリーを作成
ダッシュボードのサイドメニューにModulaが出てきます。Modula>Galleriesをクリックします。タイトルを入力し、メディアライブラリーから写真を複数枚選択し、ギャラリーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/65e1aa24ec02b4b5f4eefaefa86f02f8-2000x1150.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/166cab191b7ebc67785cecf289548bd3-2000x1153.png)
「Add New」ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/09/4f551b10b42acdcc22cf0da0c3286961-2000x1154.png)
「Select from Library」ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/09/2a6a5872c7b6097643e74222c036dc0f-2000x1157.png)
ギャラリーに入れたい写真を全て選択。右下のギャラリーに追加ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/09/23dfd140beebc1a9d4690c98727218ef-2000x1155.png)
右側の「Save Gallery」(2回目以降は「Update Gallery」)ボタンで保存します。
ギャラリーの保存を忘れずに
Modulaは保存を忘れても、アラートが出ないので、気をつけてください。オートセーブ機能もありません。なので、写真を追加・変更時、次項の設定変更時には必ず保存してください。保存せずに別ページに移動したら、設定したものが全てなくなります。
3.ギャラリーの設定をする
下にスクロールしていくと設定画面があります。設定項目は多いですが、PROとなっているところは無料版では設定できないので、比較的シンプルに設定できます。大きく分けて3つのスタイルがあり、1番上の歯車マークの「General」の「Galley Type」で設定します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/5a677ce587badb11e9c2d988d3acb17c-2000x1156.png)
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
マニュアルで、自由に写真の大きさ、配置、トリミング形状を設定できます。写真右下の三角を移動すると、トリミング形状、サイズが変更します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/ec8a0d0a1e919f22550dd1a1d92248f4-2000x1185.png)
右下の三角形を移動してサイズ、トリミングを変更
みっちり写真を敷き詰めず、間にグリッドの隙間を入れることもでき、そこから背景を見せることができます。また、スマホでも、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 | 写真がランダムな順番で表示 | チェック無 |
その他の設定
Modulaには他にもキャプション、ロード、SNS等に関するものがあります。これらは共通で設定してありますが、今回のデモは、ほぼデフォルトです。ホバーアニメーションは、多くのバリエーションがありますが、ほとんど有料のPremium版です。
4.投稿ページに反映させる
投稿ページなどに表示するには、ギャラリーのショートコードを使います。「Gallaries」の「Shortcode」のショートコード右のマークをクリックします。これでコピー完了です。
![](https://cxg-design.jp/wp-content/uploads/2023/09/24bb507ca308c443a305ac535c1f7eb0-2000x1188.png)
今回は、投稿ページである「BLOG」に反映させます。新規追加で新しいページを作成し、ブロック>ウィジェット>ショートコードをクリックします。先ほどコピーした、ショートコードをペーストします。これで、完了です!
![](https://cxg-design.jp/wp-content/uploads/2023/09/fde81ff9e02fd0bad3df3f67ea09b99a-2000x1189.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/af3f5d3f0b013ec870696eb3616b8bba-2000x1183.png)
テキストボックスにショートコードをペースト
下書き保存し、プレビューを表示させ、ギャラリーを確認します。変更したい場合は、ギャラリー左下の「Edit Gallery」をクリックします。Modulaの編集画面に移動するので、写真やスタイルを変更します。下書きの状態で修正、プレビュー確認を繰り返し、OKになったら公開しましょう。
![](https://cxg-design.jp/wp-content/uploads/2023/09/919e91dd8c678a25b71c9bd2862df737-2000x1186.png)
「Edit Gallery」をクリックすると
![](https://cxg-design.jp/wp-content/uploads/2023/09/616c4b612e1162db4f8db685c2d3bcb7-2000x1188.png)
編集画面に移動します。
実際にWebサイトで使うときは、写真を入れ替えるだけで好きな時に簡単に更新ができます。また、新規にギャラリーを追加していき、アーカイブで過去のギャラリーを見ることもできます。全幅でアイキャッチとしてギャラリーを表示させたり、用途に合わせて色々使えそうですね!
CXG DESIGNでは、プラグインの設定を行い、簡単に更新できるWordPressサイトを作成しています。ご依頼の方は、コンタクトフォームよりお問い合わせください。