ページコンテンツ

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. セクションの余白設定に関するCompany XYZドキュメント
3. セクション背景設定に関するCompany XYZドキュメント
4. 区切り線設定に関するCompany XYZドキュメント
5. レイアウト幅設定に関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

このセクションを使用して、ページの本文コンテンツを表示し、レイアウト内での見え方を制御します。読みやすさ、余白、視覚的な階層が重要な、テキスト量の多いページに最適です。

基本設定

主な選択は、ページタイトルをこのセクション内に表示するかどうかです。ページコンテンツがテーマレイアウトにどう収まるかの概要については、Shopify ドキュメントのセクションとブロックに関する説明を参照してください。有効のままにするとページ見出しはシンプルで一貫したものになり、無効にすると別のセクションやカスタム見出しレイアウトでページをより自由に導入できます。

タイトルを表示 をオフにする場合は、コンテンツに明確な最上位見出しが残るよう、ページの別の場所に H1 見出しを追加してください。

このセクションは、コンテンツの書式設定の代わりではなく、整理されたページコンテンツを表示するために最適です。ページ本文に明確な見出し、段落、リストを使うと、選択したレイアウト設定にかかわらず、このセクションは読みやすくなります。

カラー設定

これらの設定を使用して、このセクションのみのデフォルトのテキストカラーを上書きします。これは、ページコンテンツがカスタム背景の上にある場合や、グローバルテーマカラーよりも強いコントラストが必要な場合に特に便利です。

公開する前に、長い段落、リンク、見出しをまとめて確認してください。短いコンテンツでは問題なく見えるテキストカラーでも、長いページではコントラストが低く感じたり、読みにくく感じたりすることがあります。

標準セクション設定

余白設定

共有の 余白設定 を使用して、コンテンツの上下のスペースを制御します。デスクトップとモバイルで値を分けると、小さい画面を詰まりすぎずに、大きい画面ではこのセクションに十分な余白を持たせやすくなります。

長文コンテンツでは、控えめな余白が最も自然に見えることがよくあります。このセクションを周囲のセクションとしっかり分けたい場合は余白を増やし、ページをより連続した流れとして読ませたい場合は余白を減らしてください。

セクション背景設定

共有の セクション背景設定 を使用して、コンテンツの背後に色、グラデーション、画像、または動画を追加します。これらの設定により、シンプルなページをよりブランドらしく、または編集的な印象にできますが、読みやすさへの影響も最も大きくなります。

グラデーション設定は単色設定より優先され、オーバーレイのグラデーションはオーバーレイの色より優先されます。また、デスクトップ版が小さい画面でうまく切り抜かれない場合は、モバイル専用の背景メディアを指定することもできます。

注意

装飾的な背景は、ページ本文の読みやすさを下げることがあります。本文、見出し、リンクが最終的な背景とオーバーレイの組み合わせの上で読みやすいか、必ず確認してください。

区切り線設定

共有の 区切り線設定 を使用して、セクションの上下に線を追加します。大きな余白の変更や全面的な背景処理に頼らずに、ページコンテンツを隣接するセクションと分ける簡単な方法です。

区切り線の色を透明のままにすると、このセクションにはテーマの枠線色が使用されます。ページ全体で視覚的な一貫性を保ちながら、さりげない区切りを付けたい場合には、通常これが最も簡単な選択です。

幅設定

共有の 幅設定 を使用して、コンテンツ幅と外側のセクション幅を制御します。このセクションでは、行の長さと読みやすさに直接影響するため、通常はコンテンツ幅が最も重要です。

より狭いコンテンツ幅は、ポリシーページ、ストーリーページ、その他のテキスト量の多いレイアウトに向いていることが多いです。背景を追加すると、背景がテキスト列の外側にどこまで広がるかが変わるため、セクション幅の違いがより目立つようになります。

ノート

幅の変更は、エディター上と公開ページ上で見え方が異なる場合があります。そのため、レイアウトを確定する前にフロントエンドで確認してください。

使用上の注意

1. ページ見出しを明確に保つ。 ほかのセクションがすでに明確な H1 を提供していない限り、組み込みのタイトルを使用してください。
2. 読みやすさを優先する。 長い段落を無理なく読めるコンテンツ幅とテキストカラーを選んでください。
3. 背景は選択的に使う。 背景メディアは、コンテンツと競合せずにページを補強できる場合にのみ追加してください。
4. 余白をページの目的に合わせる。 編集ページにはよりゆとりを持たせ、ユーティリティページは素早く確認しやすいように詰め気味にしてください。
5. モバイル表示を確認する。 公開前に、小さい画面での余白、幅、背景の動作を確認してください。
6. 両方の表示幅を比較する。 デスクトップとモバイルでは配置、表示、メディアの動作が異なる場合があるため、最終決定前に両方のサイズでセクションを確認してください。
7. 上書きは意図的に扱う。 空白または透明の値は通常、テーマのフォールバックスタイルを維持しますが、明示的な色、グラデーション、メディアの選択により、このセクションはより独立したものになります。
8. 設定したメディアを注意深く確認する。 デスクトップとモバイルのメディアを別々に設定した場合は、切り抜き、読み込み、フォールバック動作、テキストの読みやすさが両方のバージョンで適切に機能していることを確認してください。