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

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

この記事の信頼性

  • ネットビジネスは2017年から
  • 2022年2月15日現在の2022年の累計実績349万円(とあるASP)
  • 専業IT業・「販売を追求し尽くす専業ブロガー」
  • 多くのジャンルでのアフィリエイト経験から、多様なジャンルに対応できる

この記事の信頼性

  • ネットビジネスは2017年から
  • 2022年2月15日現在の2022年の累計実績349万円(とあるASP)
  • 専業IT業・「販売を追求し尽くす専業ブロガー」
  • 多くのジャンルでのアフィリエイト経験から、多様なジャンルに対応できる


マスト見
アフィンガー6の正直レビュー・どんな「買いのワードプレステーマ」なの?

続きを見る

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

 

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

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

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

▼シンプル

▼ダイナミック

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

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

設定方法

外観<カスタマイザー<共通エリア設定<ヘッダーエリア設定<ヘッダーのレイアウトを選択

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

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

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

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

▼グローバルメニュー文字色:白

▼グローバルメニュー文字色:黒

ココに注意

ヘッダー背景色が白で、サイトタイトル文字色が白だと、タイトルが見えなくなってしまうので、文字色を白にする場合は左下のようにヘッダーの背景色を変更してみましょう。

※ロゴ画像を設定している場合は、ヘッダー背景の色と同時にロゴ画像の背景色も配慮する必要があります。

▼サイトタイトル文字白&ヘッダー背景灰色

▼サイトタイトル文字色:白

設定方法

外観<カスタマイザー<共通エリア設定<ヘッダーエリア設定<ヘッダーのテキストカラー選択 / ヘッダーの背景色の選択

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

イマイチ

トールのグローバルメニュは、数あるワードプレス有料テーマの中でもかなりあっさりしたカスタマイズしかできないようになっています。

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

シロクマ
たくさんメニューが並んでいればナビっぽく見えるかもしれないけどね。上の場合は完全にただの文字に見える。
熊谷ヒカル
でも下の2個くらいはできてもいいんじゃないかなって思うので、ここからはちょっとしたカスタマイズ方法をお伝えします。
  • グローバルメニューの背景色
  • グローバルメニューの文字色(黒と白以外)

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

熊谷ヒカル
ボタンっぽくなってクリックしやすくなりましたね。

Gナビの背景色と文字色の変更

  • 外観<カスタマイザー<追加CSS
  • 追加CSSに下記「CSSに追加するコード」をコピペ
  • 文字色を変えたい場合は「color: 」の「: 」以降にカラーコードを追加
  • グローバルナビの背景色を変えたい場合は「background-color:」の「:」以降にカラーコードを追加

▼カラーコード見本

  • 薄緑:#E8F5E9
  • 濃緑:#43A047
  • 薄青:#E1F5FE
  • 濃青:#039BE5
  • 薄オレンジ:#FFF3E0
  • 濃オレンジ:#FFB300
  • 薄赤:#ffebee
  • 濃赤:#e53935

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

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

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

設定場所

外観<カスタマイザー<共通エリア設定<ヘッダーエリア設定<グローバルメニュー設定で選択、公開して保存

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

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

  • 線なし
  • ボーダー
  • シャドウ
ヘッダーエリアの区切り装飾線なし

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

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

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

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

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

シロクマ
シャドウとボーダーはよく見ないと違いが分からない感じがするので、なんとなく選ぶしかないっぽい笑
熊谷ヒカル
それ、閲覧者からするとほぼ違いが分からないというレベルってことだね笑

サーチパネルの設定

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

▼サーチパネルあり

▼サーチパネルなし

 

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

設定場所

外観<カスタマイザー<共通エリア設定<ヘッダーエリア設定<サーチパネルの設定<サーチパネルを表示するか選択<公開して保存

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

▼複数条件検索

▼キーワード検索

おすすめ

複数条件検索では、キーワード・カテゴリー・タグで絞り込めるようになっています。特にこだわりがなければ、複数条件検索の方を選んだほうがユーザーにも使い勝手がよくなるのではないでしょうか。

▼関連記事

WPザ・トールの検索機能設定

続きを見る

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

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

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

おすすめ
アフィンガー6とトールを比較・本当に正直すぎる「どっちがいい談」

続きを見る

 

お問合せ

*は必須項目です *お名前またはニックネーム *メールアドレス (確認用) *お問合せ(文字数制限なし) Powered by FormMailer.

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

  • この記事を書いた人

熊谷ヒカル

2017年からインターネットビジネスを始め、いろんなジャンルの特化サイトを構築してきました。


現在はブログ初心者さん向け・同じような志を持つ人に教えながら特化サイト構築を両立しています。


2022年のとあるASPでの実績は349万円(「2022年の累計実績」・2月15日現在)、詳細は下記よりどうぞ。