【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressTHE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

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

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

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

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

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

【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);
}

カスタマイズ後のヘッダーメニューバー

今回のカスタマイズによって、「ヘッダーのメニューバー」のスタイルは次の様になりました。

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

今回の「ヘッダーのメニューバー」のカスタマイズでは、下記の2点について行っています。

  1. 「ヘッダーのメニューバー」のカラー変更
  2. 「ヘッダーのメニューバー」の太さ変更

最後に

今回のカスタマイズによって、グラデーション化されたヘッダーでも「ヘッダーのメニューバー」が分かりやすくなりました。

ヘッダーをグラデーション化されている場合は、お勧めのカスタマイズです。

 
MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント