【お知らせバーカスタマイズテスト中】SWELLのウィジェットエリアが一目で分かるサイトを作りました >> SWELLのウィジェットエリアが一目で分かるサイトを作りました >>

【SWELL】ヘッダー(グローバル)ナビのカスタマイズ/フォントサイズ・文字色・太さ・文字間隔・余白を変更

SWELLのヘッダーナビ(グローバルナビゲーション)をカスタマイズするためのCSSをいろいろ紹介します。

この記事で紹介すること
  • フォントサイズ(文字の大きさ)を大きくする
  • 文字色を変える
  • 太字にする
  • 文字間隔を広くする
  • 左右に余白をつける

SWELLを使っていて、グローバルナビゲーション(ヘッダーメニュー)の文字サイズを大きくしたいなーとか、色を変えたいなーとか、思うことがあるかもしれません。そんな時用のCSSメモです。

CSSを貼り付ける場所は「外観」→「カスタマイズ」→「追加CSS」です。
インデント付けてないので、自由に調節してください。

もくじ

【SWELL】ヘッダーナビのフォントサイズ・文字色・太さ・文字間隔を変更

.c-gnav>.menu-item>a .ttl {
font-size: 16px;
color: #006d4d;
font-weight: bold;
letter-spacing: 1.3px;
}
  • font-size: 16px; =フォントサイズ
  • color: #006d4d; =文字色
  • font-weight: bold; =太字
  • letter-spacing: 1.3px;=文字間隔(使うことないかも)

全部使うのではなく、必要なものだけコピペすればOK。

「太字」のCSSも一緒に使う場合は、フォントサイズ大きくしすぎない方が良いです。(のっぺりした感じになるので)
紹介したCSSの文字色は濃いグリーンになっているので、好きな色に変更してください。

文字間隔はあんまり需要がなさそうですが、個人的にはヘッダーナビに少し文字間隔の余裕を持たせるのが好きなので紹介しました。
ひらがなやアルファベットだと気にならないけど、漢字多めの時は文字間隔を調節すると綺麗に見える気がします。

【SWELL】ヘッダーナビの項目それぞれの左右の余白を変更

ヘッダーナビをロゴの横にした時

.c-gnav>.menu-item>a {
padding: 0 10px;
}
  • 0=上下の余白(変更しないでください)
  • 10px=左右の余白

ヘッダーナビを上下にした時

.-parallel .l-header__gnav .c-gnav>li>a {
padding: 16px 20px;
}
  • 16px=上下の余白
  • 20px=左右の余白

メニューの項目数によって、数字を調節してください。

上手くいったらシェアしてね!
  • URL Copied!

お気軽にどうぞ!

コメント一覧 (2件)

  • SWELLを使っているのですがとても参考になりました!
    何度もこのページを参考にしてカスタムしています!ありがとうございます!
    またどんどん新しいカスタムを紹介してください!

    • コメントいただき、ありがとうございます!使っていただけて嬉しいです(*^_^*)

みさき@セブ島 へ返信する コメントをキャンセル

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ
閉じる