【JIN】簡単に追加CSSでできる!ヘッダーカスタマイズ

今回は、WordPress有料テーマ「JIN」のヘッダーを別の有料テーマ「swallow」風にアレンジします!

カスタマイズ例

大きく分けて2つのカスタマイズポイントがあります。

  1. ヘッダーの高さを縮めて、画面をすっきりさせる!
  2. SEARCHやMENUの文字を付けて操作をわかりやすくする!

今回のカスタマイズは全て、「カスタマイズ>ヘッダー設定」と「カスタマイズ>追加CSS」のみでできます。では見ていきましょう~

ヘッダー設定

「ロゴとフレーズの文字サイズ調整」の数字がデフォルトだと240と30になっています。

ここを100と10にしておきます。

240は「ロゴの画像を240%にする」なのでご注意!今回は100%で設定します。ただ、画像ではなく文字の方はここで大きさを調整すると思うので100でなくてもOKです。

 追加CSS

1.ヘッダーの高さをすっきりさせる追加CSS

↓これをコピーして「追加CSS」に貼り付けてください。

今回は「SANGO」に似せて、高さを62pxにしています。

2.SEARCHとMENUの文字を入れるCSS

しかもMENUを押すと文字がCLOSEになるようにしたい。

  1. 左の検索マークの下にSEARCH
  2. 右のハンバーガーメニューの下にMENU
  3. MENUを押したら×の下にCLOSE

この3つの文字をCSSで付け加えます!

これもコピペでOKです!!

CLOSEになる部分は、ドロワーが降りてくる判定のCSSである「#navtoggle:checked + ・・・」を流用して作りました。

それと、MENUとCLOSEでは文字数が違うので、左寄せで同じ開始地点にしてしまうとCLOSEがちょっとバランス悪くなります。そこで、CLOSEを少し左にずらすCSSを加えております。

おわりに

いかがでしょうか?opencageさんの「swallow」とサルワカさんの「SANGO」のオシャレな感じを加えてアレンジしてみました。

以上、簡単に追加CSSでできるJINのヘッダーカスタマイズでした!