Udemyセール開催中! 対象コースが1,220円から

【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; /* 文字の間隔 */
}

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

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

ブログ運営しているとプログラミングに興味が湧いてくる方が多いはずです!

けど、プログラミングに一度も触れたことがない方にとって「難しいから自分にはどうせプログラミング無理」と思ってしまっている方がほとんどだと思いますが、実際は違います。

3日あればブログ運営に必要なプログラミングスキルは身につきます!

「嘘でしょ!」と思うかもしれませんが、私を含め一般的なブロガーに必要なプログラミングスキルとは、本記事でも紹介した「CSS」だけでなので早い人なら1日、長くても3日あれば基本的なCSSのスキルは習得できます。

また、プログラミングを知ることで「高単価案件」プログラミングスクールのアフィリエイト記事が書けるようになるのでブログネタを作るのにも役立ち「一石二鳥」です!

こんな感じのアフィリエイト記事が書ける↓

読者の方で「プログラミングとは何か?」「効率的な学習方法は?」など気になる方はプログラミングスクールの無料カウンセリングで相談してみるのがオススメです!

私は現時点で8つのプログラミングスクールの無料カウンセリングで話を聞いてきましたが、優良プログラミングスクールではカウンセラーさんの対応が丁寧で何度も質問できるので情報収集をするのにとても重宝しました。

未経験者で教養(ブログのため)でプログラミングを学ぶことに興味がある方は「侍エンジニア塾」または「テックアカデミー」の無料カウンセリングで話を聞いてみるのがオススメです!

  • URLをコピーしました!
目次
閉じる