# ページのテンプレート設定について

**URL:** <https://community.shopify.com/t/topic/340510>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [July 18, 2024, 10:30am UTC](https://community.shopify.com/t/topic/340510 "2024-07-18T10:30:28Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Shopifyテーマ「Showcase」の「Collection list」テンプレートを使用したページ構成の変更に関する質問です。

**現状：**
- コレクションへのリンクを画像で配置
- 画像が2つ横並びで表示されている（各50%幅）

**希望する変更パターン：**
1. 1コレクションを1つずつ縦に配置
2. 2コレクション横並びで、左に画像・右に文章を配置し、それぞれに同じリンクを設定

**回答内容：**
- パターン①については、CSSで実現可能
- 現在50%幅で表示されている要素を100%に変更すれば縦並びになる
- 具体的なCSS調整方法として、該当クラスの`width: 100%;`設定が提案されている
- クラス名はプレビューリンクから確認したものなので、実際の環境に合わせて調整が必要

※パターン②の実現可能性については明示的な回答なし

<div class="post-metadata">

**Author:** ![chikakoyajima](https://avatars.discourse-cdn.com/v4/letter/c/e9c0ed/32.png) [@chikakoyajima](https://community.shopify.com/u/chikakoyajima)\
**Post date:** [July 18, 2024, 10:30am UTC](https://community.shopify.com/t/topic/340510/1 "2024-07-18T10:30:28Z")

</div>

お世話になります。shopifyテーマで「showcase」を使用しています。

「Collection list」のテンプレートを使って各コレクションへのリンクを画像で配置しています。

イメージ：[https://chikakoyajima.com/collections](https://chikakoyajima.com/collections)

以下2パターンのどちらかにページ構成を変形したいと考えているのですが、

可能でしょうか。。恐れ入りますが、方法をご教示いただけますと幸いです。

どうぞよろしくお願いいたします。

**①コレクションが1つずつ閲覧できる仕様**

（現在のテンプレートですと横配置2つ以上の設定しかできません）

 ![IMG_8694.jpeg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/5/b54da1b7ea9f02c0514b0229c2c0483984f8347e.jpeg)

**②コレクション1つずつ見える仕様で、左画像・右文章それぞれに同じリンクを設定**

（Media with texitも試してみましたが、画像自体にリンクをつけることができず断念しました・・）

 ![IMG_8695.jpeg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/b/0bebb926633bb3bd6a657ed1c20d0880a26d875b.jpeg)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [July 19, 2024, 7:11am UTC](https://community.shopify.com/t/topic/340510/2 "2024-07-19T07:11:15Z")

</div>

質問拝見しました。

プレビューリンクを拝見しました。

現在画像が二つ並んでいる状況で100%の幅を50%ずつでふたつ表示がされていました。

したがってこの50%で表示されている要素を100%にしてあげれば①のイメージになるかと存じます。

以下CSSで調整可能かと思われますのでご参考にしていただければ幸いです。

```markup
column.half {
    width: 100%;
}

```

クラス名に関してはプレビューリンクからのものになりますのでそのまま使えない場合は任意でクラス名を変更いただければと思います。

なにかご質問があれば、お気軽にご相談ください。  
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス