どうも、トッド（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」のカラーコードを変更すると「青～？」へ変えられます。
メニューの先頭にアイコン
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)
ＨＯＭＥにアイコンをつけたいと思うときは、ホームの中にあるCSSクラスオプションに記入します。
この作業をつけたいアイコンを選んで１つ１つ行います。ここにFont Awesomeのサイトページリンクを貼っておきます。↓
上記サイトに飛んでもらうとヘッダーメニューのところに「icon」と書かれている処があるので選択してもらうとズラァーっとアイコンが出てくるのでそこから選んで表示された「fa-○○」をメモしましょう。
まとめ
今回は、「メニュー編」という事で３つのメニュー表示を変更しましたが、おそらく無駄の多いコードがあると思います。
詳しい方は見ていただくとすぐ分かると思うんですが、現在の僕のスキルではこれが限界ですのでご了承ください。
フッターメニューのカスタムについては僕の中で、結構知識が付いてきたんじゃないかな？と感じるものになりました。
最後まで読んでいただき有難うございました
コメントを残す