【THE THOR】ヘッダーのメニューバーのカスタマイズ

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）ヘッダーのメニューバー
ヘッダーのメニューバーのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のヘッダーメニューバー
最後に

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのメニューバー」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）ヘッダーのメニューバー

現在のWordPressテーマ THE THOR（ザ・トール）の「ヘッダーのメニュー」のスタイルは次の様になっています。

これまでも、WordPressテーマ THE THOR（ザ・トール）の「ヘッダーのメニュー」のカスタマイズを行ってきました。

【THE THOR】ヘッダーのメニューのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは、ヘッダーをグラデーション化するとメニューが目立たなくなるため、メニューの文字色を変更してみました。

【THE THOR】ヘッダー上のメニュー表示のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「ヘッダー上のメニュー表示」のカスタマイズについてまとめてみました。今回のカスタマイズではメニューの押し易さを向上するため、「ヘッダー上のメニュー表示」サイズ拡大を行いました。

以前ヘッダーをグラデーション化したことで、白い「ヘッダーのメニューバー」が目立ちにくくなっています。

そこで、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);
}