成功
ロゴ
ロゴサイズ、配置、表示をデバイスごとに分けて設定できる柔軟なヘッダーブランディングを追加します。
このブロックを使用して、ヘッダーにブランドロゴを表示し、デスクトップとモバイルの各レイアウトでの表示方法を制御します。画像を追加しない場合、代わりにストア名が表示されるため、テキストベースのブランディングや一時的な代替表示として便利です。ロゴをご覧ください。
ロゴ画像を追加してから、デスクトップとモバイルそれぞれの最大幅を調整します。これにより、ロゴを大きい画面で目立たせすぎずに、小さい画面でも読みやすく保てます。テーマエディターの詳細については、Shopify ドキュメントのセクションとブロックをご覧ください。
幅を 0 に設定すると、ロゴは利用可能なスペース全体に広がります。これは、ロゴが単独の行に配置されている場合や、近くに競合するコンテンツがほとんどない場合に最適です。
ロゴに小さな文字や細かなディテールが含まれる場合は、デスクトップとモバイルの両方のサイズを注意深く確認してください。デスクトップで適切に見えるサイズでも、小さい画面では読みにくくなることがあります。
レイアウト設定
Section titled “レイアウト設定”これらの設定を使って、デスクトップとモバイルでロゴをヘッダーのどこに配置するかを選びます。左、中央、右はブロックをメインのヘッダー行内に配置し、フル幅はその下の独立した行に移動します。Company XYZ のナビゲーションレイアウト設定に関するドキュメントをご覧ください。
ロゴが他のヘッダー項目と同じ行にある場合、その位置はヘッダーの見え方に影響します。中央配置はロゴの存在感を強め、左または右の配置は、ユーティリティ中心のレイアウトでより適しています。
また、デスクトップではブロックに行の残りのスペースを埋めさせることもできます。これは主に、ロゴをコンパクトな要素としてではなく、ヘッダー全体の支点やバランス調整として機能させたい場合に便利です。
標準ブロック設定
Section titled “標準ブロック設定”表示コントロールを使って、このブロックをデバイスごとに表示または非表示にします。これは、デスクトップでは1種類のロゴ表示、モバイルでは別のヘッダー配置にしたい場合に特に便利です。Company XYZ の表示設定に関するドキュメントをご覧ください。
片方のデバイスでブロックを非表示にする場合は、ヘッダーが引き続き完成して見え、識別しやすいように、別の表示中のブランディング要素を残してください。
使用上の注意
Section titled “使用上の注意”- 明瞭なロゴファイルから始めます。 ヘッダーで使用する予定のサイズでも鮮明さを保てる画像を使用してください。
- デバイスごとに個別にサイズ調整します。 デスクトップとモバイルの幅をそれぞれ調整し、限られたスペースを圧迫せずにロゴを読みやすく保ちます。
- 配置をレイアウトに合わせます。 ロゴ主体の行にする場合はフル幅を使い、他のヘッダー項目とスペースを共有させる場合は左、中央、右を使います。
- 伸縮は意図して使います。 余分な幅がヘッダーのバランス改善につながる場合のみ、利用可能なスペースを埋めます。ロゴ領域が過大に見えるのは避けてください。
- 両方の表示領域を確認します。 デスクトップとモバイルのコントロールは、配置、表示、レイアウトの結果を変えることがあるため、公開前に必ず両方を確認してください。
- メディアは慎重に選びます。 デスクトップ用とモバイル用で画像を分けると、トリミング、読み込み、代替表示の動作、読みやすさが変わることがあります。特に、2つのバージョンがあまり一致していない場合は注意が必要です。
- 代替表示のスタイルはシンプルに保ちます。 空白、透明、またはデフォルトのスタイル値は既存の見た目を維持しやすく、明示的な色、グラデーション、またはメディアの上書きはロゴ領域をより独立した印象にします。