MENU

＼このブログが役に立ったら／

サポートする
SWELLのカスタマイズ・使い方相談はコチラ
SWELL推しによるSWELLカスタマイズメモ

ロゴの横にボタンを設置するカスタマイズ記事はこちら >>

Twitter
SWELLのウィジェットエリアが一目で分かるサイトを作りました >>

【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＝左右の余白

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

あわせて読みたい
【SWELL】ヘッダー・フッターメニューにカーソルを乗せたときに反転色にする SWELLのヘッダーのホバーエフェクトは5種類から選べて、かなり充実してますよね。個人的にはマウスを乗せたときに色が反転するのが好きなので、CSSをメモっておきます。…

＼このブログが役に立ったら／

サポートする
SWELL
コーポレートサイト ヘッダー
上手くいったらシェアしてね！
  • URLをコピーしました！

関連記事

お気軽にどうぞ！

コメント一覧 （8件）

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

    返信

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

      返信

    • 参考にしていただけて嬉しいです！SWELLを楽しみましょう＼(^o^)／！

      返信

  • こんにちは、はじめまして
    探していた情報にたどり着けてとてもありがたいです。

    質問なのですが、
    文字色を変更したくて
    この記事のcssコードを貼り付けたところ反映されず原因が分からず困っています。

    .p-spHeadMenu .menu-item{font-size:17px;}
    というコードだと文字の大きさが反映されるのですが
    {color:文字色;}を入れても文字色が反映されませんでした。

    もしよろしければ、
    どうすればいいか教えていただけないでしょうか。
    お忙しいところ申し訳ありません。

    返信

    • ブログを見てくださり、ありがとうございます！
      【.p-spHeadMenu .menu-item】と言うclass名のcssは当記事で紹介したものとは違うようなのですが、もともときなこさんが使っていたCSSが効かなくなったと言うことでしょうか？^_^

      返信

  • ご返信ありがとうございます。
    わかりづらくなってしまって申し訳ありません汗

    【.p-spHeadMenu .menu-item】
    はもともと文字の大きさ指定のため使っておりました。

    文字色の変更をしたかったのですが方法が分からず
    検索したところこちらのサイトに辿り着き、
    いったん↑のcssを消して
    【.c-gnav>.menu-item>a .ttl】
    を試してみました。
    （font-sizeとcolorの指定をしました）

    ところが、文字サイズも文字色も反映されず・・・

    という状況でした。

    返信

    • 返信遅れてすみません。
      きなこさんの使っている【.p-spHeadMenu .menu-item】はスマホ用のメニューなので、この記事で紹介しているPC用のものを使っても反映されませんm(_ _)m
      (PCとスマホ用は別々で指定します)

      フォントサイズ指定で元々【.p-spHeadMenu .menu-item】を使っていて、さらに色の変更もされたいのであれば、その中にcolorの指定を入れてみる方が正しいですね^_^
      class名が変わると、そもそもの効く場所が変わってしまいますm(_ _)m

      返信

コメントする

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

CAPTCHA

もくじ