【Cocoon】ヘッダーメニューとサブメニューの文字サイズや高さの変更

2025年2月23日

今回はWordPressテーマ「Cocoon」のヘッダーメニューとサブメニューの変更方法となります。

今回変更する内容

文字サイズを少し小さく
高さを詰める
子メニューより下の階層の子メニューの左からの位置
背景色の変更及び透過

メインメニューにサブメニューを追加

外観＞メニュー＞表示オプション＞CSSクラスにチェック

追加したサブメニューのCSS class（オプション）に “任意のCSSクラス名” を追加＞メニューを保存

CSSを “style.css” に追加

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

.item-label {
	font-size: 14px !important; /*文字サイズ*/
	font-weight: bold !important; /*文字太さ*/
}

/*メインメニュー*/
#navi .navi-in > ul li{
	height: 40px; /*高さ*/
	line-height: 40px; /*高さ*/
	margin: 15px 0px 15px 0px !important; /*上下余白*/
}
#navi .navi-in > ul li a {
	color: #ffffff ; /*文字色*/
}

/*サブメニュー*/
.navi .sub-menu {
	padding-top: 20px !important; /*上余白*/
	background-color: rgba(0,0,0,0.8) !important; /*背景色・透過*/
}
.navi-in>ul .sub-menu li {
	margin: 5px 0px 5px 0px !important; /*余白*/
	padding: 0px 0px 0px 0px !important; /*余白*/
	height: 20px !important; /*高さ*/
}
.navi-in>ul .sub-menu li a {
	color: #ffffff !important; /*文字色*/
}

/*サブメニュー下階層*/
.navi-in>ul li .sub-menu-lowerlevel  {
padding: 0px 0px 0px 15px !important; /*左余白*/
}

今回はWordPressテーマ「Cocoon」のヘッダーメニューとサブメニューの文字サイズや背景色等の変更方法でした。

Note

31行目の “.sub-menu-lowerlevel” は任意でつけたCSSクラス名に変更して下さい。