Pinterestや各種ギャラリーサイトでよく見る、サイズがバラバラな写真をタイル状に敷き詰めたMasonry（メイソンリー）レイアウトを、Studioで実装する方法を解説します。
概要
CSSだけで実装するため、Studio Freeプランでも使用可能。
レスポンシブ対応。
CMS（動的リスト）で管理も可能。
1．通常時と同じようにリストを作成
普段と同じようにリストを作成します。画像はimgモードです。<li>のボックスの横幅はautoにしておきます。
2．IDの設定
必要なIDはmasonryとloadmoreの2つだけです。
作成手順
- <ul>に対してID masonry を設定。
- CMSを使った動的リストの場合は「loadmore」のボタンが入った親ボックスに対してID loadmore を設定。
3．CSSを貼る
Embedボックスに以下のコードを貼り付けます。
<style>
/* Masonry 本体 */
#masonry{display:block!important;column-count:5;column-gap:16px;margin:0;padding:0;list-style:none;}
#masonry>*{break-inside:avoid;margin:0 0 16px;}
#masonry img{width:100%;height:auto;display:block;}
/* レスポンシブ */
@media(max-width:1280px){#masonry{column-count:4;}}
@media(max-width:1024px){#masonry{column-count:3;}}
@media(max-width:768px ){#masonry{column-count:2;}}
@media(max-width:359px ){#masonry{column-count:1;}}
/* Load More を下部中央に */
#loadmore{
column-span:all; /* Columns から独立してフル幅 */
-webkit-column-span:all;
display:flex!important; /* 中央寄せ */
justify-content:center;
width:100%;
}
</style>左サイドパネル「追加」の中にあるEmbed「Blank」を追加し、横幅と縦幅は0px、右サイドパネルの埋め込みコードの箇所に上記のコードを入力します。
「column-count:5」や「column-gap:16px」の値を変更すればPCでの列数やアイテムの間隔を変更できます。
レスポンシブでの列数は「レスポンシブ」の箇所にある値を変更してください。
動的リストを使わない場合は/* Load More を下部中央に */の箇所は削除して構いません。
ギャップ無し・写真の下にタイトルを記載した例
懸念点
- 動的リスト使用時、追加読み込みで既存アイテムの位置が動く
Load Moreのボタンで追加のアイテムを読み込みすると、既存のアイテムの位置にも影響が及んでしまうため、使いづらさがあります。
すべての環境で検証できているわけではないため、各自検証をお願いします。
まとめ
動的リストで50件以上表示するときの挙動に課題は残るものの、StudioのFreeプランでもメイソンリーレイアウトを実装することができます。
ポートフォリオや小規模なギャラリーサイトなどで、どうしてもメイソンリーレイアウトが使いたいときにぜひ活用いただければと思います。
