# サイド配置メニュー

> **学べること**
>
> * サイド配置メニューレイアウトを使ってホームページを作成する方法
> * 背景、メニューリンク、およびスタイルのカスタマイズ方法

***

### サイド配置メニューについて

この **サイド配置メニュー** レイアウトはロゴとナビゲーションを画面の左側に縦方向に配置します。このレイアウトはクリーンでミニマルであり、背景やブランドイメージに視覚的な優先度を与えます。

***

### 設定方法

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

1. テーマエディタで、既存のセクションをすべて削除します。
2. 次だけを残します `ページキャンバス` セクション。

2\. サイド配置メニューを追加する

1. クリック： **セクションを追加 > サイド配置メニュー**
2. ナビゲーションが画面の左側に表示されます。
3. を選択します **Shopify メニュー** でナビゲーションリンクを接続します。

{% hint style="info" %}
💡 メニューがまだない場合は、 **Shopify 管理画面 > オンラインストア > ナビゲーション** で作成してください。
{% endhint %}

***

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

追加後、次の項目を設定できます：

#### メニューの内容と動作

* **メニューを選択**：Shopify ナビゲーションからメニューを接続する
* **ソーシャルメディアアイコン**：X、TikTok、Threads などのアイコンを追加するには「ソーシャルメディアリンクを追加」をクリック
* **ログインリンクを表示**：を表示するか `上`, `下`、または完全に非表示にすることを選択

#### ロゴとリンクのスタイリング

* **ロゴの配置**：左または右
* **メニューの配置**：メニュー内のリンクを左または右に揃える
* **リンクの文字色 / ホバー色**
* **リンク背景色（ホバー時）**
* **リンクのフォントサイズと垂直間隔**

#### ビジュアル効果

* **ハイライト効果を無効にする**：ホバーハイライトスタイルをオフにします
* **ナビスケーリングを有効にする**：メニュー項目の拡大アニメーションを有効にします

***

### 背景のカスタマイズ

サイド配置メニューセクションには組み込みの背景オプションが含まれているため、もはや `ダイナミック背景` セクションを使用する必要はありません。テーマの新しいバージョンでは、 `ダイナミック背景` はこのレイアウトでは非推奨です。

#### 背景スタイルのオプション：

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

#### 追加の背景設定：

* **セクションの高さ**：フルハイト（100%）またはカスタムに設定
* **オーバーレイの色と不透明度**:
  * 上部と下部のオーバーレイを個別に制御
  * デスクトップとモバイルで独立した設定

> 💡 ヒント：テキストと背景ビジュアルのコントラストを作るためにオーバーレイを使用してください。

***

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

サイド配置メニューを使うべき場合：

* 垂直ナビゲーションでクリーンでモダンなレイアウトを望むとき
* 背景画像やブランドアートが体験の中心となるとき
* ホームページで多くのスクロール可能なセクションを使う予定がないとき

***

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

* 💬 **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/side-aligned-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.