3.ドロワー（スマホ）メニューのデザイン変更方法

このマニュアルでは、WordPressテーマ「LiteWord」におけるドロワーメニューのデザイン変更手順を解説します。

はじめに：ドロワーメニューとは

ドロワーメニューは、主にスマートフォンでサイトを表示した際に、画面の端にあるボタン（ハンバーガーメニューアイコンなど）をタップすると、横からスライドして表示されるナビゲーションメニューです。このメニューのデザインを調整することで、スマートフォンでのサイトの印象や利便性を向上させることができます。

ドロワーメニューに表示するページリンクなどの項目は、WordPressの標準機能であるメニュー設定で管理します。

メニュー設定画面で、ドロワーメニューとして表示したいメニュー項目（トップページ、固定ページへのリンク、カテゴリーリストなど）を追加、並べ替え、階層化します。
- 既存のメニューを選択する場合: 画面上部にある「編集するメニューを選択」で、ドロワーメニューに使用したいメニューを選びます。
- 新しいメニューを作成する場合: 「新しいメニューを作成しましょう。」リンクからメニューを新規作成します。
メニューの編集が完了したら、画面下部へスクロールします。

「メニュー設定」セクション内の「メニューの位置」または同様の項目の中から、「スマホメニュー（ドロワーメニュー）」あるいは「ドロワーメニュー」と記載されたチェックボックスを探し、チェックを入れます。
最後に「メニューを保存」ボタンをクリックします。

ドロワーメニューの背景色やフォントなどのデザイン要素は、WordPressのカスタマイズ画面で変更します。

ドロワーメニューのデザイン設定画面には「パターンの選択」という項目があります。 LiteWordテーマ（バージョン1）の現時点では、ドロワーメニューのデザインパターンは1種類のみ提供されています。将来的には複数のデザインパターンから選択可能になる予定です。

現在利用可能なデザインパターンの色やフォントなどを変更できます。設定は「パターンの選択」の下に表示される各項目で行います。

1階層目の背景色: ドロワーメニューの主要な階層の背景色です。初期設定は青系の場合が多いですが、任意の色に変更可能です。
2階層目の背景色: メニュー項目にマウスオーバーした際や、子メニューが表示された際の背景色です。
色の変更とリセット: 各色設定項目のカラーピッカーをクリックして色を選択するか、カラーコードを直接入力します。初期設定に戻したい場合は「クリア」をクリックしてください。

ドロワーメニュー内で使用されるテキストのフォントを変更できます。

「1. ドロワーメニューに表示する項目を設定する」で設定したメニューの中から、実際にドロワーメニューとして使用するメニューをここで再度選択することも可能です。

現バージョン（バージョン1）で詳細設定が可能な項目は上記が主ですが、今後のアップデートでさらに詳細なカスタマイズ機能が追加される予定です。

ドロワーメニューが開いた際、メニュー項目の下部にウィジェットエリアが設けられており、任意のコンテンツを追加できます。この設定はWordPressのウィジェット設定画面で行います。

ウィジェット設定画面に「ドロワーメニュー下」という名称のウィジェットエリアがあります。このエリアに、表示したいウィジェットをドラッグ＆ドロップなどで追加します。

画像ウィジェット: バナー画像などを表示する場合に使用します。画像アップロードまたはメディアライブラリから選択し、必要に応じてリンク先URLを設定できます。
カテゴリーウィジェット: サイト内のカテゴリー一覧を表示します。
テキストウィジェット (HTML利用可): 任意のテキストやHTMLコードを記述できます。アフィリエイトバナーの埋め込みなどにも活用できます。

ドロワーメニューのデザイン設定（色やフォントなど）を変更した場合は、カスタマイズ画面の上部にある「公開」ボタンを必ずクリックして設定を保存し、サイトに反映させてください。

ドロワーメニュー下のウィジェットエリアにウィジェットを追加・編集した場合は、ウィジェット設定画面で「保存」ボタンをクリックするか、ブロックベースのウィジェットエディタの場合は自動保存されていることを確認してください。