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

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

当ブログで使用しているテーマ（STINGER5）のカスタマイズした箇所の備忘録です。
（ちょいちょい書いていきます）

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

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

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

では、いってみよう！

カスタマイズする理由

デフォルトでもよいのですが、よりサイトに合ったデザインにしたかったのでカスタマイズします。

当ブログはこんな感じにしています。
パソコン表示ではこんな感じ。（オンマウス）

スマホ表示ではこんな感じ。

カスタマイズ スタート

「CSSコード」をいじる。PC表示編

「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: 5px;
  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表示編 終了*/

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

「CSSコード」をいじる。スマホ＆タブレット表示編

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

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

 
ざっくりですが、以上で完了！

上記を参考にお好きにカスタマイズどうぞ。

今回参考にした記事はこちら
「STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ」
「【Stinger5】ドロップダウンメニューのスタイリングをする方法【コピペでOK】」

まとめ（感想）

今回はナビゲーションメニューをタグっぽくカスタマイズしてみました。今は気に入ってますがまた飽きるかも（笑）

もっとカスタマイズ記事アップする.. 予定..

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver4.x対応版

posted with カエレバ

プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-14

Amazon

楽天市場

Yahooショッピング