アイキャッチ画像の一覧を表示するプラグインです。
記事に設定したアイキャッチ画像のフルサイズをPinterest の画像一覧のように縦横比の異なる画像やカードを、レンガ（masonry）を積み上げるように隙間なく配置するレイアウトできます。
アイキャッチ画像だけで作る美しい記事一覧を作成することができるので写真やイラストなど作品を展示する個人サイトなどに最適です。
Masonryレイアウトとは
高さがバラバラな要素を、レンガ（masonry）を積み上げるように隙間なく配置するレイアウト手法です。
Pinterestっぽい見た目、と言うと一番イメージしやすいですね。
特徴
- 要素の高さが不揃いでもOK
- 縦方向の余白が最小限（普通のグリッドよりスカスカしない）
- レスポンシブと相性が良い
- 画像・カード・ブログ一覧によく使われる
通常のCSS GridやFlexだと「行」が揃うので、背の低い要素の下に無駄な空白ができますが、
Masonryは上から順に空いているところへ詰めていくのがポイントです。
よくある使いどころ
- 画像ギャラリー
- ブログカード一覧
- 実績・ポートフォリオ
- 商品カード一覧（説明文の長さが違う場合）
MasonryレイアウトができるWordPressプラグイン比較
「Masonry Eyecatch」以外にMasonryレイアウトができるWordPressプラグインを調べましたが少なくても日本語では存在しないようです。
公式では海外製のそれっぽいものがいくつか確認できます。
https://ja.wordpress.org/plugins/tags/masonry
WordPressプラグイン「Masonry Eyecatch」
WordPressプラグイン「Masonry Eyecatch」は記事のアイキャッチ画像をフルサイズ画像を隙間なく並べます。
画像をクリックするとオーバレイで拡大画像を表示したり該当記事へ遷移するなどカスタマイズも可能です。
- フルサイズ画像を使用（縦横比を保持）
- 縦横比の異なる画像を隙間なく配置
- レスポンシブ対応（画面サイズに応じてカラム数が自動調整）
- デスクトップ: 4列
- タブレット（1200px以下）: 3列
- モバイル（768px以下）: 2列
- 小画面（480px以下）: 1列
「Masonry Eyecatch」サンプル
Masonryレイアウト
当サイトのアイキャッチ画像一覧です。
クリックでオーバーレイの拡大画像になります。
正方形の一覧
クリックで該当記事へ遷移します。
「Masonry Eyecatch」の使い方
プラグインを有効化して下記のショートコードを入力します。
正方形の一覧にしたときは masonry="0" にしてください。
// カテゴリーID 5 のみ表示
[eyecatch-list category="5"]
// カテゴリーID 5, 8, 2 のいずれかに属する投稿を表示
[eyecatch-list category="5,8,2"]
// Masonryレイアウト + カテゴリーフィルタリング + 記事遷移
[eyecatch-list masonry="true" category="5" overlay="0"]| masonry="0" | 0 で正方形のリスト、1 でフルサイズのmasonryレイアウト |
| category="5,8,2" | 表示したいカテゴリーを指定します |
| overlay="0" | 1 でオーバーレイ、0 で該当記事へのリンクになります |
記事数（アイキャッチ画像数）が少ないと綺麗に並びません。最低でも8記事ぐらいは必要だと思います。
「Masonry Eyecatch」ダウンロード
WP Masonry Layoutをダウンロードv1.3.0- 第三者への無断配布を固く禁じます。
- ご利用による如何なるトラブルの責任も負いかねます。自己責任にてご利用ください。
