WPトールのヘッダーエリアの設定方法:ヘッダーレイアウト・グローバルメニュー

WPトールのヘッダーエリアの設定方法:ヘッダーレイアウト・グローバルメニューについて解説しています。

トールのヘッダーエリアの設定方法

ヘッダーのレイアウト設定

ヘッダーのレイアウトで変更できるのは、以下赤枠で囲った「ロゴ画像とサイトタイトル」です。

ダイナミックとシンプルの２つのタイプが選択できるようになっています。

シンプルとダイナミックの呼び名はちょっとわかりませんが💦、以下のように左寄せか中央寄せかの違いになります。

• シンプル：サイトタイトルとロゴが左寄せ
• ダイナミック：サイトタイトルとロゴが中央寄せ

そしてこの直下で「サイトタイトル＆ロゴ＝ヘッダー」は固定表示するかどうかを選択できます。

デフォルトは非表示となっているようですが、「サイトタイトルが常時表示(固定表示)されていた方が

グローバルメニューの文字色・ヘッダー背景色の選択

ヘッダーエリアに表示されるグローバルメニューの文字色に関しては、白と黒が選択できます。

トールのグローバルメニュー背景色のカスタマイズ

下の赤枠のグローバルナビ、下手するとただの文字に見えて、クリックもされない可能性があります。

シロクマ

たくさんメニューが並んでいればナビっぽく見えるかもしれないけどね。上の場合は完全にただの文字に見える。

熊谷ヒカル

でも下の２個くらいはできてもいいんじゃないかなって思うので、ここからはちょっとしたカスタマイズ方法をお伝えします。

• グローバルメニューの背景色
• グローバルメニューの文字色(黒と白以外)

トールのグローバルメニューの文字色と背景色を、グリーン系に変えてみました。

熊谷ヒカル

ボタンっぽくなってクリックしやすくなりましたね。

/*グローバルメニュー*/
.globalNavi  {
width: 100%;
margin-top: 48px;
}
/*文字色背景色*/
.globalNavi__list li a {
background-color: #eeeeee;
color: #444444;
border-radius: 4px;
width: 110px;
text-align: center;
}
/*グローバルメニューマウスオーバー*/
.globalNavi__list li a:hover {
background-color: #cccccc
}
/*グローバルメニューレスポンシブル*/
@media screen and (max-width : 767px){
.globalNavi  {
margin-top: 24px;
}
}

トールのグローバルメニューの表示・非表示切り替え

トールのカスタマイザーでは、グローバルメニューの表示について以下のように切り替えができるようになっています。

• パソコンとスマホで両方表示
• パソコンとスマホで両方非表示
• スマホでは非表示
• パソコンでは非表示

ヘッダーエリアの区切り装飾線

トールのヘッダーエリアでは、区切りの装飾線として以下３種が選択できるようになっています。

• 線なし
• ボーダー
• シャドウ

ヘッダーエリアの区切り装飾線なし

ヘッダーエリアの区切り装飾線：シャドウ

ヘッダーエリアの区切り装飾線ボーダー

シロクマ

シャドウとボーダーはよく見ないと違いが分からない感じがするので、なんとなく選ぶしかないっぽい笑

熊谷ヒカル

それ、閲覧者からするとほぼ違いが分からないというレベルってことだね笑

サーチパネルの設定

トールでは、左下の画像のとおり「🔎のアイコンをクリックすることによってサーチパネルが表示される仕組みになっており、これがサイト内の記事の絞り込み検索機能として働くようになっています。※右下がサーチパネルなし

またこのサーチパネルの表示・非表示は以下の通り設定します。

このサーチパネルの設定では、以下のように「複数条件検索」と「キーワード検索」に切り替えることもできます。

▼関連記事

人気ワードプレステーマを比較してみよう

今回解説したトールの検索機能は、かなり貴重ではありますが…アフィンガーは別な機能が膨大で、別な意味でスゴイデス。

以下で人気ワードプレステーマトールとアフィンガーの機能比較をしていますので参考にされてみてくださいね。

iCloud・ドコモなどキャリアメールアドレスのお問い合わせは高確率で文字化けします。