# 【dawn】カスタマイズ画面の画像バナーセクション内テキストの改行について

**URL:** <https://community.shopify.com/t/dawn/277482>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [December 14, 2023, 8:13pm UTC](https://community.shopify.com/t/dawn/277482 "2023-12-14T20:13:12Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Debutテーマからdawnテーマへの移行中に、画像バナーセクション内のテキスト改行がカスタマイズ画面からできなくなった問題について質問が投稿されました。

**提案された解決方法:**

**方法1:** `image-banner.liquid`の404行目付近で`"type": "inline_richtext"`を`"type": "textarea"`に変更すると、`<br>`タグでの改行が可能になります。ただし、HTMLに不慣れなクライアントへの説明が必要になる点が難点です。

**方法2:** 同じく404行目付近を`"type": "richtext"`、`"default": "<p>Pではさむ</p>"`に変更すると、カスタマイズ画面でEnterキーによる改行が可能になります。改行ごとに`<p>`タグが付くため、marginの調整が必要になる場合があります。

質問者は自社運用のショップでHTMLを扱えるため、コード編集による方法1を採用する方向で解決しました。

<div class="post-metadata">

**Author:** ![TK0711](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@TK0711](https://community.shopify.com/u/TK0711)\
**Post date:** [December 14, 2023, 8:13pm UTC](https://community.shopify.com/t/dawn/277482/1 "2023-12-14T20:13:12Z")

</div>

Debutからdawnにテーマを移行している最中です。

Debutの時は、画像バナー内テキストの改行がカスタマイズ画面からできたのですが、

Dawnに変更してからできなくなりました。

もしDawnテーマで、画像バナーセクション内テキストの改行できる方法がありましたらご教授して頂けますと幸いでございます。

どうぞ宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![studio\_M](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@studio\_M](https://community.shopify.com/u/studio_M)\
**Post date:** [December 17, 2023, 11:56pm UTC](https://community.shopify.com/t/dawn/277482/2 "2023-12-17T23:56:16Z")

</div>

カスタマイズ画面からではないですが、コード編集でならできなくもないです。

方法①

image-banner.liquidの404行目あたり “type”: "inline\_richtext"を “type”: "textarea"にしたら  
での改行ができました。

ただ、これだとHTMLできないクライアントさんに譲渡する場合など、ちょっと説明が面倒なのが難点です。。

方法②

同じく404行目あたりを▼のように"type": “richtext”、“default”: “

Pではさむ

”,とすると、カスタマイズ画面でenterキーでの改行ができました。改行毎に

が付くためちょっとmarginが邪魔ですが。。

“type”: “richtext”,  
“id”: “text”,  
“default”: “

Pではさむ

”,

私はせっかくなので「方法①」で  
などとして、cssでPC・スマホで改行出しわけする方を選択しました。

ご参考になりましたら幸いです。

==========

/_----- PC\_SP only-----_/

.sp\_only {  
display: none;  
}  
@media screen and (max-width: 767px) {  
.sp\_only {  
display: block;  
}

.pc\_only {  
display: none;  
}

}

---

<div class="post-metadata">

**Author:** ![TK0711](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@TK0711](https://community.shopify.com/u/TK0711)\
**Post date:** [December 19, 2023, 9:19am UTC](https://community.shopify.com/t/dawn/277482/3 "2023-12-19T09:19:57Z")

</div>

ご丁寧な解説とご教示ありがとうございました。

自社運用のショップですのでHTMLを編集する方法でやってみようと思います。

お忙しいところ本当にありがとうございました。