
どうも、ジョニーです。
前回記事『【STINGER5】ドロップダウンメニューをお洒落にカスタマイズ![PC スマホ タブレット対応]』を書きましたが..
昨日、パソコン初心者の方から
「STINGER6を導入しているが、どうしても反映されない!」
という、お問い合わせを頂きました。
こりゃ嘸かし困っているに違いない!
っと思いましたので、この記事でお答えします。
基本的にSTINGER5と同様、STINGER6でも変わらず使えます。
同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。
これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね!
使用するにしても、カスタマイズするにしても、自己責任でお願いします。
では、いってみよう!![johnny-c]()

カスタマイズ スタート
「CSSコード」をいじる。
パソコン初心者さんなので敢えていうと、
子テーマの「style.css」の一番上に、下記の箇所がありますよね??
/*
Theme Name: stinger6child
Template: stinger6
*/
@import url('../stinger6/style.css');
この箇所よりも下に、下記のコードをコピペしてくださいね!
/*ナビゲーションメニューのカスタマイズ PC表示編 開始*/
.smanone .menu-item {
display: inline-block;
text-align: left;
padding: 0px 5px 0px 0px;
}
.smanone a {
display: block;
padding: 15px;
border: 3px solid #dcf1f9;
position: relative;
line-height: 1.3;
padding: 3px 8px;
margin-bottom: 10px;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #fff;
}
.smanone .sub-menu {
left: -9999px;
opacity: 0;
position: absolute;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
width: 200px;
z-index: 99;
margin-top: 41px;
}
.smanone .menu > li:hover .sub-menu a, .smanone .sub-menu a {
background: #fff;
color: #000;
position: relative;
width: 150px;
border: 3px solid #dcf1f9;
box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
-webkit-box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
-moz-box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
}
nav.smanone .sub-menu li a {
border-top: none;
}
.smanone .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}
.smanone .sub-menu .sub-menu {
margin: 0px 0 0 230px;
}
.smanone .menu > li:hover .sub-menu a:hover, .smanone .sub-menu a:hover {
background: #00aaf9;
}
.smanone a {
padding: 7px 7px 7px 7px;
}
.acordion_tree li {
width: 100%;
}
nav {
padding: 0;
margin: 10px 0;
}
nav.smanone li {
border: none;
}
nav.smanone a {
color: #000;
}
nav.smanone li a:hover {
background: #00aaf9 !important;
text-decoration: none !important;
color: #fff !important;
}
nav.smanone .sub-menu li a {
border-top: none;
}
/*ナビゲーションメニューのカスタマイズ PC表示編 終了*/
/*ナビゲーションメニューのカスタマイズ スマホ&タブレット表示編 開始*/
@media only screen and (max-width: 780px) {
.acordion_tree li {
font-size: 12px;
font-weight: bold;
border: 2px solid #dcf1f9;
margin-bottom: 2px;
margin-left: -1px;
padding: 0px;
width: 100%;
border-radius: 5px;
color: #fff;
background-color: #fff;
line-height: 25px;
text-align: center;
}
.acordion_tree li li {
font-weight: normal !important;
font-size: 10px;
border: 2px solid #dcf1f9;
margin-bottom: 5px;
margin-left: 4px;
padding: 0px;
width: 30%;
border-radius: 5px;
color: #000;
background-color: #fff;
line-height: 20px;
text-align: center;
}
.acordion_tree li a,
.acordion_tree li li a {
width: 100%;
}
.acordion_tree li a:hover,
.acordion_tree li li a:hover {
background-color: #00aaf9;
text-decoration: none;
color: #fff;
border-radius: 5px;
}
}
/*ナビゲーションメニューのカスタマイズ スマホ&タブレット表示編 終了*/
色やサイズはお好きなように
カスタマイズしてください。![johnny-c]()
カスタマイズしてください。

実際に私もSTINGER6をダウンロードして試したので、上記のようにすれば確実にできますよ。
まとめ(感想)
どうでしたか?できましたか??お問い合わせを頂いたアナタの為に記事書いてみました(笑)

メリークリスマス!!
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver4.x対応版
posted with カエレバ
プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-14