FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

TK0711
訪問者
2 0 1

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

 

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

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

 

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

 

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

1 件の受理された解決策

studio_M
Shopify Partner
4 1 1

成功

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

方法①

image-banner.liquidの404行目あたり "type": "inline_richtext"を "type": "textarea"にしたら<br>での改行ができました。

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

 

方法②

同じく404行目あたりを▼のように"type": "richtext"、"default": "<p>Pではさむ</p>",とすると、カスタマイズ画面でenterキーでの改行ができました。改行毎に<p>が付くためちょっとmarginが邪魔ですが。。

"type": "richtext",
"id": "text",
"default": "<p>Pではさむ</p>",

 

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

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

 

==========

/*----- PC_SP only-----*/
.sp_only {
display: none;
}
@media screen and (max-width: 767px) {
.sp_only {
display: block;
}
.pc_only {
display: none;
}
}

元の投稿で解決策を見る

2件の返信2

studio_M
Shopify Partner
4 1 1

成功

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

方法①

image-banner.liquidの404行目あたり "type": "inline_richtext"を "type": "textarea"にしたら<br>での改行ができました。

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

 

方法②

同じく404行目あたりを▼のように"type": "richtext"、"default": "<p>Pではさむ</p>",とすると、カスタマイズ画面でenterキーでの改行ができました。改行毎に<p>が付くためちょっとmarginが邪魔ですが。。

"type": "richtext",
"id": "text",
"default": "<p>Pではさむ</p>",

 

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

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

 

==========

/*----- PC_SP only-----*/
.sp_only {
display: none;
}
@media screen and (max-width: 767px) {
.sp_only {
display: block;
}
.pc_only {
display: none;
}
}
TK0711
訪問者
2 0 1

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

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

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