ヘッダーメニューのサイズ・色をカスタマイズ【SWELL】

SWELLは自由度の高い記事執筆が可能です。

しかし、ヘッダー周りのデザインはCSSを使用しないと変更しづらくなっています。

ヘッダーは見られる頻度が高いので、サイト管理者としては少しでも理想的なデザインにしたいですよね？

そのような悩みを解決できるよう、今回はCSSを使った簡単なカスタマイズ方法をご紹介します。

ヘッダーメニューのサイズ・色を変更

ヘッダーメニューのサイズや色などを変更する方法です。

1階層目のメニュー

1階層目のメニューのみをカスタマイズする方法です。

/* 1階層目のメニュー */
:is(#header, #fix_header) .c-gnav>li>a .ttl {
	font-size: 1.5em; /* サイズ */
	color: #3557bd; /* 色 */
	font-weight: bold; /* 太さ */
	letter-spacing: .5em; /* 字と字の間 */
}

1階層目とサブメニュー（＞アイコン含む）

1階層目とサブメニューをカスタマイズする方法です。

このコードではサブメニューの「＞」のアイコンも同時にカスタマイズしています。

/* 1階層目のメニュー */
:is(#header, #fix_header) .c-gnav>li>a .ttl {
	font-size: 1.5em; /* サイズ */
	color: #3557bd; /* 色 */
	font-weight: bold; /* 太さ */
	letter-spacing: .5em; /* 字と字の間 */
}

/* サブメニュー：＞のアイコンも調整する場合 */
:is(#header, #fix_header) .sub-menu a{
	font-size: 1.5em; /* サイズ */
	color: #3557bd; /* 色 */
	font-weight: bold; /* 太さ */
	letter-spacing: .5em; /* 字と字の間 */
}

1階層目とサブメニュー（＞アイコン含まない）

1階層目とサブメニューをカスタマイズする方法です。

このコードではサブメニューの「＞」のアイコンはカスタマイズしません。

/* 1階層目のメニュー */
:is(#header, #fix_header) .c-gnav>li>a .ttl {
	font-size: 1.5em; /* サイズ */
	color: #3557bd; /* 色 */
	font-weight: bold; /* 太さ */
	letter-spacing: .5em; /* 字と字の間 */
}
/* サブメニュー */
:is(#header, #fix_header) .sub-menu .ttl {
	font-size: 1.5em; /* サイズ */
	color: #3557bd; /* 色 */
	font-weight: bold; /* 太さ */
	letter-spacing: .5em; /* 字と字の間 */
}

スマホ用のハンバーガーメニューのカスタマイズ記事はこちら

 ハンバーガーメニュー（スマホ）のカスタマイズ【SWELL】

ヘッダーメニュー同士の余白を空ける

ヘッダーメニューの内側の余白を広げるカスタマイズです。

赤枠部分の余白を広げます。

:is(#header, #fix_header) .c-gnav>li>a {
	padding: 0 1rem; /* メニュー内側の余白 */
}

ヘッダーメニューを非表示にする方法

ヘッダーメニューを非表示にしてロゴのみを表示するカスタマイズです。

1. 「ダッシュボード」＞「外観」＞「メニュー」に移動
2. 「メニュー名」：任意
3. 「メニューの位置」：グローバルナビ
4. メニューは指定しない（空の状態）

ヘッダーメニュー下の英字のカスタマイズ

英字の追加手順

ヘッダーメニュー下に英字を追加するカスタマイズです。

1. 「ダッシュボード」＞「外観」＞「メニュー」に移動
2. 「表示オプション」を選択
3. 「説明」にチェックを入れる
4. メニューの説明に英字を追加

英字を上に表示する

:is(#header, #fix_header) .c-gnav>li>a {
    flex-direction: column-reverse;
    gap: .5em; /* メニューと英字の余白 */
}

英字のサイズや色を変更

:is(#header, #fix_header) .c-gnav>li>a .c-smallNavTitle {
	font-size: 1.5em; /* サイズ */
	color: #3557bd; /* 色 */
	font-weight: bold; /* 太さ */
	letter-spacing: .5em; /* 字と字の間 */
	opacity: 1; /* 透過具合 */
}

まとめ｜SWELLヘッダーのカスタマイズ

SWELLはデフォルトでも満足度の高いデザインが可能です。

そのSWELLにほんの少しCSSを追加して独自性の高いサイトを作成してみましょう。