「複数の画像を自由にレイアウトしたい」
「サイズの異なる画像でも綺麗に並べたい」
店舗サイトやECサイトの商品写真、カメラマンやデザイナーのポートフォリオなど、WordPressで複数の画像をギャラリー表示したい場面は多いと思います。
ただ、WordPress標準のギャラリーブロックでは、画像サイズや配置を細かく調整するのは難しいです。
そこで今回は、画像ギャラリーを綺麗にレイアウトできるプラグイン「Modula Image Gallery」をご紹介します。直感的な操作で画像のサイズ感や配置、画像間の余白などを細かく調整できます。
目次
Modula Image Galleryの機能概要
Modula Image Galleryは、複数の画像を綺麗に配置するためのプラグインです。主な機能は次のとおりです。
当記事では無料版で使える機能のみをご紹介します。
- 画像ごとに表示サイズを変更できる
- 画像の配置をドラッグ&ドロップで調整できる
- 画像間のスペースをデバイスごとに調整できる（PC・タブレット・スマホ）
- 画像クリックでポップアップ表示可能
- 画像をランダムに組み合わせた自動配置が可能
- 異なるサイズの画像もメイソンリーレイアウトで配置可能
たとえば、こんなギャラリーをすぐにつくれます。
ギャラリーの作成例
並び替えたり、表示サイズも自由に変更可能です。
プラグインのインストール
管理画面から「Modula Image Gallery」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/plugins ディレクトリにアップした後、管理画面から有効化してください。
プラグインのインストールにつきましてはこちらで詳しく解説しています。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
ギャラリーのつくり方
ギャラリーは、次の3ステップで完成します。
- ギャラリーに追加する画像を選ぶ
- ギャラリーをお好みに編集する
- ショートコードを本文内に挿入する
1. ギャラリーに追加する画像を選ぶ
プラグインを有効化したら、ダッシュボードに追加された「Modula」をクリックして、「Add New Gallery」から新規作成します。
ギャラリー作成画面が開くので、ここから作成していきます。
ギャラリー作成画面
通常の記事のようにタイトル（管理用の名前）を入れて、「Add New」より画像を追加します。
「Add New」を押したら、「Upload」か「From library」からギャラリーに追加する画像を選択します。
2. ギャラリーをお好みに編集する
画像を追加したらギャラリーをお好みのレイアウトやサイズ感に設定します。
下部に用意されている「Settings」では、設定項目が豊富に用意されていますが、実際に使う項目は限られています。
基本は「General」のみを編集するだけでOKです。
まずは、Gallery Typeを次の3種類から選択します。いろいろ試してみるとおもしろいです。
3種のGallery Type
| タイプ | 特徴 | 向いているケース |
|---|---|---|
| Creative | ランダムレイアウトのデザイン性の高いギャラリー | 雰囲気重視のポートフォリオ（※一部トリミングあり） |
| Custom | 画像の配置や表示サイズ、間隔を自分で決められる自由度の高いギャラリー | レイアウトを細かくコントロールしたい場合 |
| Masonry | 画像の高さに応じてタイル状に並ぶ、Pinterest風のレイアウト | サイズがバラバラな画像を綺麗に並べたい場合 |
※Creativeタイプは画像がトリミングされるため、構図が重要な画像には不向きです。
Customタイプでは、ドラッグ&ドロップで直感的に操作できるので、思い通りのレイアウトでギャラリーをつくれます。
ドラッグ&ドロップで操作可能
Gallery Typeごとに設定できる項目は変わりますが、基本的な設定項目は次のとおりです。
Settingsに用意されている設定項目
| 設定項目 | 設定内容 |
|---|---|
| Space between gallery images | 画像同士の余白の間隔を設定 |
| Gallery Images Size | 各画像の表示サイズを設定 |
| Gallery width（Creative・Masonryのみ） | ギャラリー全体の横幅を設定 |
| Shuffle images（Creative・Masonryのみ） | 読み込みごとに画像の並び順をシャッフルする |
| Gallery height（Creativeのみ） | ギャラリー全体の高さを設定 |
| Randomize images（Creativeのみ） | 読み込みごとにレイアウトをランダムに組み替える設定（0で無効、数値が高いほど変化が大きい） |
| Number of Columns（Masonryのみ） | 表示するカラム数（列数）を設定 |
3. ショートコードを本文内に挿入する
ギャラリーの設定が一通り済んだら、下記箇所のショートコードを記事やページ本文内の任意の箇所にコピペします。
これで作成したギャラリーが表示されます。
このプラグインの惜しいところは、ショートコードを挿入するまではギャラリーを確認できない点です。
まとめ
Modula Image Galleryは、画像ギャラリーを自由にレイアウトしたい方に最適なWordPressプラグインです。
標準のギャラリー機能では難しい次のような設定も直感的に設定できます。
- 画像サイズの個別調整
- ドラッグ&ドロップによる配置
- ランダムレイアウト
シンプルな操作でデザイン性の高いギャラリーを作りたい方は、ぜひ一度試してみてください。
あわせて読みたい画像関連の記事
サイト内で画像を大量に使う方は、サイトを軽量化するためにWebP形式に変換するのがおすすめです。
Webで使われる一般的な画像フォーマット（拡張子）はJPEG、GIF、PNGの3つです。 ですが、いずれも80年・90年代から長く使われている画像フォーマットであり、昨今ではより軽量化されたフォーマットが使われることが増えました。その代表格がWebPとAVIFです。 WebPやAVIF形...
Madユーザー限定ですが、複数の画像を1枚にしたい場合はこんなツールも便利です。
複数の画像を1枚にまとめたいとき、Photoshopなどの高機能な画像編集ソフトより圧倒的に使いやすく、複数の画像を並べることのみに特化した便利なアプリがあります。 そこで今回は、Macユーザー向けにワンコインで使える画像結合アプリをご紹介いたします。 「Tunacan 2」のダウンロー...
画像の見せ方のコツは下記記事も参考になるかもしれません。
WordPressのサイトやブログには、簡単に画像を挿入できます。 >> WordPressの画像挿入方法 挿入自体は簡単ですが、目的に合わせて少し工夫するだけでリッチな印象を与えたり、内容がより伝わりやすくなります。そこで今回は、ひと工夫で印象が変わる画像の見せ方を5つご紹介いたします。 ...
WordPressテーマ集
コメント