> ## Documentation Index > Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt > Use this file to discover all available pages before exploring further. # Header モジュール > ロゴ、タイトルスタイル、閉じるボタン、レイアウトなど、Upcart ドロワーのヘッダーを更新する方法を学びます。
# 概要
Header モジュールでは、ブランドのロゴ、タイトルテキスト、レイアウト、背景色、閉じるボタンを使用して、Upcart ドロワーの上部セクションをカスタマイズできます。視覚的なコントロールにより、正確なピクセルサイズを定義しなくても、ヘッダーのスタイリングを簡単に行えます。
# **Header モジュールの設定**
## **General（一般）**
**Height**（高さ）は **Slim** と **Tall** を切り替えて、縦方向のスペースを制御します。**Bottom border**（下境界線）は **None** または **Thin** のいずれかです。**Background color**（背景色）は 16 進コードまたは組み込みのカラーピッカーで指定でき、透明度をサポートしています。 カートプレビューの横に高さと背景色のコントロールがある Upcart Header モジュールの General 設定
# **Title（タイトル）**
カートドロワーのヘッダータイトルを定義する方法は **3 つ**あります：テーマのデフォルトのタイトルスタイルを継承する、ストアのロゴを表示する、または完全にカスタムのテキストスタイルを作成する、です。デザインのニーズに応じて、それぞれの方法が柔軟性を提供します。 Upcart Header モジュールのタイトルオプション：テーマタイトルの継承、ブランドロゴ、カスタムテキストスタイル
## テーマタイトルからの継承
このオプションはテーマのデフォルトの見出しスタイルを使用し、サイトの他の部分と視覚的に一貫したデザインを保つのに役立ちます。Text フィールドを使用して独自のタイトルを追加でき、`{{cart_quantity}}` を使ってカート内のアイテム数を動的に含めることができます。テキストの配置は Side または Center に設定でき、ストアのコンテンツ構造に基づいて、H2、H3、H4 の適切な見出しレベルを選択できます。 テキストの代わりにブランドロゴを使用したい場合は、このセクションでストアのロゴを直接アップロードできます。ロゴの配置を Side または Center から選択し、14 px から 48 px の範囲で動作する **Logo size** スライダーで拡大縮小できます。アップロードするファイルに強制的な制限はありませんが、きれいな透明度とシャープなエッジのために PNG ファイルの使用をおすすめします。JPEG もサポートされていますが、背景ノイズが含まれたり、ロゴのディテールが劣化したりする場合があります。パフォーマンスのために、ファイルサイズは最適化された状態を保つようにしてください。 * 最高の品質と透明背景のサポートのため、**PNG** ファイルの使用をおすすめします。 * JPEG も使用できますが、特にロゴに背景や細かいディテールがある場合、きれいに見えないことがあります。
## テキストスタイルの定義
Text オプションを選択すると、ストアのテーマとは独立してタイトルのスタイリングを完全にコントロールできます。任意のカスタムタイトルを入力でき、動的な更新のために `{{cart_quantity}}` を含めることができます。テキストの配置は Side または Center に設定でき、フォントの太さを Normal、Semibold、Bold に変更するオプションがあります。フォントサイズは視覚的なスライダーを使用して 14px から 48px まで調整でき、任意でテキスト色のオーバーライドを適用できます。
# 閉じるボタン
閉じるボタンは、ストアのデザインに合わせてカスタマイズできます。**Location**（位置）は、ドロワーの Left（左）または Right（右）に配置します。**Background**、**Icon**、**Border** は、それぞれ色と個別のホバー色を指定できます。**Icon size** は Small、Medium、Large、**Icon thickness** は Normal または Thick です。**Border** は None、Thin、Normal、Thick のいずれかです。 **Border** が **None** に設定されている間は、境界線の色と境界線のホバー色のフィールドは無効になります。まず境界線の太さを選択してから、その色を設定してください。 位置、色、アイコンサイズ、境界線を設定する Upcart Header モジュールの閉じるボタン設定
# カスタムテンプレート
Header モジュールのバージョン 2.0 では、設定の下に **Custom template** コードエディタが表示され、モジュール全体をカバーする単一の **Full** テンプレートがあります。React ベースの JSX を使用しており、まず Cart Editor の **Settings > Cart settings > Advanced Settings** で **Access custom templates** にチェックを入れる必要があります。[カスタムテンプレートのセットアップ](/ja/upcart/setting_up_a_custom_template_in_upcart)をご覧ください。
# ヒント
* **正確な余白やサイズ調整が必要ですか？** スライダーを超えた完全なコントロールには [Custom CSS](/ja/upcart/custom_css) を使用してください。正確なマージン、パディング、ロゴのスケーリングに最適です。 * **デスクトップとモバイルの両方でテストしてください。** テキスト、ロゴ、ボタンなどのヘッダー要素は、画面サイズによって表示が異なる場合があります。 * **適切な見出しレベルを使用してください。** 正しい見出し（H2、H3、H4）を選択することは、アクセシビリティと SEO に役立ちます。ストアのコンテンツ構造に合わせてください。 カートをパーソナライズするその他の方法については、[Upcart ヘルプドキュメント](/ja)をご覧ください。カスタムの変更が必要な場合は、[Shopify Expert](https://www.shopify.com/ca/partners/directory) への相談をおすすめします。