# セクションで複数列を使った際のＰＣとスマホでテキスト位置を変更したい

**URL:** <https://community.shopify.com/t/topic/416966>\
**Category:** Shopify テーマ\
**Created:** [May 30, 2025, 12:57am UTC](https://community.shopify.com/t/topic/416966 "2025-05-30T00:57:48Z")\
**Posts on this page:** 10\
**Page:** 1

## AI-generated summary

DAWNテーマの複数列セクションで、PCとスマホでテキスト表示位置を変更する方法についての質問と解決。

**実現したい内容:**
キャプションと行の表示位置をデバイスごとに切り替えたい。

**提供された解決策:**
- `multirow.liquid`ファイルを編集
- スマホ用(`.sp-only`)とPC用(`.pc-only`)のクラスを追加
- メディアクエリ(`@media`)で750px以上の画面で表示を切り替え
- キャプションと見出しのコードを複製し、それぞれに専用クラスを付与

**追加の調整:**
質問者から行間を詰めたいという要望があり、以下のCSSが提案された:
- `.image-with-text__content`と`.image-with-text__text`のpadding/marginを0に設定
- スマホのみ適用(max-width: 749px)

**最終的な解決:**
他のCSSとの競合があったため、`!important`を追加することで意図したレイアウトを実現。質問者は満足のいく結果を得て解決済み。

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [May 30, 2025, 12:57am UTC](https://community.shopify.com/t/topic/416966/1 "2025-05-30T00:57:48Z")

</div>

現在DAWNを利用してサイトを作成しております。

複数列を利用してコンテンツを作っているのですが、ＰＣとスマホでテキストの表示位置を変更したいのですが、どのようにしてよいかわからず、質問させていただいております。

下記画像のようなことを実現したいのですが、お知恵をお貸しいただけますと幸いでございます。

よろしくお願いいたします。

 ![サンプル.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/a/a32ed327da92c62149f74abaa123712416703e1b.jpeg)

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [May 30, 2025, 9:01am UTC](https://community.shopify.com/t/topic/416966/2 "2025-05-30T09:01:21Z")

</div>

@toot-pm 様

ご質問内容は **キャプション** と **行** をスマホの際表示位置を変えたいと言う認識で回答させていただきます。

**キャプション** と **行** の位置を変更するには、テーマファイルを編集する必要があります。

下記編集方法となります。

１．管理画面 \> オンラインストア \> 「・・・」 \> コードを編集をクリック

２．検索窓に「 **multirow.liquid** 」を入力しソートされた「 **multirow.liquid** 」を開く

３．52行目

```markup

```

の下に下記コードを追加

```markup

            {%- if block.settings.caption -%}
                

                  {{ block.settings.caption | escape }}
                

              {%- endif -%}
              {%- if block.settings.heading -%}
                ## 
                  {{ block.settings.heading }}
                
              {%- endif -%}
          

```

４．上記を追加した場合、90行目あたりにある下記コード

```markup

```

を下記に変更

```markup

```

５．上記を追加した場合、95行目あたりにある下記コード

```markup
## 

```

を下記に変更

```markup
## 

```

６．\*\*{% schema %}\*\*の上に下記コードを追加

```markup
{% style %}
  .sp-only { display:block; }
  .pc-only { display:none; }
  @media only screen and (min-width: 750px) {
   .sp-only { display:none; }
   .pc-only { display:block; }
  }
{% endstyle %}

```

以上でご要望の内容になるかと思われます。

スマホで画像との間をあけたい場合は、.sp-only { display:block; }にmarginや、paddingなどを追加しご調整ください。

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [June 3, 2025, 6:40am UTC](https://community.shopify.com/t/topic/416966/3 "2025-06-03T06:40:21Z")

</div>

回答ありがとうございます！

返信が遅くなり申し訳ございません。

教えていただいた通りに対応した結果、思い通りのレイアウトになりました。

あと1点だけご教授いただきたいのですが、出来上がったレイアウトの行幅を詰めたいのですが、どのように修正すればよいでしょうか？

お手数をおかけしますが、ご確認いただけますと幸いでございます。

よろしくお願いいたします。

 ![sample2.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/e/e5bc076cedad7aa9c203a47f37c4ab80b9183f8b.jpeg)

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 3, 2025, 8:58am UTC](https://community.shopify.com/t/topic/416966/4 "2025-06-03T08:58:28Z")

</div>

@toot-pm 様

スマホの際、画像下のテキストエリアの上下アキを詰めたい件ですが、

下記CSSを追加いただければ調整可能かと思います。

```markup
@media only screen and (max-width: 749px) {
  .image-with-text__content {
    padding-top: 0;
    padding-bottom: 0;
  }
  .image-with-text__text {
    margin-top: 0;
  }
}

```

**.image-with-text\_\_content** が画像下のボックス全体にかかっている上下アキを0に、

**.image-with-text\_\_text** が画像下のテキストの上アキを0にしています。

任意のサイズに調整いただければと思います。

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [June 3, 2025, 9:25am UTC](https://community.shopify.com/t/topic/416966/5 "2025-06-03T09:25:34Z")

</div>

早速の回答ありがとうございます。

下記のように入れてみたのですが、幅が詰まりません。

入れ場所・ソースが間違っていますでしょうか？

何度もお伺いしてしまい申し訳ございません。

 ![sample3.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/5/590b9e112e177e4721623506b1781c9dd7c98151.jpeg)

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 3, 2025, 10:57am UTC](https://community.shopify.com/t/topic/416966/6 "2025-06-03T10:57:06Z")

</div>

@toot-pm 様

入れていただいたコードは問題ないように思われます。

デフォルトの設定のままお送りしたコードを追加した場合、

下記添付のように表示されるかと思います。

 ![Qcoltd_0-1748947980789.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/4/482aeaba816e67352f7d51cbdc0dbe7b83951022.png)

実際のコードが分かりましたら、もう少し回答ができるかと思います。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [June 4, 2025, 3:36am UTC](https://community.shopify.com/t/topic/416966/7 "2025-06-04T03:36:23Z")

</div>

ありがとうございます。

画像ではないので、改行が左詰まりになっていますが、すべてのコードは下記となります。

ご確認いただけますと幸いでございます。

{{ ‘component-image-with-text.css’ | asset\_url | stylesheet\_tag }}

{%- style -%}  
.section-{{ section.id }}-padding {  
padding-top: {{ section.settings.padding\_top | times: 0.75 | round: 0 }}px;  
padding-bottom: {{ section.settings.padding\_bottom | times: 0.75 | round: 0 }}px;  
}

@media screen and (min-width: 750px) {  
.section-{{ section.id }}-padding {  
padding-top: {{ section.settings.padding\_top }}px;  
padding-bottom: {{ section.settings.padding\_bottom }}px;  
}  
}  
{%- endstyle -%}

{%- liquid  
if section.settings.image\_layout contains ‘right’  
assign odd\_class = ’ image-with-text\_\_grid–reverse’  
else  
assign even\_class = ’ image-with-text\_\_grid–reverse’  
endif

if section.settings.row\_color\_scheme == section.settings.section\_color\_scheme  
assign no\_content\_background = true  
endif

if settings.text\_boxes\_shadow\_opacity == 0 and settings.text\_boxes\_border\_thickness == 0 or settings.text\_boxes\_border\_opacity == 0  
assign no\_content\_styles = true  
endif

if settings.text\_boxes\_border\_thickness \> 0 and settings.text\_boxes\_border\_opacity \> 0 and settings.media\_border\_thickness \> 0 and settings.media\_border\_opacity \> 0  
assign borders\_class = ’ collapse-borders’  
endif

if no\_content\_background and no\_content\_styles  
assign padding\_class = ’ collapse-padding’  
endif

unless no\_content\_background and no\_content\_styles  
assign corners\_class = ’ collapse-corners’  
endunless  
-%}

{%- for block in section.blocks -%}

{%- if block.settings.caption -%}
{{ block.settings.caption | escape }}
{%- endif -%} {%- if block.settings.heading -%}
## {{ block.settings.heading }}
{%- endif -%}

{%- if block.settings.image != blank -%} {%- capture sizes -%} (min-width: {{ settings.page\_width }}px) {{ settings.page\_width | minus: 100 | divided\_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2) {%- endcapture -%} {{ block.settings.image | image\_url: width: 1500 | image\_tag: sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500' }} {%- else -%} {{ 'detailed-apparel-1' | placeholder\_svg\_tag: 'placeholder-svg' }} {%- endif -%}

{%- if block.settings.caption -%}

{{ block.settings.caption | escape }}

{%- endif -%} {%- if block.settings.heading -%}
## 

{{ block.settings.heading }}

{%- endif -%} {%- if block.settings.text -%}
{{ block.settings.text }}
{%- endif -%} {%- if block.settings.button\_label != blank -%} {{ block.settings.button\_label | escape }} {%- endif -%}

{%- endfor -%}

{% style %}  
.sp-only { display:block; }  
.pc-only { display:none; }  
@media only screen and (min-width: 750px) {  
.sp-only { display:none; }  
.pc-only { display:block; }  
}

@media only screen and (max-width: 749px) {  
.image-with-text\_\_content {  
padding-top: 0;  
padding-bottom: 0;  
}  
.image-with-text\_\_text {  
margin-top: 0;  
}  
}

{% endstyle %}

{% schema %}  
{  
“name”: “t:sections.multirow.name”,  
“class”: “section”,  
“disabled\_on”: {  
“groups”: [“header”, “footer”]  
},  
“settings”: [  
{  
“type”: “header”,  
“content”: “t:sections.multirow.settings.header.content”  
},  
{  
“type”: “select”,  
“id”: “image\_height”,  
“options”: [  
{  
“value”: “adapt”,  
“label”: “t:sections.multirow.settings.image\_height.options\_\_1.label”  
},  
{  
“value”: “small”,  
“label”: “t:sections.multirow.settings.image\_height.options\_\_2.label”  
},  
{  
“value”: “medium”,  
“label”: “t:sections.multirow.settings.image\_height.options\_\_3.label”  
},  
{  
“value”: “large”,  
“label”: “t:sections.multirow.settings.image\_height.options\_\_4.label”  
}  
],  
“default”: “medium”,  
“label”: “t:sections.multirow.settings.image\_height.label”  
},  
{  
“type”: “select”,  
“id”: “desktop\_image\_width”,  
“options”: [  
{  
“value”: “small”,  
“label”: “t:sections.multirow.settings.desktop\_image\_width.options\_\_1.label”  
},  
{  
“value”: “medium”,  
“label”: “t:sections.multirow.settings.desktop\_image\_width.options\_\_2.label”  
},  
{  
“value”: “large”,  
“label”: “t:sections.multirow.settings.desktop\_image\_width.options\_\_3.label”  
}  
],  
“default”: “medium”,  
“label”: “t:sections.multirow.settings.desktop\_image\_width.label”  
},  
{  
“type”: “select”,  
“id”: “image\_layout”,  
“options”: [  
{  
“value”: “alternate-left”,  
“label”: “t:sections.multirow.settings.image\_layout.options\_\_1.label”  
},  
{  
“value”: “alternate-right”,  
“label”: “t:sections.multirow.settings.image\_layout.options\_\_2.label”  
},  
{  
“value”: “align-left”,  
“label”: “t:sections.multirow.settings.image\_layout.options\_\_3.label”  
},  
{  
“value”: “align-right”,  
“label”: “t:sections.multirow.settings.image\_layout.options\_\_4.label”  
}  
],  
“default”: “alternate-left”,  
“label”: “t:sections.multirow.settings.image\_layout.label”  
},  
{  
“type”: “header”,  
“content”: “t:sections.multirow.settings.header\_2.content”  
},  
{  
“type”: “select”,  
“id”: “heading\_size”,  
“options”: [  
{  
“value”: “h2”,  
“label”: “t:sections.all.heading\_size.options\_\_1.label”  
},  
{  
“value”: “h1”,  
“label”: “t:sections.all.heading\_size.options\_\_2.label”  
},  
{  
“value”: “h0”,  
“label”: “t:sections.all.heading\_size.options\_\_3.label”  
},  
{  
“value”: “hxl”,  
“label”: “t:sections.all.heading\_size.options\_\_4.label”  
},  
{  
“value”: “hxxl”,  
“label”: “t:sections.all.heading\_size.options\_\_5.label”  
}  
],  
“default”: “h1”,  
“label”: “t:sections.all.heading\_size.label”  
},  
{  
“type”: “select”,  
“id”: “text\_style”,  
“options”: [  
{  
“value”: “body”,  
“label”: “t:sections.multirow.settings.text\_style.options\_\_1.label”  
},  
{  
“value”: “subtitle”,  
“label”: “t:sections.multirow.settings.text\_style.options\_\_2.label”  
}  
],  
“default”: “body”,  
“label”: “t:sections.multirow.settings.text\_style.label”  
},  
{  
“type”: “select”,  
“id”: “button\_style”,  
“options”: [  
{  
“value”: “primary”,  
“label”: “t:sections.multirow.settings.button\_style.options\_\_1.label”  
},  
{  
“value”: “secondary”,  
“label”: “t:sections.multirow.settings.button\_style.options\_\_2.label”  
}  
],  
“default”: “secondary”,  
“label”: “t:sections.multirow.settings.button\_style.label”  
},  
{  
“type”: “select”,  
“id”: “desktop\_content\_position”,  
“options”: [  
{  
“value”: “top”,  
“label”: “t:sections.multirow.settings.desktop\_content\_position.options\_\_1.label”  
},  
{  
“value”: “middle”,  
“label”: “t:sections.multirow.settings.desktop\_content\_position.options\_\_2.label”  
},  
{  
“value”: “bottom”,  
“label”: “t:sections.multirow.settings.desktop\_content\_position.options\_\_3.label”  
}  
],  
“default”: “middle”,  
“label”: “t:sections.multirow.settings.desktop\_content\_position.label”  
},  
{  
“type”: “select”,  
“id”: “desktop\_content\_alignment”,  
“options”: [  
{  
“value”: “left”,  
“label”: “t:sections.multirow.settings.desktop\_content\_alignment.options\_\_1.label”  
},  
{  
“value”: “center”,  
“label”: “t:sections.multirow.settings.desktop\_content\_alignment.options\_\_2.label”  
},  
{  
“value”: “right”,  
“label”: “t:sections.multirow.settings.desktop\_content\_alignment.options\_\_3.label”  
}  
],  
“default”: “left”,  
“label”: “t:sections.multirow.settings.desktop\_content\_alignment.label”  
},  
{  
“type”: “select”,  
“id”: “mobile\_content\_alignment”,  
“options”: [  
{  
“value”: “left”,  
“label”: “t:sections.multirow.settings.mobile\_content\_alignment.options\_\_1.label”  
},  
{  
“value”: “center”,  
“label”: “t:sections.multirow.settings.mobile\_content\_alignment.options\_\_2.label”  
},  
{  
“value”: “right”,  
“label”: “t:sections.multirow.settings.mobile\_content\_alignment.options\_\_3.label”  
}  
],  
“default”: “left”,  
“label”: “t:sections.multirow.settings.mobile\_content\_alignment.label”  
},  
{  
“type”: “header”,  
“content”: “t:sections.multirow.settings.header\_3.content”  
},  
{  
“type”: “color\_scheme”,  
“id”: “section\_color\_scheme”,  
“label”: “t:sections.all.colors.label”,  
“default”: “scheme-1”  
},  
{  
“type”: “color\_scheme”,  
“id”: “row\_color\_scheme”,  
“label”: “t:sections.multirow.settings.container\_color\_scheme.label”,  
“default”: “scheme-1”  
},  
{  
“type”: “header”,  
“content”: “t:sections.all.padding.section\_padding\_heading”  
},  
{  
“type”: “range”,  
“id”: “padding\_top”,  
“min”: 0,  
“max”: 100,  
“step”: 4,  
“unit”: “px”,  
“label”: “t:sections.all.padding.padding\_top”,  
“default”: 36  
},  
{  
“type”: “range”,  
“id”: “padding\_bottom”,  
“min”: 0,  
“max”: 100,  
“step”: 4,  
“unit”: “px”,  
“label”: “t:sections.all.padding.padding\_bottom”,  
“default”: 36  
}  
],  
“blocks”: [  
{  
“type”: “row”,  
“name”: “t:sections.multirow.blocks.row.name”,  
“settings”: [  
{  
“type”: “image\_picker”,  
“id”: “image”,  
“label”: “t:sections.multirow.blocks.row.settings.image.label”  
},  
{  
“type”: “text”,  
“id”: “caption”,  
“default”: “t:sections.multirow.blocks.row.settings.caption.default”,  
“label”: “t:sections.multirow.blocks.row.settings.caption.label”  
},  
{  
“type”: “inline\_richtext”,  
“id”: “heading”,  
“default”: “t:sections.multirow.blocks.row.settings.heading.default”,  
“label”: “t:sections.multirow.blocks.row.settings.heading.label”  
},  
{  
“type”: “richtext”,  
“id”: “text”,  
“default”: “t:sections.multirow.blocks.row.settings.text.default”,  
“label”: “t:sections.multirow.blocks.row.settings.text.label”  
},  
{  
“type”: “text”,  
“id”: “button\_label”,  
“default”: “t:sections.multirow.blocks.row.settings.button\_label.default”,  
“label”: “t:sections.multirow.blocks.row.settings.button\_label.label”,  
“info”: “t:sections.multirow.blocks.row.settings.button\_label.info”  
},  
{  
“type”: “url”,  
“id”: “button\_link”,  
“label”: “t:sections.multirow.blocks.row.settings.button\_link.label”  
}  
]  
}  
],  
“presets”: [  
{  
“name”: “t:sections.multirow.presets.name”,  
“blocks”: [  
{  
“type”: “row”  
},  
{  
“type”: “row”  
},  
{  
“type”: “row”  
}  
]  
}  
]  
}  
{% endschema %}

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 4, 2025, 6:07am UTC](https://community.shopify.com/t/topic/416966/8 "2025-06-04T06:07:39Z")

</div>

@toot-pm 様

記載いただきましたコードをもとにデフォルト状態で、確認いたしましたがコードは問題ございませんでした。

いただいた内容で管理画面より確認すると、添付のように表示され、テキストの上下は詰まっております。

 ![Qcoltd_0-1749016905922.png](https://canada1.discourse-cdn.com/shopifyforum/original/1X/b5b7b7723c5d31cbe8b8efd5053f1c4ab22fe5aa.png)

詰まっていない可能性としては、下記の可能性がございます。

・今回のcss以外でテキスト上下のあきが設定されている。

・管理画面のテキスト入力欄で改行されていて上下が空いている。

こちらの場合は、実際のサイトを拝見しないと回答が困難です。

プライベートメッセージ等でサイトをご共有いただけましたら、もう少しわかるかも知れません。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [June 4, 2025, 6:14am UTC](https://community.shopify.com/t/topic/416966/9 "2025-06-04T06:14:33Z")

</div>

ご丁寧に確認いただき、ありがとうございます。

私の方で、ほかCSSが作用していないか、入力欄の改行も含めて調べてみます。

もろもろ調べていただきありがとうございました！

---

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [June 4, 2025, 10:04am UTC](https://community.shopify.com/t/topic/416966/10 "2025-06-04T10:04:30Z")

</div>

こちら、どのCSSが影響してるか見つからなかったため、いただいたやり方のCSSに!importantを入れることで、無事に思い通りのレイアウトとなりました。

ありがとうございました！

 ![sample4.gif](https://canada1.discourse-cdn.com/shopifyforum/original/2X/7/78e5338e5de2ed38a79df59d096da4f8e1f311aa.gif)