成功
お知らせバー
プロモーション、ユーティリティリンク、簡単なヘッダーコンテンツ用の柔軟なトップバーを追加します。
- セクションとブロックに関するShopifyドキュメント
- ボタンブロックに関するCompany XYZドキュメント
- テキスト付きアイコンブロックに関するCompany XYZドキュメント
- ローカライズセレクターブロックに関するCompany XYZドキュメント
- メインメニューブロックに関するCompany XYZドキュメント
- ソーシャルメディアアイコンブロックに関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- セクション余白設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
お知らせバーを使用して、メインヘッダーの上にコンパクトなメッセージとユーティリティエリアを配置します。シンプルなお知らせにリンクとメニューを付けることも、ボタン、メニュー、ローカリゼーションセレクター、リッチテキスト、ソーシャルアイコンなどのブロックを組み合わせた、より柔軟な構成にすることもできます。テーマのレイアウト全体については、セクションとブロックに関するShopifyドキュメント を参照してください。
デフォルトでは、このセクションはメインセクション設定の告知テキスト、リンク、メニューを使用します。ブロックを追加すると、ブロックレイアウトが優先され、バーをより細かく配置できるようになります。
ブロックを追加すると、セクション設定のデフォルトの告知テキストとメニュー出力は上書きされます。設定時の混乱を避けるため、どちらか一方の方法を使用してください。
カスタムレイアウトを作成せずに、簡単なトップバーを使う場合は基本設定を使用します。短いプロモーションメッセージ、任意のリンク、シンプルなユーティリティメニューだけが必要なときに最も速い方法です。
告知テキストは短くし、さまざまなデバイスで読みやすく保ちましょう。複数のコンテンツタイプ、異なる配置ゾーン、デバイス固有のレイアウトが必要な場合は、デフォルト設定に詰め込もうとせず、ブロックに切り替えてください。
これらのセクションカラーコントロールを使用すると、お知らせバーのテキストとアイコンに対して、テーマ全体の色設定を上書きできます。バーをプロモーション、アラート、季節のキャンペーンで目立たせたいときに役立ちます。
カスタム背景も使用する場合は、コントラストを注意深く確認してください。このバーは素早く目を通すことを想定しているため、装飾的なスタイルよりも高い可読性が重要です。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- ボタン
- テキスト付きアイコン
- ローカリゼーションセレクター
- メインメニュー
- リッチテキスト
- ソーシャルメディアアイコン
このセクションのほとんどのブロックには、それぞれ独自のレイアウト、配置、表示コントロールも含まれます。これらの設定を使って、項目を左、中央、右、または独自の行に配置したり、小さい画面でバーを簡潔にしたりできます。
セールページ、サインアップリンク、サポートページなどの明確なアクションには、ボタンブロックを使用します。ボタン を参照してください。
小さめのボタンスタイルが、このセクションには通常最も適しています。すでにいくつかの項目が入っている場合は、ヘッダー領域を窮屈に見せる大きすぎるボタンスタイルは避けてください。
テキスト付きアイコン
Section titled “テキスト付きアイコン”送料無料、簡単な返品、期間限定オファーなどの短い訴求には、このブロックを使用します。アイコン付きテキスト を参照してください。
メッセージは短く、直接的にしてください。このブロックは、ひと目で1つの主要なメリットを補強する場合に最も効果的です。
ローカリゼーションセレクター
Section titled “ローカリゼーションセレクター”このブロックを使用して、トップバーに国、通貨、言語のセレクターを表示します。ローカリゼーションセレクター を参照してください。
このブロックは、役立つものにする前に、対応するローカリゼーション設定が必要です。モバイルでは、フィールドが小さいスタイルだとセレクターが新しい行に押し出される場合があるため、セレクタースタイルを変更した後は、必ず小さい画面でバーをプレビューしてください。
メインメニュー
Section titled “メインメニュー”Contact、FAQ、Track order、ポリシーリンクなどの補助ナビゲーションを追加するには、メインメニューブロックを使用します。メインメニュー を参照してください。
別々のリンクグループにしたい場合は、最大2つのメニューブロックを追加できます。これは、一方にユーティリティナビゲーション、もう一方にプロモーションやアカウント関連リンクを置きたい場合に適しています。
リッチテキスト
Section titled “リッチテキスト”デフォルトのお知らせテキストでは足りない、より多い書式設定が必要な場合に、リッチテキストブロックを使用します。より表現力のあるメッセージ用に、スタイル付きテキストとインラインリンクをサポートしています。
このセクションでは控えめに使用してください。大きなテキストや強く装飾されたコンテンツは、バーをすぐに煩雑に見せてしまうことがあります。
ソーシャルメディアアイコン
Section titled “ソーシャルメディアアイコン”テーマ設定ですでに設定済みのソーシャルアカウントを表示するには、このブロックを使用します。ソーシャルメディアアイコン を参照してください。
設定済みのネットワークをすべて表示することも、より少ない数に絞ることもできます。コンパクトなトップバーでは、塗りつぶしアイコンの方が通常は見やすく、テキストのみのスタイルはよりミニマルなレイアウトに適しています。
標準セクション設定
Section titled “標準セクション設定”セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、色、グラデーション、画像、動画、オーバーレイオプションを含むバーの背景を制御します。バーをヘッダーから視覚的に分けたり、キャンペーン固有のスタイルをサポートしたりするために使用します。
このセクションは高さが浅いため、細かな背景よりも控えめな背景の方が通常はうまく機能します。画像や動画を使う場合は、オーバーレイでテキストの可読性を保ちやすくなります。
余白設定 では、バーのコンテンツの上下の余白を制御します。ここを少し変えるだけでも、バーの目立ち方に大きな影響があります。
ユーティリティ重視のレイアウトでは余白を狭くし、バーにボタンや複数行が含まれる場合は少し広めにします。デスクトップとモバイルの両方を確認し、バーが意図したより高くならないようにしてください。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、バーの上下に線を追加できます。バーがヘッダーの近くにあり、より明確な視覚的境界が必要な場合に便利です。
バーとヘッダーで似た色を使っている場合、区切り線を入れるとレイアウトを見やすくできます。透明な区切り線の色は、より広い境界線色の設定にフォールバックします。
表示設定 では、バー全体をデスクトップ、モバイル、またはその両方に表示するかを制御します。大きい画面ではより充実したユーティリティバーを使い、スマートフォンではよりシンプルなヘッダー領域にしたい場合に便利です。
セクションの表示設定とブロック単位の表示設定を組み合わせることで、セットアップ全体を複製せずに、デバイス固有のコンテンツ構成を作成できます。
幅設定 では、最大コンテンツ幅とセクション全体の幅を制御します。このセクションでは、コンテンツ幅は項目同士のまとまりの強さに影響し、セクション幅は背景スタイルを使用するときに特に重要です。
エディターでは幅の変更が正確に表示されない場合があるため、レイアウトを調整するときはライブのストアフロントでプレビューしてください。コンテンツ幅を狭くするとユーティリティコンテンツをより見やすく保てますが、幅広い、またはフルブリードのセクションは、より強い背景表現に適しています。
使用上の注意
Section titled “使用上の注意”- コンテンツ方法は1つに決める。 シンプルなバーにはデフォルトのテキストとメニューを使うか、カスタムレイアウトにはブロックを追加してください。ブロックはデフォルトコンテンツを置き換えるためです。
- 両方の表示サイズを確認する。 デスクトップとモバイルのコントロールで、配置、間隔、表示、折り返しが変わることがあるため、バーを調整した後は両方のサイズを確認してください。
- 背景の上書きに注意する。 空白またはデフォルトスタイルの値は通常、フォールバックのスタイルを維持しますが、明示的な色、グラデーション、メディアを指定すると、バーがヘッダーの他の部分からより独立して見えます。
- メディアは慎重に扱う。 デスクトップとモバイルで異なるメディアを使う場合は、切り抜き、読み込み、可読性を確認し、どちらのデバイスでもバーが見やすい状態を保ってください。
- ナビゲーションは意図的に使う。 メニューブロックは顧客の導線を変える可能性があるため、非表示、並べ替え、モバイルのみのリンクは、到達可能性と明確さを確認してください。
- バーはユーティリティコンテンツに使う。 このスペースは、主要なヘッダーコンテンツを繰り返すのではなく、優先度の高い通知、クイックリンク、軽量なナビゲーションのために確保してください。