【SWELL】グローバルナビメニューカスタマイズ（幅、余白、文字間隔）

SWELLのグローバルナビメニュー

SWELLのグローバルメニューの配置にはいくつか選択肢がありますが、今回カスタマイズする配置は「サイトタイトル：左、グローバルメニュー：右」の場合です。

SWELLのグローバルナビメニューはメニュー項目の文字数に応じて幅が決まっています。

文字数が多ければ幅が広くなり、文字数が少なければ幅が狭くなります。

本記事ではこの文字数が少ないメニュー項目がある場合に一定の幅を維持し、文字数が多い場合は文字数に応じて幅が決まるようになるようにするカスタマイズをご紹介します。

ついでに文字間隔、余白、文字の太さも調整します。

今回CSSで調整する項目は下記のとおりです。

/* グローバルナビメニュー */
.c-gnav>.menu-item>a .ttl{
	font-weight:bold;
}
.c-gnav>.menu-item {
	padding:0 5px;
	min-width:90px;
	letter-spacing: .03rem;
}

.c-gnav>.menu-item>a .ttl{
	font-weight:bold;
}

メニュータイトル下の小さい文字もまとめて太字にしたい場合はこのように記述します。

.c-gnav>.menu-item{
	font-weight:bold;
}

.c-gnav>.menu-item {
	padding:0 5px;
	min-width:90px;
	letter-spacing: .03rem;
}

.c-gnav>.menu-item {
	padding:0 5px;
	min-width:90px;
	letter-spacing: .03rem;
}

3行目の部分です。「最低この幅は維持してね」という指定です。

「最大この幅までしか広げないでね」という指定は「max-width:〇〇px;」です。

.c-gnav>.menu-item {
	padding:0 5px;
	min-width:90px;
	letter-spacing: .03rem;
}

4行目の部分です。letter-spacingは文字間隔を指定できます。

.c-gnav>.menu-item>a .ttl{
	font-weight:bold;
	font-size:16px;
}

3行目のように記述するとフォントサイズも指定できます。

SWELLのグローバルナビメニューカスタマイズ（幅、余白、文字間隔）についてご紹介しました。

「SWELL」は標準機能でほとんどのことがカバーできるのでおすすめです。

このような簡単なカスタマイズをプラスしてさらにオリジナリティのあるサイトにできると楽しいです。