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

どうも、トッド(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, "MS Pゴシック", 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」のカラーコードを変更すると「青~?」へ変えられます。

メニューの先頭にアイコン

 WP-プラグイン「Font Awesome 4 Menus」を使ってメニューカテゴリーの先頭にアイコンをつけたいと思います。

STINGER8では、デフォルトの状態でFont Awesomeが組み込まれているので設定が簡単に行うことが出来ました。

インストール~有効化まで

WordPress管理画面から「プラグイン」→「新規追加」へ進みます。そこから検索欄にFont Awesome 4 Menusと検索すると出てきます。↓

インストールして有効化にします。

設定方法

有効化が出来たら、Wordpress管理画面から「設定」→「Font Awesome」へ進みます。

すると以下のような画面表示になるのでSTINGER8の場合この通りに設定してもらうと大丈夫です。↓

そして、最後にsave settingsを押して設定は完了です。

導入方法

それでは、メニュー横にアイコンを表示させるまでの流れを話していきます。

まず、Wordpress管理画面から「外観」→「メニュー」へ進みます。そこから「表示オプション」を押し、「詳細メニュー設定を表示」の中にあるCSSクラスのところにピンを打ちます。

あとは、付けたいメニューカテゴリーにFont Awesomeから選んだアイコンのCSSを記入するだけでアイコンが表示されるようになります。↓(例、fa-home)

HOMEにアイコンをつけたいと思うときは、ホームの中にあるCSSクラスオプションに記入します。

この作業をつけたいアイコンを選んで1つ1つ行います。ここにFont Awesomeのサイトページリンクを貼っておきます。↓

 

上記サイトに飛んでもらうとヘッダーメニューのところに「icon」と書かれている処があるので選択してもらうとズラァーっとアイコンが出てくるのでそこから選んで表示された「fa-○○」をメモしましょう。

まとめ

今回は、「メニュー編」という事で3つのメニュー表示を変更しましたが、おそらく無駄の多いコードがあると思います。

詳しい方は見ていただくとすぐ分かると思うんですが、現在の僕のスキルではこれが限界ですのでご了承ください。

フッターメニューのカスタムについては僕の中で、結構知識が付いてきたんじゃないかな?と感じるものになりました。

 

最後まで読んでいただき有難うございました

コメントを残す

メールアドレスが公開されることはありません。