このブログは、今は違いますが、元々はStingerというテーマを使っていました。
そのStingerは、元々素晴らしいテーマなのですが、カスタマイズしてもっと素晴らしいデザインにしようと。
今回は、自分も困った、メニューをドロップダウン表示させるカスタマイズ方法をご紹介します。
Stinger5とは
Stingerとは、ご存じの方もいらっしゃるとは思いますが、ENJIさんが開発した初心者の方でも簡単にSEO対策やアフィリエイトを考えたブログを始められる無料テーマです。
カスタマイズもしやすくとても便利なので、このサイトでも利用させて頂いておりましたm(__)m
ウェブ屋のクセに、自分で作らないとゆー・・・(-_-;)
一応言い訳すると、自分で作る事もできるんです！が、備忘録なのでデザイン等にこだわる時間があれば記事を書いていく方が良いかなと。それに、このテーマがかなりSEO的に強いので、自作テーマより多くの方々に見てもらえるかなと。。。
Stinger5は、そのStingerの最新版(2014年12月現在)です。
メニューのカスタマイズ
そのStingerですが、メニューを階層化した際、少しおかしな表示になりました。
なんか、子階層が横に、にょーんって出てきちゃいました。
なので、綺麗にドロップダウンするようカスタマイズしたいなと思っていたら、とても良いサイトさんを発見！
まさに求めているものだったので参考にさせて頂きカスタマイズしました！
としつーるさん、ありがとうございますm(__)m
今回のカスタマイズを行うと、こんな表示にできます。
うわ～、綺麗♪♪♪
変更内容
・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]
変更すると、スマホのドロップダウンでも子階層がインデントされる形で表示されます！
