ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマSEEED:ヘッダーメニューまわりの背景色・文字色の変更方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.ヘッダーバーの背景色や文字色は変更できないのでしょうか?

▼変更箇所イメージ    ※❸のメガメニューは本来は中央に表示されます。
変更箇所イメージ

A.下記の方法で対応してください。

TCDテーマ>基本設定のカスタムCSSに入力して調節します。

/* ❶ヘッダー */
#header { background: ●; }
#global_menu > ul > li > a { color: ○; }

/* ❷副項目 */
#global_menu > ul ul > li:first-of-type > a:after {
   border-color: transparent transparent ● transparent; } /* ▲部分 */
#global_menu ul ul a { background: ●; color: ○; }

/* ❸メガメニュー */
.megamenu_a:after { background: ●; } /* 背景 */
#global_menu > ul > li.megamenu_parent:after {
   border-color: transparent transparent ● transparent; } /* ▲部分 */
.megamenu_a .post_list .animate_background { color: ○; } /* リンク文字色 */
.megamenu_a .swiper-button-prev:before,
.megamenu_a .swiper-button-next:before { color: ○; } /* アロー */
.megamenu_a .post_list .animate_background:hover { color: ◎; } /* ホバー時文字色 */
.megamenu_a .swiper-button-prev:hover:before,
.megamenu_a .swiper-button-next:hover:before { color: ◎; } /* ホバー時アロー色 */

●(背景色)○(リンク文字色)を任意のカラーコードに変更してください。

ポイントアクセントカラーが適用される箇所(❷副項目のホバー時背景色など)はサイト全体に統一感をもたせるためのテーマ仕様です。そのまま使用いただくことをおすすめします。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事