ども、Kiyoです。
前回と同じく、今回も賢威テンプレートのカスタマイズについて書いていこうと思います。
今回のカスタマイズ箇所はグローバルメニューの部分です。どの部分かと言えば、以下の画像の部分です。
この縦幅って広い気がしませんか?
個人的には、このグローバルメニューが少し広いと感じているので、カスタマイズして少しだけ狭くしようと思います。
賢威のグローバルメニューのカスタマイズ方法は簡単です。
まず、ワードプレス管理画面の外観から「base.css」を選択します。
ワードプレス管理画面 > base.css
その中にある、グローバルメニューのタグ「 .global-nav-in li a{ 」を探しだします。
グローバルメニューのタグを探し出したら「 padding 」の数値を小さくします。この数値を小さくすればグローバルメニューの縦幅も狭くなります。因みに僕は、「 padding 」の数値を「0.5」にしました。
因みに、ここの数値を1以下の小数点で入力するときは、カンマ「,」ではなくドット「.」で入力しましょう。カンマとドットでは、だいぶデザインが変わってくるので注意してください。
入力後、更新すればグローバルメニューの縦幅は良い感じに狭くなっています。以下の画像がその結果です。いかがでしょうか。良い感じにスッキリしているのではないでしょうか。
以上で、賢威のグローバルメニューのカスタマイズは完了です。
このグローバルメニューをカスタマイズした理由は・・・、特にありません(笑)。デフォルトのグローバルメニューの縦幅が見た目で広く、すこし不格好に見えたからです。なので、完全に僕の好みでやったカスタマイズなので、多くの人に当てはまらないのかもしれません。
まぁ、賢威のグローバルメニューをスッキリさせたい方にはおすすめです。
→ 賢威でグローバルメニューとトップ画像の間にスペースを入れる方法
なお、今回の解説を動画で撮りました。お時間がある方は是非!
では、また。