この記事では、ヘッダーのグローバルメニューやサブメニュー、サーチパネルなどの設定について解説しています。
どこで設定するの？
外観 ＞ カスタマイズ ＞ 共通エリア設定 ＞ ヘッダーエリア設定 から行います。
グローバルメニューの設定
ここでは、グローバルメニューを表示するかどうかの設定を行います。
グローバルメニューとは
グローバルメニューとは、サイト名の横や下に表示されるメニューのことです。当サイトでは、ヘッダーのレイアウトを「ダイナミック」にしているため、サイト名の下に表示されています。
【関連記事】 ヘッダーのデザインを変更する
設定の解説
グローバルメニュー設定の選択肢は全部で４つです。
PC/スマホで表示する（デフォルト）
PCとスマホの両方で表示されます。
PC/スマホで表示しない
PCとスマホのどちらにも表示されません。
スマホで表示しない
PCのみ表示され、スマホでは表示されません。
PCのみ表示しない
スマホのみ表示され、PCでは表示されません。
サブメニュー設定
サブメニューと呼んでいますが、実際にはグローバルメニューの横、またはメニューパネル内に表示される「注目ボタン」のことをいいます。
では、実際にどんなものなのかを見ていきましょう。
設定できる内容
「PC表示時のサブメニュー表示位置の選択」「注目ボタンのテキスト」「リンク先URLの設定」を行います。
PC表示時と説明があるように、パソコンでページが表示されたときの注目ボタン位置を決定します。スマホやタブレットでページを見る場合は、メニューパネル内にボタンが表示されます。
グローバルメニューの右に表示
デフォルトでは、グローバルメニューの右側に注目ボタンが表示されます。
メニューパネル内で表示（スマホと同じ）
メニューパネル内に注目ボタンが表示されます。
ボタンの色は変更できるの？
注目ボタンには、テーマ内共通の「ノーマルボタン」が使用されています。カスタマイザーのパーツスタイル設定内に「共通ボタン設定」があるので、こちらで変更をすることが可能です。
この記事では、パーツスタイル設定の「共通ボタン設定」について、解説しています。 どこで設定するの？ 外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ 共通ボタン設定 で行います。 共通ボタンの設定 共通ボタンは[…]
ただし、「共通ボタン」と名前が付いているように、注目ボタン以外にも「ノーマルボタン」が使用されている箇所があります。
- アーカイブ（記事一覧）ページ内、「続きを読む」ボタン
- カスタム投稿タイプ「一覧へ」ボタン
- 個別ページ内で共通ボタンを配置した場合（任意）
共通ボタン設定で任意の色を指定すると、注目ボタンのほかに、これらのボタンも「同じ色に変更される」という特徴があることを理解し、設定を行っていきましょう。
メニューパネルの設定
ここでは、メニューパネルの表示設定や、パネル内に表示されるウィジェットの見出しデザイン・色などの設定を行うことができます。
メニューパネルを開くためのボタンは、ヘッダーに表示されています（デフォルト設定）。
このボタンを押すとパネルが開きます。
メニューパネルの表示設定
メニューパネルを表示するかどうかの設定を行います。
- PC/スマホで表示する（デフォルト）
- PC/スマホで表示しない
- スマホで表示しない（PCで表示される）
- PCで表示しない（スマホで表示される）
ウィジェットの見出しデザインを設定する
パネル内に設置したウィジェットの見出しデザインを変更することができます。
- 角丸（デフォルト）
- シンプル
- ボトムボーダー
- はみ出すボーダー
- シンプル（ワイド）
- 内側ボーダー（ワイド）
ワイドと通常時の違いがわかりにくいので、サイドカラム設定で「ウィジェットのフレーム」をボーダーフレームに設定し、比較してみました。ウィジェットを囲むフレームの横幅＝ウィジェットの見出しの横幅がワイドです。
ウィジェットの見出しの色を指定
メニューパネル内のウィジェットの見出しの色を指定します。
- まず、「色を選択」ボタンをクリックします。
- クリックするとカラーピッカーが表示されるので、色を選択します。
サトコハ 色は、カラーコードでも指定することができるよ。「色を選択」ボタンの横にある欄（#00a568と表示があるところ）にコードを入力してね。
