【STINGER8】3種メニュー「header・accordion・footer」のデザインカスタム(アイコン有)

この記事を読むのに必要な時間は約 12 分です。

どうも、トッド（Todd）です。

今回はSTINGER8の「メニュー編」のカスタマイズをやっていこうと思います。

メニューの種類として、「ヘッダーメニュー」「アコーディオンメニュー」「フッターメニュー」があるので1つずつ変更していこうと思います。

ヘッダーメニューのカスタム
アコーディオンメニューのカスタム
フッターメニューのカスタム
メニューの先頭にアイコン

ヘッダーメニューのカスタム

STINGER8のデフォルトでのヘッダーメニューの形は以下の(ビフォー)ような表示になっています。

※デフォルトではアイコン無し(アイコンの表記はWP-プラグインで可能になります)最後にプラグインも載せておきます。

(ビフォー)

ここから、背景色・文字色・中央寄せ・マウスオーバー時の背景色・〃文字色を変更しました。

それがこの(アフター)になります。↓

(アフター)

下記のコードをコピペしてもらうとアフターデザインになりますので参考になればと思います。↓

#st-menubox {
	  display: flex;
    border-top: solid 1px #757575;
    border-bottom: solid 1px #757575;
	  border-right: solid 1px #757575;
	  border-left: solid 1px #757575;
    margin-bottom: 10px;
	  border-radius: 10px;
	  background-color: #00acff
}

header .smanone ul.menu li a:hover {
    color: #00acff;
	  background: #fff;
}

header .smanone ul.menu li a {
    display: block;
    font-size: 13px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

header .smanone ul.menu li li a {
    background: #00acff;
    border-top: #e0e0e0 solid 1px;
    border-left: #e0e0e0 solid 1px;
    border-right: #e0e0e0 solid 1px;
    z-index: 2;
}

子テーマのSTINGER8 childのstyles.heetに記入していただく感じです。border-radiusの数値を変更することでBOXの角に丸みの調節が可能です。

アコーディオンメニューのカスタム

アコーディオンメニューというのはスマートフォンで表示されるメニューの形でstinger8では右上に三本線で表示されているものです。

押してみると分かるようにスライドで設定したカテゴリーが表示されます。今回は、ココの変更にも挑戦してみます。

デフォルトではこんな感じでした。(ビフォー)↓

これをこんな感じにしてみました。(アフター)↓

アコーディオンメニューの形は変えずに、全体の色を変更しました。少し長いですがCSSのコードを貼っておきます。↓(アフター)

/*アコーディオンメニューボタン*/
#s-navi dt.trigger .op {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif; 
	color: #fff;
	font-size:25px;
	line-height:30px;
	background:#00acff;
	display:block;
	float:right;
	height:auto;
	margin-top:-5px;
	padding: 10px 10px 9px 10px;
	max-width:20%;
	box-sizing:border-box;
}

#s-navi:after {
    content: "";
	display: block;
	clear: both;
	margin-bottom:5px;
}

#s-navi dd.acordion_tree {
    padding: 10px 10px 20px;
    background-color: #00acff;
    color: #fff;
    display: none;
    overflow: hidden;
    top: 0px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.acordion_tree ul.menu li {
	float: none;
	font-size: 15px;
	padding: 10px 15px 10px 15px;
	list-style:none;
	border-bottom:solid 1px #fff;
}

.acordion_tree ul.menu li a {
    text-decoration: none;
    color: #fff;
}

.acordion_tree ul.menu li .fa {
	min-width: 1em;
}

.acordion_tree ul.menu li:last-child {
	border:none;
	padding-bottom:0px;
}

.menu-close {
	padding:10px;
}

#s-navi dt.trigger {
    cursor: pointer;
    height: 40px;
    overflow: hidden;
    background-color: #00acff;
}

完成するとこんな感じのコードになりました。ドット線を直線に変更すること以外は色の変更だけですので、backgrond-color:””;の「””」の間に異なるカラーコードを記入することで色が変えられます。

フッターメニューのカスタム

ビフォー

アフター

デフォルトのフッターメニューの表示は少し寂しい雰囲気を感じたので変更しました。

カスタマイズしてみた完成がこんな感じになりました。

/*フッター*/
.footermenust {
	text-align: center;
	padding:5px;
	margin-bottom:5px;
}

.footermenust li {
	display: block;
	font-size: 14px;
	padding:0 10px;	
}

footer .footermenust li {
	border-left:5px solid #00acff;
	border-right: 5px solid #00acff;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	
	font-size:12px;
	line-height:18px;
	padding: 2px;
	margin-bottom: 2px;
}

footer .footermenust li:last-child {
	border-right: 5px solid #00acff;
}

#footer .footermenust a {
	padding:0px;
	margin:0px;
	font-size:14px;
	color:#757575;
}

border-「right・left」のカラーコードを変更すると「青～？」へ変えられます。