【SWELL】グローバルナビの高さ・余白・文字の大きさを変更するCSS

今回はワードプレステーマ「SWELL」のグローバルナビ（ヘッダーメニュー）の高さ・余白・文字の大きさなどを変更するCSSコードを紹介します。

CSSがわからない方向けに、当ブログで使用しているCSSコードをコピペした後で自分好みにグローバルナビをカスタマイズする方法を紹介しているので気楽にお読みください！

まずはCSSコードをコピペ

.c-gnav{
  height: 60px;
}

.c-gnav>.menu-item>a .ttl {
  margin: 0 10px;
  font-size: 14px;
  color: white;
  font-weight: 600;
  letter-spacing: 1.3px;
}

SWELLの「外観＞カスタマイズ＞ヘッダー＞ヘッダーメニュー」ではヘッダーメニューの背景色とサブメニューの背景色しか変更できなかったので、それ以外の主なデザインを変更するためのコードになります。

まずは上記のCSSコードを「追加CSS」にコピペして、グローバルナビを自分好みにカスタマイズする方法は下をご覧ください。

グローバルナビの高さを変更

.c-gnav{
  height: 60px;
}

グローバルナビの「高さ」を指定するには、.c-gravの「height」で任意の高さをピクセル値（px）で指定します。

グローバルナビの文字周りの余白を変更

.c-gnav>.menu-item>a .ttl {
  margin: 0 10px; /* これ */
  font-size: 14px;
  color: white;
  font-weight: 600;
  letter-spacing: 1.3px;
}

文字外側の余白は「margin」で指定できます。

グローバルナビの文字を垂直方向に置いて中央表示させたい場合は「margin: 0 〇〇px」とし、〇〇に左右の余白をピクセル値で指定します。

文字のデザインを変更｜大きさ・色・太さ・間隔

.c-gnav>.menu-item>a .ttl {
  margin: 0 10px; 
  font-size: 14px; /* 文字の大きさ */
  color: white; /* 文字の色 */
  font-weight: 600; /* 文字の太さ */
  letter-spacing: 1.3px; /* 文字の間隔 */
}

グローバルナビの文字のデザインの変更方法は上記の通りです。

ブロガー必見！ブログ×プログラミングは相性抜群