
今回はTHE SONICのヘッダー周りのカスタマイズ記事です。
このブログでは「白抜きのロゴを作るのが苦手」という個人的な理由から、ロゴ部分を白背景にしてヘッダーメニューのみに色をつけています。
今回はそんなヘッダー周りのカスタマイズ方法をご紹介します!
カスタマイズ後のイメージ

↑ロゴとメインカラーを設定した、デフォルトの状態がこちらです。
これを…

↑こんな感じに、「ロゴ部分は白」「ヘッダーメニューのみメインカラー」にしていきます。
ヘッダーメニューのみに色をつけるCSS
事前準備

ヘッダーをカスタマイズする前の事前準備として、「カスタマイズ」>「サイトの基本設定」>「タイトル・ロゴの設定」でロゴの位置を中央寄せにしてください。
ヘッダーロゴのカスタマイズ

ロゴの位置を中央寄せにしたら、いよいよカスタマイズです!

ロゴが中央に表示されて、その下にヘッダーメニューが表示されました。
ここからCSSでカスタマイズしていきます!
まず、ロゴの部分を白くします。
.header-title {
background: #fff;
}

左右が白くならなかったので、ヘッダーの幅を強制的に100%にして白くします。
.header-in.hb {
max-width: 100% !important;
}

ロゴ上のキャッチフレーズや、スマホ表示時のハンバーガーメニューが背景と同化して見えなくなってしまったので、色を変更します。(#333にしました)
#header {
color: #333;
}

ロゴとメニューの間の幅をもうちょっととりたいな?と思ったので、8pxだった余白を16pxに変更します。
.header-title {
padding: 16px 0;
}


これでヘッダーロゴの部分は完成です!
ヘッダーメニューのカスタマイズ
次はヘッダーメニューをカスタマイズしていきます。
個人的に文字がもうちょっと小さい方がいいので、80%の大きさにしました。
#menu-header-nav {
font-size: 80%;
}

このままでもいいのですが、メニューに区切り線があった方が見やすいかも?と思い、左右に区切り線をつけることにしました。

区切り線の色を白にするとメニューのリンクと同じ色になってしまうため、線の透明度を50%にしています。
.nav-style-def li {
border-left: 1px solid rgba(255,255,255, 0.5);
}

これだと一番右の線が表示されないので、一番右にも表示されるようにします。
.nav-style-def li:last-child {
border-right: 1px solid rgba(255,255,255, 0.5);
}


これで完成です!
まとめ
「ヘッダーロゴの部分」「ヘッダーメニューの部分」をまとめて書くと、下記のようなCSSになります。
/* ヘッダーロゴ */
.header-title {
background: #fff;
}
.header-in.hb {
max-width: 100% !important;
}
#header {
color: #333;
}
.header-title {
padding: 16px 0;
}
/* ヘッダーメニュー */
#menu-header-nav {
font-size: 80%;
}
.nav-style-def li {
border-left: 1px solid rgba(255,255,255, 0.5);
}
.nav-style-def li:last-child {
border-right: 1px solid rgba(255,255,255, 0.5);
}
style.cssの一番下に追記してくださいね!