Apuraでは、サイト上部のロゴ・サイトタイトル・ナビゲーションメニューをカスタマイザーの「Header」パネルからまとめて設定できます。デスクトップとモバイルそれぞれに専用のセクションが用意されており、画面サイズに応じて見せ方を変えられます。
この記事では、Header パネル内にある General・Site Title / Logo・Menu・Header Tools・Mobile の5セクションを順番に解説します。
設定の場所
WordPressの管理画面から 外観 → カスタマイズ を開き、Header パネルに進みます。
- 外観 → カスタマイズ
- Header
General: ヘッダー全体のレイアウトとデザイン
General セクションでは、ヘッダー全体のレイアウトや背景・枠線などの基本的な見た目を設定します。
| 設定項目 | 説明 |
|---|---|
| Layout | ヘッダーの基本レイアウトを切り替える。Default（標準）、Top Logo（ロゴを上段に配置）、Bottom Menu（メニューを下段に配置）から選択 |
| Header Full Width | ヘッダーをサイトのコンテナ幅に関係なく画面全体に広げるかどうかを切り替える |
| Header Box Shadow | ヘッダー下部に影を付けるかどうかを切り替える |
| Header Border | ヘッダー下部にボーダーラインを表示するかどうかを切り替える |
| Background Color | ヘッダー全体の背景色を設定する |
| Border Bottom Color | Header Border が有効な場合に表示される、ヘッダー下部のボーダー色を設定する |
サイトのトーンに合わせてまずヘッダー全体のレイアウトを決め、そのうえで背景色・ボーダー・影などを調整すると、後続のロゴやメニューの見え方も検討しやすくなります。
Site Title / Logo: サイトタイトルとロゴ
Site Title / Logo セクションでは、サイトタイトル・キャッチフレーズ・ロゴ画像の表示と見た目を設定します。
| 設定項目 | 説明 |
|---|---|
| Hide Title | サイトタイトルの表示・非表示を切り替える。ロゴ画像のみを表示したい場合に有効化する |
| Title Color（Normal / Hover） | サイトタイトルの通常時・ホバー時の文字色を設定する |
| Hide Description | キャッチフレーズ（サイトの説明文）の表示・非表示を切り替える |
| Description Color | キャッチフレーズの文字色を設定する |
| ロゴ画像 | WordPress標準の「カスタムロゴ」機能でロゴ画像をアップロード・変更する |
| Max Width | ロゴ画像の最大幅をデスクトップ・タブレット・モバイルごとに px 単位（10〜300px）で設定する。ロゴ画像が設定されている場合のみ表示される |
ロゴ画像は、Site Title / Logo セクション内にある「ロゴを選択」から登録します。ロゴを設定すると、サイトタイトルとロゴが両方表示されるレイアウトになるため、ロゴのみを見せたい場合は Hide Title を有効にしてサイトタイトルを隠します。
Max Width はデスクトップ・タブレット・モバイルを個別に指定できるため、PCでは大きく、スマートフォンでは小さく表示するといった調整が可能です。ヘッダーの高さに対してロゴが大きすぎる・小さすぎる場合は、まずこの値を見直してください。
Menu: デスクトップメニュー
Menu セクションでは、PC表示時のヘッダーメニュー（グローバルナビゲーション）の位置や見た目を設定します。
| 設定項目 | 説明 |
|---|---|
| Menu Position | ヘッダー内でのメニューの配置位置。Start（左寄せ）・Center（中央）・End（右寄せ）から選択 |
| Enable Dropdown Icon | 子メニューを持つ項目に、ドロップダウンを示す矢印アイコンを表示するかどうかを切り替える |
| Menu Link Color（Normal / Hover） | メニュー項目の通常時・ホバー時の文字色を設定する |
表示するメニュー自体は、WordPress標準の 外観 → メニュー（ナビゲーションメニュー）から作成・編集します。カスタマイザーのMenuセクションは、作成済みのメニューの「見た目」を調整するための設定です。
Header Tools: 検索ツールの表示
Header Tools セクションでは、ヘッダー内に表示する補助的なツール（現時点では検索）を設定します。
| 設定項目 | 説明 |
|---|---|
| Header Tools | ヘッダーに表示する要素を選択・並び替えする。現在は「Search（検索）」のみ用意されている |
| Search Type | 検索アイコンをクリックしたときの表示形式。Modal（画面中央にポップアップ表示）または Dropdown（アイコン直下に展開表示）から選択 |
検索ツールを非表示にしたい場合は、Header Tools のリストから「Search」を外します。サイト内検索を主要な導線として使いたい場合は、視認性の高い Modal がおすすめです。
Mobile: モバイル表示時のヘッダー
Mobile セクションでは、スマートフォンなど画面幅が狭い環境でのヘッダーレイアウトとメニューの動作を設定します。
Layout: モバイルヘッダーの配置
| 選択肢 | 配置 |
|---|---|
| Logo / Tools / Menu（デフォルト） | 左にロゴ、右にツールとメニューボタンを配置 |
| Menu / Centered Logo / Tools | 左にメニューボタン、中央にロゴ、右にツールを配置 |
| Tools / Centered Logo / Menu | 左にツール、中央にロゴ、右にメニューボタンを配置 |
Menu Type: モバイルメニューの表示方式
Menu Type では、メニューボタンをタップしたときの開き方を3種類から選択します。選択したタイプに応じて、追加の設定項目が表示されます。
| タイプ | 動作 | 専用設定 |
|---|---|---|
| Dropdown | ヘッダー直下にメニューが展開される | Animation Duration（アニメーション時間。ミリ秒単位、0〜800、0でアニメーションなし） |
| Fullscreen | 画面全体を覆うモーダルとしてメニューが表示される | Overlay Color（オーバーレイの背景色） |
| Offcanvas | 画面の左右からスライドインするパネルとしてメニューが表示される | Opening Direction（Left / Right）、Overlay（オーバーレイ表示の有無）、Overlay Color |
General Settings: モバイルメニュー共通設定
| 設定項目 | 説明 |
|---|---|
| Menu Elements | モバイルメニュー内に表示する要素を選択・並び替えする。Menu（ナビゲーションメニュー）・Search（検索）・HTML（任意のテキスト/HTML/ショートコード）から選択でき、複数組み合わせ可能 |
| Menu Link Color | モバイルメニュー内のリンク文字色を設定する |
| Menu Open Text / Menu Close Text | メニューの開閉ボタンに表示するテキストを設定する |
HTML 要素を追加すると、モバイルメニュー内に営業時間やお問い合わせ先などの案内文、ショートコードを自由に挿入できます。
設定の組み合わせ例
ロゴ中心のシンプルなヘッダー
| 設定項目 | 値 |
|---|---|
| Layout | Default |
| Hide Title | ON（ロゴ画像を登録） |
| Menu Position | End |
| Mobile Menu Type | Offcanvas（Right） |
中央メニュー＋検索を強調したヘッダー
| 設定項目 | 値 |
|---|---|
| Layout | Top Logo |
| Menu Position | Center |
| Header Tools | Search（Modal） |
| Mobile Layout | Menu / Centered Logo / Tools |
| Mobile Menu Type | Fullscreen |
まとめ
Apuraのヘッダー設定は、ヘッダー全体のレイアウト（General）、ロゴ・サイトタイトル（Site Title / Logo）、PC用メニュー（Menu）、検索などのツール（Header Tools）、モバイル表示（Mobile）の5セクションに分かれています。
まずGeneralでヘッダー全体のレイアウトを決め、ロゴとメニューの表示を整えたうえで、最後にモバイル表示を個別に確認する流れで進めると、PC・スマートフォンどちらでも見やすいヘッダーに仕上げやすくなります。
サイト全体のレイアウトやカスタマイザーの全体像については、以下の関連記事も参照してください。