【THE SONIC】ヘッダーメニューのみに色をつける方法

めいち

今回は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の一番下に追記してくださいね！