shopifyのカスタムリキッドで
コラージュを作成する方法

shopifyでもコラージュというセクションは用意されているのですが、画像の枚数やレイアウトが限定されているので、gridを使って独自に作成する方法を探ってみました。

完成イメージ

今回やりたいことは上の画像のように以下のように設置することです。

PC	SP
・左30%：テキスト ・右70%：コラージュ画像	・上：テキスト ・下：コラージュ画像

用意するもの

• 載せたい画像（画像全体を表示したい場合はレイアウトに合うサイズで用意）
• レイアウトイメージ（頭の中に思い描くでも、実際に描いてみるでも）

コラージュの作り方

htmlでテキスト箇所と画像のソースを記述し、CSS箇所でgridを使ってレイアウトを指定しました。

columnとrowで、どこからどこまでを埋めてそれぞれの枠を作るかを指定します。

column（列）とrow（行）

例えば、pic1という画像を、左上から右に2マス、下に2マスの合計4マスに配置したい場合（上の画像のように）、次のように指定します。

これは、1行目から3行目までの行と、1列目から3列目までの列を指定することで、左上から右に2マス、下に2マスの合計4マスを占める領域にpic1を配置するという意味です。

完成イメージ箇所で表示したレイアウトの作り方

前述の完成イメージに使用した画像は、１～６まですべて同じサイズを使用し、「object-fit: cover;」で画像がその枠にぴったり合うように調整しているため、はみ出た部分はトリミングされています。

トリミングされずに画像全体を表示させるためには、予め指定する枠の縦横比に合わせた画像を用意しましょう。

以下は必要箇所を書き換えるだけで使えるコードの例です。

<div id="collage">　<!--わかりやすいid値を指定してください--> <div class="collage-text">　<!--わかりやすいclass名を指定してください（ほかとの重複を避けましょう）--> <h3><span id="toc6">コラージュテキスト見出し</span></h3>　<!--入れたい見出しやタグへ変更してください--> <p>（テキスト）PCでは6枚、SPでは3枚使ったコラージュのイメージです。</p>　<!--入れたいテキストへ変更してください--> </div> <div class="pic1"><!--わかりやすいclass名を指定してください（ほかとの重複を避けましょう）--> <img alt decoding="async" src=""><!--1つめの画像を指定--> </div> <div class="pic2"><!--わかりやすいclass名を指定してください（ほかとの重複を避けましょう）--> <img alt decoding="async" src=""><!--2つめの画像を指定--> </div> <div class="pic3"><!--わかりやすいclass名を指定してください（ほかとの重複を避けましょう）--> <img alt decoding="async" src=""><!--3つめの画像を指定--> </div> <div class="pic4"><!--わかりやすいclass名を指定してください（ほかとの重複を避けましょう）--> <img alt decoding="async" src=""><!--4つめの画像を指定--> </div> <div class="pic5"><!--わかりやすいclass名を指定してください（ほかとの重複を避けましょう）--> <img alt decoding="async" src=""><!--5つめの画像を指定--> </div> <div class="pic6"><!--わかりやすいclass名を指定してください（ほかとの重複を避けましょう）--> <img alt decoding="async" src="https://bizmatcha.website/wp-content/uploads/2024/07/pic6.png"><!--6つめの画像を指定--> </div> </div> <style> .collage-text{ border:1px solid green; padding:5px; } img { width: 100%; height: 100%; object-fit: cover; /* 画像を要素に合わせてトリミング */ } @media (min-width: 769px) { #collage { display: grid; grid-template-columns: 30% 14% 14% 14% 14% 14%; /* テキスト部分30%と画像部分70% */ grid-template-rows: repeat(6, 1fr); /* 6行 */ gap: 0; height: auto; max-height: 400px; max-width: 1200px; margin: auto; } .collage-text { grid-column: 1 / 2; /* テキスト部分は1列目に固定 */ grid-row: 1 / 7; /* テキスト部分は全体の高さに合わせる */ display: flex; flex-direction: column; justify-content: center; } .pic1 { grid-column: 2 / 3; grid-row: 1 / 7; /* 左端：2列、6行 */ } .pic2 { grid-column: 3 / 6; grid-row: 1 / 3; /* 左端から2番目上段：4列、2行 */ } .pic3 { grid-column: 3 / 5; grid-row: 3 / 7; /* 左端から2番目下段：4列、4行 */ } .pic4 { grid-column: 6 / 7; grid-row: 1 / 4; /* 右端上段：3列、2行 */ } .pic5 { grid-column: 5 / 6; grid-row: 3 / 4; /* 右端下段：3列、4行 */ } .pic6 { grid-column: 5 / 7; grid-row: 4 / 7; /* 右端下段：3列、4行 */ } } @media (max-width: 768px) { #collage { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3列 */ grid-template-rows: auto 1fr 2fr; /* 高さを調整 */ height: auto; max-height:400px; } .collage-text { grid-column: 1 / 4; /* テキストは3列を占める */ grid-row: 1 / 2; /* 最初の行に表示 */ text-align: center; /* 中央に配置 */ } .pic1 { grid-column: 1 / 4; /* 画像は3列を占める */ grid-row: 2 / 3; /* 2番目の行に表示 */ max-height:100px; } .pic2 { grid-column: 1 / 2; /* 左側に表示 */ grid-row: 3 / 4; /* 高さを調整（1行分） */ max-height:200px; } .pic3 { grid-column: 2 / 4; /* 右側に表示 */ grid-row: 3 / 4; /* 高さを調整（1行分） */ max-height:200px; } .pic4, .pic5, .pic6 { display: none; /* SPでは非表示にする */ } } </style> コピー

コードが完成したら、shopifyのテーマカスタマイズ画面から、カスタムLiquidセクション内に貼り付ければOK。

まとめ

shopifyで好きな枚数の画像を好きなようにコラージュで表示させるには、カスタムliquidセクションに、使いたい画像とgridでのレイアウト指定してしまうのが便利です。

慣れるまでは予め、どのように配置するかをグリッド線とともに図示してからコーディングすることをおすすめします。