これをサブスクリプションページでのみ、ほとんど正しくフォーマットされた状態で動作させることができました。
/* パート 1: ヘッダー(ネイティブの H1 のようにスタイル設定) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
content: "これは見出しです";
display: block;
/* 'title-wrapper' ヘッダーに合わせるためのスタイル設定 */
font-family: var(--heading-font-family);
font-size: var(--font-up-5);
font-weight: bold;
line-height: var(--line-height-small);
color: #DDDDDD;
/* この見出しと下のテキストとの間のスペース */
margin-bottom: 8px;
}
/* パート 2: 本文テキスト(下にスペースあり) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
content: "これは見出しの下に表示されるプレーンテキストです。\A ここでもバックスラッシュAを使用して改行できます。";
display: block;
/* 標準の本文テキストに合わせるためのスタイル設定 */
font-family: var(--font-family);
font-size: var(--font-0);
line-height: var(--line-height-medium);
color: #DDDDDD;
white-space: pre-wrap;
/* テキストの下に空のスペース(復帰)を作成します */
margin-bottom: 40px;
}
