# センターメニュー

> **学べること**
>
> * センターメニュー レイアウトを使ってホームページを構築する方法
> * メニューリンクの接続方法とフォント、色、配置のカスタマイズ方法

***

### センターメニューについて

この **センターメニュー** レイアウトはロゴとナビゲーション項目をページ中央に縦に積み重ねた配置にします。Supreme のようなブランドに触発されており、スクロールを最小限に抑えつつ強いインパクトのあるランディング体験を望むストア向けに設計されています。

このレイアウトは、強い背景（画像またはビデオ）と最小限のホームページコンテンツと組み合わせると最適に機能します。

> ⚠️ この `ダイナミック背景` セクションは最新のテーマバージョンで非推奨になりました。背景のカスタマイズはすべてセンターメニューセクション内で直接行ってください。

<figure><img src="/files/bc69afae5151ed764bf677f4e0a6a10c47749907" alt=""><figcaption></figcaption></figure>

### 設定方法

#### 1. クリーンなキャンバスから始める

* テーマエディタで、以下以外のすべてのセクションを削除します `ページキャンバス`.

<figure><img src="/files/ac802466a7b41f70e8c22215ee9e91d874a0ecbe" alt=""><figcaption></figcaption></figure>

#### 2. センターメニューセクションを追加する

* クリック： **セクションを追加 > センターメニュー**
* ロゴとメニューがページ中央に表示されます

<div><figure><img src="/files/0a91db41199fa6d2ec9dfa2a860e1af792469153" alt=""><figcaption></figcaption></figure> <figure><img src="/files/20673da8ebc6efa5aff78c8845c113a68e3aef21" alt=""><figcaption></figcaption></figure></div>

#### 3. ナビゲーションメニューを接続する

* センターメニュー設定で、ドロップダウンからShopifyのメニューを選択します
* まだメニューがない場合：
  * 移動先： **Shopify 管理画面 > オンラインストア > ナビゲーション** を作成してください

<figure><img src="/files/6cbcb0d320f0f403d5df03a6ba08cbc4e35e2adf" alt=""><figcaption></figcaption></figure>

***

### センターメニューのカスタマイズ

#### ロゴ設定

* **Clock**：ライブストアの時計表示を有効または無効にする
* **日付形式**：希望する日付形式を選択
* **時刻カラー**：時計のテキスト色をカスタマイズ

#### メニュー構成

* **メニューを選択**：ナビゲーションを接続する
* **配置**：リンクを左寄せ、中央、または右寄せに配置する
* **ログインリンクを表示**：任意で顧客ログインボタンを表示する

#### スタイリングオプション

* **リンクテキストの色**
* **リンクテキストの色（ホバー時）**
* **リンク背景色（ホバー時）**
* **リンクのフォントサイズ**
* **リンクの縦方向の間隔**

#### ソーシャルメディアアイコン

* セクション内のソーシャルメディアリンクブロックを使って、X、Instagram、TikTok などのリンクを追加できます

***

<figure><img src="/files/e86abdb67fb0d6f2775043dee252b2d1f607e8b7" alt=""><figcaption></figcaption></figure>

### 背景オプション

センターメニューセクションでは以下の背景タイプが使用できます：

* **単色**：デスクトップとモバイルで異なる色を設定
* **画像**：デバイスごとに背景画像をアップロード
* **スライドショー**：最大3枚の回転画像を追加
* **ビデオ**：ループ再生する動画背景を追加（注：iOSで低電力モードが有効な場合、動画が自動再生されないことがあります）

#### 追加設定

* **セクションの高さ**：フルハイトに設定するか手動で調整
* **オーバーレイオプション**:
  * 上下のオーバーレイの色と不透明度を制御
  * デスクトップとモバイルで個別に制御可能

> 💡 ヒント：オーバーレイを使うと、白や明るいテキストが背景画像やビデオ上で目立つようになります。

***

<figure><img src="/files/81e622bdc07de7132ef1e067bd9705fa03a53ba0" alt=""><figcaption></figcaption></figure>

### このレイアウトを使用するタイミング

センターメニュー レイアウトを使用する場合：

* 大胆でミニマルなホームページにしたいとき
* 最初のインタラクションを視覚的に強いシンプルなメニューにしたいとき
* トラフィックをコレクションや商品ページに直接誘導したいとき

***

### **ヘルプが必要ですか？**

* 💬 **Discordでコミュニティに参加：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/english-ja/readme-1/pages-and-menus/homepage-+-menu/center-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.