ども、Kiyoです。

前回と同じく、今回も賢威テンプレートのカスタマイズについて書いていこうと思います。

今回のカスタマイズ箇所はグローバルメニューの部分です。どの部分かと言えば、以下の画像の部分です。

賢威のグローバルメニューの幅をカスタマイズ2

この縦幅って広い気がしませんか?

個人的には、このグローバルメニューが少し広いと感じているので、カスタマイズして少しだけ狭くしようと思います。

賢威のグローバルメニューのカスタマイズ方法は簡単です。

まず、ワードプレス管理画面の外観から「base.css」を選択します。

ワードプレス管理画面 > base.css

その中にある、グローバルメニューのタグ「 .global-nav-in li a{ 」を探しだします。

賢威のグローバルメニューの幅をカスタマイズ1

グローバルメニューのタグを探し出したら「 paddingの数値を小さくします。この数値を小さくすればグローバルメニューの縦幅も狭くなります。因みに僕は、「 padding 」の数値を「0.5」にしました。

賢威のグローバルメニューの幅をカスタマイズ4

因みに、ここの数値を1以下の小数点で入力するときは、カンマ「,」ではなくドット「.」で入力しましょう。カンマとドットでは、だいぶデザインが変わってくるので注意してください。

入力後、更新すればグローバルメニューの縦幅は良い感じに狭くなっています。以下の画像がその結果です。いかがでしょうか。良い感じにスッキリしているのではないでしょうか。

賢威のグローバルメニューの幅をカスタマイズ5

以上で、賢威のグローバルメニューのカスタマイズは完了です。

このグローバルメニューをカスタマイズした理由は・・・、特にありません(笑)。デフォルトのグローバルメニューの縦幅が見た目で広く、すこし不格好に見えたからです。なので、完全に僕の好みでやったカスタマイズなので、多くの人に当てはまらないのかもしれません。

まぁ、賢威のグローバルメニューをスッキリさせたい方にはおすすめです。

賢威でグローバルメニューとトップ画像の間にスペースを入れる方法

なお、今回の解説を動画で撮りました。お時間がある方は是非!

では、また。