【STINGER6】ドロップダウンメニューをお洒落にカスタマイズ！［PC スマホタブレット対応］

どうも、ジョニー（@creatorcheck）です。

前回記事『【STINGER5】ドロップダウンメニューをお洒落にカスタマイズ！［PC スマホタブレット対応］』を書きましたが..

昨日、パソコン初心者の方から

「STINGER6を導入しているが、どうしても反映されない！」

という、お問い合わせを頂きました。

こりゃ嘸かし困っているに違いない！

っと思いましたので、この記事でお答えします。

基本的にSTINGER5と同様、STINGER6でも変わらず使えます。

同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。

これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね！

使用するにしても、カスタマイズするにしても、自己責任でお願いします。

では、いってみよう！

1 カスタマイズスタート
- 1.1 「CSSコード」をいじる。
2 まとめ（感想）

カスタマイズスタート

「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;
  }
}
/*ナビゲーションメニューのカスタマイズ スマホ＆タブレット表示編  終了*/

色やサイズはお好きなように
カスタマイズしてください。

実際に私もSTINGER6をダウンロードして試したので、上記のようにすれば確実にできますよ。