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

目次

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

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

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

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

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

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

CSSでグローバルメニューを調整します

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

  1. メニュータイトルの文字だけを太くして、メニュータイトル下の小さい文字の太さは普通のままにする
  2. 横並びのメニューの間隔を作る
  3. メニューの最小幅を決めて、文字数に影響されない最小幅を指定する
  4. 文字間隔を調整する
/* グローバルナビメニュー */
.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」は標準機能でほとんどのことがカバーできるのでおすすめです。

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

  • URLをコピーしました!

コメント

コメントする

目次