2.ヘッダーデザインの変更方法
このマニュアルでは、WordPressテーマ「LiteWord」のヘッダーデザインを変更する手順を解説します。
ナビゲーションメニューの設定はこちらです。
はじめに：ヘッダーデザインでできること
ヘッダーはサイト最上部に表示される、サイトの顔となる要素です。LiteWordでは、複数のデザインパターン選択、ロゴ、メニュー、情報表示バー、アクションボタンの表示内容やデザインを細かく設定できます。
1. 設定画面へのアクセス
ヘッダーデザインの設定は、WordPressのカスタマイズ画面から行います。
1.1. WordPressダッシュボードへのログイン
- ウェブサイトのトップページURLの末尾に「
/wp-admin」と入力し、アクセスします。 - ログイン画面が表示されたら、WordPressのユーザー名とパスワードを入力し、「ログイン」ボタンをクリックします。
1.2. カスタマイズ画面への移動
- WordPressダッシュボードの左側メニューから「外観」にマウスカーソルを合わせます。
- 表示されたサブメニューから「カスタマイズ」をクリックします。
2. ヘッダーデザインの基本設定（デザインパターンの選択）
カスタマイズ画面で、ヘッダーデザインの基本的なパターンを選択します。
2.1. ヘッダー設定画面へのアクセス
- カスタマイズ画面の左側メニューから「デザイン設定」をクリックします。
- 次に「ヘッダー」をクリックします。
2.2. デザインパターンの選択
- ヘッダー設定画面内の「パターンの選択」をクリックします。初期状態では「未選択」の場合があります。
- LiteWordテーマ（バージョン1）では、パターン1、パターン2、パターン3の3種類から選択可能です。各パターンをクリックすると、プレビュー画面でデザインが切り替わるので、好みのものを選択してください。
2.3. ページごとの設定について
「パターンの選択」項目では、デザインパターンを適用する範囲を以下から選択できます。
- 全ページ共通
- 固定ページ
- 投稿ページ
- アーカイブページ
まずは「全ページ共通」で設定することをおすすめします。ページの種類によってヘッダーデザインを変更したい場合は、「固定ページ」や「投稿ページ」などを選択し、個別にデザインパターンを指定することも可能です。例えば、投稿ページのみパターン3を適用する、といった設定が行えます。
2.4. 各デザインパターンの特徴
各デザインパターンの主な特徴は以下の通りです。
- パターン1: ロゴが中央に配置され、画面幅が縮小するとロゴが左側に移動するデザインです。メニュー項目にマウスオーバーすると下線が表示されます。
- パターン2: ロゴが左側、その右隣にメニューが並び、最も右側にアクションボタンが配置されるデザインです。
- パターン3: ヘッダーに背景色が設定されており、アクションボタンがメニューの右端に隣接して表示されるシンプルなデザインです。
2.5. デザインの確認（PC画面が小さい場合）
PCの画面サイズが小さい場合、ハンバーガーメニュー（三本線のアイコン）やドロワーメニューのボタンが表示されることがあります。全体のデザインが確認しづらい場合は、ブラウザの表示倍率を調整してください。Windowsの場合、Ctrlキーを押しながら「-（マイナス）」キーを押すと表示が縮小されます。
3. ヘッダーデザインの詳細設定
基本のデザインパターンを選択後、さらに細かい設定を行います。
3.1. 設定の保存
デザインパターンを選択したら、画面上部にある「公開」ボタンをクリックして、設定を一度保存してください。
3.2. インフォメーションバーの設定
選択したデザインパターンに応じて、詳細設定項目が表示されます。インフォメーションバーは、ヘッダーの最上部に表示される帯状のエリアです（パターンによっては初期状態で非表示の場合もあります）。
- 表示/非表示: 「表示する」または「表示しない」を選択します。
- テキスト: バーに表示するテキストを入力します。空欄の場合は、WordPressのキャッチフレーズが表示されます。
- リンク先URL: バーをクリックした際のリンク先URLを設定します。
- その他: フォント、背景色、文字色などを設定できます。
3.3. ロゴの設定
ヘッダーに表示されるサイトロゴを設定します。
- 表示タイプ: 「画像」「テキスト」「表示しない」から選択します。
- テキスト: サイトのタイトルまたは任意のテキストをロゴとして表示します。
- 画像: 「ロゴ画像を選択」ボタンから画像をアップロード、またはメディアライブラリから選択します。ドラッグ＆ドロップでのアップロードも可能です。
- ロゴサイズ: PC、タブレット、スマートフォンそれぞれで個別にサイズを調整できます。設定画面下部のデバイス切り替えボタンでプレビューを確認しながら、スライダーでサイズを変更します。
3.4. メニューの設定
ヘッダーに表示するナビゲーションメニューを選択します。
- あらかじめWordPressのメニュー設定画面（「外観」＞「メニュー」）で作成したメニューの中から、ヘッダーに表示したいものを選択します。
- ヘッダーメニューのフォント、背景色、文字色なども設定可能です。
3.5. アクションボタンの設定
一部のヘッダーパターンでは、目立たせたいリンク先へ誘導するためのアクションボタンを設置できます。
- 表示/非表示: ボタンを表示するかどうかを選択します。
- テキスト: ボタンに表示するテキストを入力します。
- リンク先URL: ボタンをクリックした際のリンク先URLを設定します。
- デザイン: ボタンの文字色と背景色を設定できます。
3.6. 他のパターンでの設定について
ここで説明したインフォメーションバー、ロゴ、メニュー、アクションボタンなどの詳細設定項目は、パターン1、パターン2、パターン3のいずれを選択した場合でも、ほぼ同様の手順で設定できます。