ナビゲーションメニューの文字のサイズ、文字間、太字にする方法【SWELL】

2024年7月20日2024年7月22日

ナビゲーションメニュー（グローバルナビ）の文字サイズを大きくしたいと思ったことはありませんか？
当ブログはナビゲーションメニューをアイコンにしているので、小さいとクリックしずらいかな？と思いカスタマイズしてみました。

カスタマイズ前

下の画像は文字サイズと文字間のスペースを広げたものです。

カスタマイズ後

ということで、この記事ではナビゲーションメニューの文字のカスタマイズについて解説します。

この記事で分かること

ナビゲーションメニューの文字サイズを変更する

WordPressのダッシュボードの左側のメニューから、「外観」＞「カスタマイズ」をクリックします。

「追加CSS」を開きます。

追加CSSの欄に下のコードを貼り付けます。

CSSコード

/*ナビゲーションメニュー*/
.c-gnav>.menu-item>a .ttl {
font-size: 18px;
}

「18px」の部分を好きな数値に変えてみてください。

文字間のスペースを広げたかったので、以下のCSS（背景黄色の行）も追加しました。

CSSコード

/*ナビゲーションメニュー*/
.c-gnav>.menu-item>a .ttl {
font-size: 18px;
letter-spacing: 6px;
}

当ブログはアイコンのみなのでスペースを広げましたが、文字が入ると不自然になるかもしれません。

こかげ

必要だと思ったら追加してみてね

アイコンだけの場合は必要ないですが、文字を太字にしたい場合は、以下のCSS（背景黄色の行）を貼り付けてください。

CSSコード

/*ナビゲーションメニュー*/
.c-gnav>.menu-item>a .ttl {
font-size: 18px;
letter-spacing: 6px;
font-weight: bold;
}

ブログを続けていると、「ここはもう少しこうしたいなー」など気になる部分が出てくると思います。

SWELLはカスタマイズ機能で変更できる部分もたくさんありますが、追加CSSが必要な場合もあるので、カスタマイズをしたときは記事にしたいと思います。

以上、こかげでした。

他のカスタマイズ

ナビゲーションメニューにアイコンをつけたい方は、こちらの記事をどうぞ！