WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
wp.masaa.net
今回は、WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのメニューバー」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール） ヘッダーのメニューバー
現在のWordPressテーマ THE THOR（ザ・トール）の「ヘッダーのメニュー」のスタイルは次の様になっています。
これまでも、WordPressテーマ THE THOR（ザ・トール）の「ヘッダーのメニュー」のカスタマイズを行ってきました。
【THE THOR】ヘッダーのメニューのカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは、ヘッダーをグラデーション化するとメニューが目立たなくなるため、メニューの文字色を変更してみました。
masaa.net
2020.05.27
【THE THOR】ヘッダー上のメニュー表示のカスタマイズ
WordPressテーマ THE THOR（ザ・トール）の「ヘッダー上のメニュー表示」のカスタマイズについてまとめてみました。今回のカスタマイズではメニューの押し易さを向上するため、「ヘッダー上のメニュー表示」サイズ拡大を行いました。
masaa.net
2020.03.05
以前ヘッダーをグラデーション化したことで、白い「ヘッダーのメニューバー」が目立ちにくくなっています。
そこで、WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのメニューバー」についてカスタマイズを行いたいと思います。
ヘッダーのメニューバーのカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのメニューバー」のカスタマイズを行います。
カスタマイズ内容
「ヘッダーのメニューバー」のカスタマイズの内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。
/************************************
** ■グローバルナビ（ヘッダーメニュー）のバーカスタマイズ
************************************/
.t-headerColor .globalNavi__list .current-menu-item>a,
.t-headerColor .globalNavi__list .current-menu-parent>a,
.t-headerColor .globalNavi__list .current_page_item>a,
.t-headerColor .globalNavi__list .menu-item a:hover,
.t-headerColor .globalNavi__list .page_item a:hover {
border-bottom: 3px solid rgba(243,36,105,1);
color: rgba(255,255,255,1);
}
カスタマイズ後のヘッダーメニューバー
今回のカスタマイズによって、「ヘッダーのメニューバー」のスタイルは次の様になりました。
今回の「ヘッダーのメニューバー」のカスタマイズでは、下記の2点について行っています。
- 「ヘッダーのメニューバー」のカラー変更
- 「ヘッダーのメニューバー」の太さ変更
最後に
今回のカスタマイズによって、グラデーション化されたヘッダーでも「ヘッダーのメニューバー」が分かりやすくなりました。
ヘッダーをグラデーション化されている場合は、お勧めのカスタマイズです。
コメント