成功
Rich text
オプションのアイコン、カスタムカラー、CTAボタン付きのスタイル設定済みテキストコンテンツを作成します。
Rich text を使って、オプションのアイコン、サポートコピー、CTA を備えた、シンプルなテキスト中心のコンテンツエリアを追加できます。テーマ内でセクションがどのように構成され、配置されるかの概要については、セクションとブロックに関するShopifyドキュメント を参照してください。導入文、プロモーション、ブランドメッセージ、ポリシーハイライト、または、より強い表示コントロールが必要な短いコンテンツブロックに適しています。
コンテンツ設定
Section titled “コンテンツ設定”ここでセクションのメインメッセージを作成します。キャプション、見出し、リッチテキストコンテンツ、オプションのアイコンを組み合わせて、簡潔なお知らせから、より編集的なコンテンツブロックまで作成できます。
テキスト配置はセクション全体の読み方向を設定するため、通常は最初に決めるレイアウト選択です。見出しタイプは、タイトルを主要な見出しとして読ませるか、より軽いラベルとして読ませるかに応じて、ページ構造に自然になじむようにセクションを整えます。
アイコンフィールドには、絵文字またはアイコン名のどちらも指定できます。上下の配置は、積み重ねた中央揃えレイアウトに適しており、左や右の配置は、短いテキストやアクション中心のコンテンツではよりすっきり見える傾向があります。アイコンのヘルプについては、icon guide を参照してください。
リッチテキストフィールドはリンクと基本的な書式設定に対応しているため、短い説明文やプロモーション用コピーに便利です。ボタンも追加する場合は、CTA が明確に伝わるよう、テキストは簡潔にしてください。
セクションレベルのボタン
Section titled “セクションレベルのボタン”主要メッセージに連動した主要アクションとして、セクション内にビルトインボタンを1つ直接追加できます。単一の CTA だけが必要な場合に最もシンプルな選択肢です。
ボタンスタイルは強調度を制御し、ボタンレイアウトはアイコンとラベルの並びを制御します。塗りつぶしスタイルは通常、主要アクションに最適で、軽いスタイルは副次的アクションに適しており、アイコンのみのレイアウトは明確なアクションに絞って使うのが最適です。
これらのボタン設定は、ビルトインのセクションボタンにのみ適用されます。追加した Button ブロックには影響しません。
全幅のモバイルボタンは、タップしやすさを高め、小さい画面でアクションをより目立たせるのに役立ちます。これは、ボタンを見つけやすく、使いやすくしたいプロモーションセクションで特に有効です。
これらの設定は、このセクションに対してのみ通常のテーマカラーを上書きします。コンテンツをよりブランドらしく、よりプロモーション向けに、または周囲のセクションとより差別化して見せたい場合に便利です。より広いカラーの挙動については、カラー設定 を参照してください。
枠線、アイコン、見出し、キャプションテキスト、本体テキストの色をそれぞれ調整できます。カスタムテキストカラーとカスタム背景を組み合わせる場合は、セクションが引き続き明確でバランスよく見えるよう、読みやすさを注意深く確認してください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Button
ビルトインのセクションボタンに加えて、さらに CTA が必要な場合は Button ブロックを使用します。これは、主要な購入導線と、それを補完する軽いリンクのような組み合わせのアクションに適しています。ブロック固有の設定については、ボタン を参照してください。
各 Button ブロックには、独自のテキスト、リンク、スタイル、アイコン、表示コントロールがあります。そのため、ボタンの強調度を分けたり、セクション全体を非表示にせずに、デスクトップまたはモバイルで特定のアクションだけを非表示にしたりできます。
複数のボタンを使う場合は、階層が明確になるようにしてください。通常、1つのアクションを主要に見せ、補助的なアクションはより軽いスタイルにします。
標準セクション設定
Section titled “標準セクション設定”余白設定 は、デスクトップとモバイルでセクションコンテンツの上下の余白を制御します。補助的なコンテンツには狭めの余白を、より目立たせたい場合や読み取りやすくしたい場合には広めの余白を使ってください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 を使うと、コンテンツの背面にカラー、グラデーション、画像、動画を配置できます。これにより、Rich text をより強い特集エリアや、よりブランド感のあるメッセージブロックに変えられます。
オーバーレイカラーとグラデーションは、背景メディアがテキストと競合してしまう場合に特に役立ちます。モバイル専用の背景画像や動画を使うと、小さい画面での不自然な切り抜きを避けるのにも役立ちます。
区切り線設定
Section titled “区切り線設定”区切り線設定 は、セクションの上部または下部に線を追加し、近接するコンテンツとの境界をより明確にします。コンテンツがシンプルでも視覚的な区切りが必要な場合に最も便利です。
区切り線の色を透明のままにすると、セクションは通常の枠線カラーの挙動を使います。これにより、区切り線がページ全体になじみやすくなります。
表示設定 では、セクションをデスクトップ、モバイル、またはその両方に表示するかを制御します。小さい画面で、よりシンプルなメッセージ、異なる余白、または異なる CTA を使いたい場合に便利です。
Button ブロックにも独自の表示コントロールがあるため、セクション全体を非表示にせずに個別のアクションを隠せます。
幅設定 は、コンテンツ幅と外側のセクション幅を制御します。コンテンツ幅は主な読み取り幅の選択であり、セクション幅は背景カラー、画像、グラデーション、動画を使う場合に特に重要です。
狭めのコンテンツ幅は、長めのコピーの読みやすさを通常向上させます。広めのセクション幅は、より強い視覚的インパクトを生みますが、エディターが最終レイアウトを完全には反映しないことがあるため、公開ページで確認するのが最善です。
使用上の注意
Section titled “使用上の注意”- メッセージを絞り込む。 見出しは1つ、補足するアイデアは1つ、主要なアクションは1つにして、セクションを見やすくします。
- アイコンの配置をレイアウトに合わせる。 上または下の配置は中央揃えの編集的コンテンツに適しており、左または右の配置は、短くアクション中心のメッセージに通常より適しています。
- ボタンの階層を明確にする。 セクションボタンと Button ブロックを組み合わせる場合は、1つのアクションを主要にし、他を副次的なスタイルにします。
- テキストのコントラストを保つ。 カスタムカラー、グラデーション、画像、動画背景を追加したら、見出し、キャプション、本体コピーを再確認してください。
- 幅の変更をストアフロントでプレビューする。 読み取り幅とセクション幅は、エディター上と公開ページ上で見え方が異なる場合があります。
- 両方のブレークポイントを確認する。 デスクトップとモバイルのコントロールは、配置、表示、メディア選択、余白をそれぞれ異なる方法で変えることがあります。
- フォールバックのスタイルに注意する。 透明またはデフォルトスタイルの値は通常、周囲のテーマの見た目を保ちますが、明示的なカラーやメディアの選択によってセクションはより独立した印象になります。
- メディアは意図して選ぶ。 デスクトップ用とモバイル用で異なるメディアを設定する場合は、公開前に両方のサイズで切り抜きと読みやすさを確認してください。