成功
Hero - Basic
任意の画像、要約、主要なページ詳細を備えた、洗練された記事またはブログのヘッダーを作成します。
Hero - Basic は、記事ページとブログページの上部で、ページタイトルと主要な補足情報を強調表示します。注目画像が利用できる場合はそれも表示できるため、追加のコンテンツブロックを使わずに、より強いビジュアルのヘッダーを簡単に作成できます。テーマのセクションの構成については、セクションとブロックに関するShopifyドキュメント を参照してください。
これらの設定で、ヒーロー全体の構成と、タイトルの周囲にどれだけの補足情報を表示するかを決めます。
- Featured image placement は、ヘッダーの視覚的な印象を決めます。より没入感のある見た目にするには背景画像を使用し、画像とテキストの区切りを明確にしたい場合は左または右に配置し、よりシンプルな編集レイアウトにしたい場合は画像を完全に削除します。
- Text alignment は、ヘッダーの印象がフォーマルに見えるか、ドラマチックに見えるか、読みやすく感じるかに影響します。記事コンテンツでは左揃えが通常もっとも見やすく、中央揃えはよりスタイルを効かせた表示に向いています。
- Page details では、パンくず、著者、日付、タグ、共有、印刷などの要素を表示または非表示にできます。ページの理解や利用に役立つ詳細だけを有効にして、ヘッダーの焦点を保ってください。
- Excerpt display は、抜粋コンテンツがある場合に短い要約を追加します。展開オプションは、長い要約でページ上部が埋まりすぎないようにしながら、より多くの文脈を含めたいときに便利です。
長い抜粋と複数のメタデータ項目を同時に表示すると、ヒーローがすぐに窮屈になります。タイトル自体に十分な説明がある場合は、短めの要約のほうが通常は適しています。
カラー設定では、このヒーローに限ってセクションのデフォルトの配色を上書きできます。これは、注目画像や背景の処理に、ページ全体のデザインより強いコントラストが必要な場合に特に便利です。カラー設定に関するCompany XYZドキュメント を参照してください。
- Heading and text colors は、タイトルが最も強い要素として残り、補助情報も読みやすいように、まとめて調整してください。
- Icon color は、共有や印刷などのユーティリティ要素を、メインコンテンツを邪魔せずに見やすく保つのに役立ちます。
- Overlay color, gradient, and opacity は、注目画像を背景として使用する場合に最も重要です。デザインを支えるだけの画像のディテールを残しながら、可読性を高めるために使ってください。
標準セクション設定
Section titled “標準セクション設定”テーマエディターでのセクションコントロールをより広く確認したい場合は、セクションのカスタマイズに関するShopifyドキュメント を参照してください。
余白設定 は、デスクトップとモバイルでヒーローコンテンツの上下のスペースを調整します。セクションに背景画像や抜粋が含まれる場合は、より多くの余白を使うと、ヘッダーが窮屈ではなく意図的に見えます。より引き締まった、実用性を重視したページヘッダーにしたい場合は、余白を減らしてください。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、セクションの上または下に線を追加できます。このヒーローでは、ページヘッダーと周囲のコンテンツの区切りをより明確にしたい場合に区切り線が効果的です。区切り線の色を透明のままにすると、テーマのデフォルトの枠線色の動作が使用されます。
表示設定 では、セクションをデスクトップ、モバイル、またはその両方に表示するかを制御します。画像中心のヘッダーが大きな画面では効果的でも、小さな画面では高さが気になる場合に役立ちます。ヒーローを非表示にするデバイスでも、ページにタイトルの文脈が明確に残るようにしてください。
幅設定 は、コンテンツの最大幅とセクション自体の外側の幅を制御します。コンテンツ幅を狭くすると、タイトルと抜粋の読みやすさが向上し、セクション幅を広くすると、背景画像を使う場合により強い印象を与えられます。エディター上の表示枠では間隔の印象が変わることがあるため、可能であればライブページ表示で幅の変更を確認してください。
使用上の注意
Section titled “使用上の注意”- 画像の配置は意図して選びます。 背景画像はより強い視覚的な印象を作り、サイド配置または画像なしにすると、タイトルと詳細をより見やすく保てます。
- 補足情報は絞り込みます。 ページコンテンツと競合しないよう、本当に価値を加えるメタデータとユーティリティ操作だけを表示してください。
- 抜粋は文脈のために使い、繰り返しには使いません。 よい抜粋は、タイトルを長く言い換えるのではなく、役立つ要約を追加するべきです。
- コントラストを優先します。 背景画像を使う場合は、見出しが画像全体で読みやすいように、オーバーレイとテキストカラーをまとめて調整してください。
- モバイルのレイアウトを慎重に確認します。 小さな画面では、ヘッダーのバランスが取れていて、メインコンテンツが下に押し下げられすぎないように、余白、表示、抜粋の長さを確認してください。
- 両方のビューポートを比較します。 デスクトップとモバイルでは、配置、表示、メディアの動作が異なることがあるため、公開前に両方の画面サイズでヒーローを確認してください。
- ローカルの上書きは最小限にします。 空の値やデフォルト風の値は通常、フォールバックのスタイルを維持しますが、明示的な色、グラデーション、メディアの選択は、このヒーローをページの他の部分からより独立したものに見せます。