WordPressテーマ【Stinger5】カスタマイズ!メニューをドロップダウンにする方法

テーマ
この記事は約10分で読めます。
スポンサーリンク

このブログは、今は違いますが、元々はStingerというテーマを使っていました。
そのStingerは、元々素晴らしいテーマなのですが、カスタマイズしてもっと素晴らしいデザインにしようと。
今回は、自分も困った、メニューをドロップダウン表示させるカスタマイズ方法をご紹介します。

Stinger5とは

Stingerとは、ご存じの方もいらっしゃるとは思いますが、ENJIさんが開発した初心者の方でも簡単にSEO対策やアフィリエイトを考えたブログを始められる無料テーマです。
カスタマイズもしやすくとても便利なので、このサイトでも利用させて頂いておりましたm(__)m
ウェブ屋のクセに、自分で作らないとゆー・・・(-_-;)
一応言い訳すると、自分で作る事もできるんです!が、備忘録なのでデザイン等にこだわる時間があれば記事を書いていく方が良いかなと。それに、このテーマがかなりSEO的に強いので、自作テーマより多くの方々に見てもらえるかなと。。。
Stinger5は、そのStingerの最新版(2014年12月現在)です。

メニューのカスタマイズ

そのStingerですが、メニューを階層化した際、少しおかしな表示になりました。
無題

なんか、子階層が横に、にょーんって出てきちゃいました。
なので、綺麗にドロップダウンするようカスタマイズしたいなと思っていたら、とても良いサイトさんを発見!
まさに求めているものだったので参考にさせて頂きカスタマイズしました!
としつーるさん、ありがとうございますm(__)m

今回のカスタマイズを行うと、こんな表示にできます。
無題23

うわ~、綺麗♪♪♪

変更内容

・style.css(navの部分と、アコーディオンの部分2箇所)
・header.php
の2ファイルのコードを変更します。
メニューの記述にあたるnavのスタイルとHTML、アコーディオンのスタイルの変更という事ですね。

style.cssの変更

nav部分

元:
[css]
nav li {
position: relative;
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {
text-decoration: underline;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {
text-decoration: underline;
}
[/css]

変更後:
[css]
#main-navigation {
float: left;
border-right: 1px dotted #ccc;
}
#main-navigation li {
list-style: none;
font-size: 13px;
border-left: 1px dotted #ccc;
float: left;
display: inline;
position: relative;
}
#main-navigation li a {
padding: 5px 10px;
display: block;
color: #1a1a1a;
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#main-navigation li a:hover {
color: #b22222;
text-decoration: underline;
}
#main-navigation li a span {
font-size: 10px;
font-weight: normal;
display: block;
}
#main-navigation li ul {
display: none;
background: #f8f8f8;
font-size: 11px;
border-top: 1px dotted #ccc;
border-left: 1px dotted #ccc;
border-right: 1px dotted #ccc;
padding: 0;
position: absolute;
top: 100%;
left: 0;
margin: 0 0 0 -1px;
z-index: 999;
}
#main-navigation li ul li {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
#main-navigation li ul li a {
width: 120px;
padding: 5px 30px;
border-bottom: 1px dotted #ccc;
}
#main-navigation li ul li ul {
top: 0;
left: 100%;
margin: 0;
}
[/css]

アコーディオン部分

元:
[css]
#s-navi dd.acordion_tree {
padding: 0px 10px;
display:none;
overflow: hidden;
}
.acordion_tree li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.acordion_tree li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border: 0px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.acordion_tree li a {
float: left;
color: #333;
text-decoration: none;
}
[/css]

変更後:
[css]
#s-navi dd.acordion_tree {
display: none;
width: 100%;
border-top: 2px solid #333;
background: #fff;
left: 0;
}
.acordion_tree li {
line-height: 30px;
}
.acordion_tree li li {
font-size: 80%;
padding: 0 24px;
}
.acordion_tree li a {
font-size: 14px;
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left:15px;
background: #fff;
border-bottom: 1px solid #ddd;
text-decoration: none;
position: relative;
}
[/css]

header.phpの変更

元:
[php]
<nav class="smanone clearfix">
<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</nav>
[/php]

変更後:
[php]
<nav id="main-navigation" class="smanone clearfix">
<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</nav>
<script type=’text/javascript’>
jQuery(function(){
jQuery("#main-navigation li").hover(
function(){
jQuery(">ul:not(:animated)",this).slideDown(120);
},
function(){
jQuery(">ul",this).slideUp(120);
});
});
jQuery(function(){
jQuery("#xs-menu-btn").on("click", function() {
jQuery("#xs-navigation").slideToggle();
});
});
</script>
[/php]

変更すると、スマホのドロップダウンでも子階層がインデントされる形で表示されます!

たきお

うぇぶめも。運営者のたきおです。
ジョギング・草野球が趣味のデブです。

2019年、ダイエットも兼ねてフルマラソンサブフォーを目指す事にしました。このブログではマラソンの目標達成を目指す日々や自分の備忘録も兼ねて、ウェブ系のちょっとした情報などを発信しております。

ツイッターではブログの運営報告等を発信しています!
小太りウェブ屋ブロガーたきお( @webmemo2014 )
フォローして頂けると励みになります♪

もっと詳しく

フォローしてくれると、うれしい。

ブログランキングに参加しました!
楽しめましたらぽちっと応援お願いします♪

にほんブログ村 その他スポーツブログ マラソンへ  
PVアクセスランキング にほんブログ村

テーマ
スポンサーリンク
フォローしてくれると、うれしい。
うぇぶめも。

コメント