【SWELL】サブメニューの文字や背景色の変更

2025年2月8日2025年2月17日

当サイトでも使用しているWordPressテーマ「SWELL」のグローバルナビで表示されるサブメニューの文字色・背景色とマウスホバー時のアンダーライン表示の設定です。

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加

.c-gnav .sub-menu {
	color: #fff; /* 文字色 */
	background: rgba(0, 0, 0, 0.7); /* 背景色・透過 */
}
 /* マウスホバー時のアニメーション */
.c-gnav .sub-menu a::after {
	position: absolute;
	left: 10%;
	content: '';
	width: 80% !important;
	height: 2px; /* ライン太さ */
	background: var(--color_main); /* ライン色 */
	bottom: 1px;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform 0.3s;
}
.c-gnav .sub-menu a:hover::after {
	transform: scale(1, 1);
}

Note

外観＞カスマイズ＞サイト全体設定＞基本デザイン＞サブメニューの表示形式を「アコーディオン化」した場合の設定です。