STINGER5のカスタマイズ【ドロップダウンメニュー】

【釣りのネタ帳】では、管理人が行ったFC2からWordPressへ引越し（移転）方法と、ブログサイトのカスタマイズ方法について、順次紹介しています。

過去の紹介内容はコチラからどうぞ

FC2からWordPressへのブログ移転（引越し）方法のまとめサイト

今回は管理人も使用しているテーマSTINGER5に、親・子・孫までの3階層を持たせたドロップダウンメニューを設置する手順について紹介します。

PC画面のみの表示になりますが、シンプル過ぎるSTINGER5のメニューを、スタイリッシュな見栄えに替えるカスタマイズです。

STINGER5にドロップダウンメニューを設置する方法

ここで紹介する方法は、WordPressのカスタムメニューに対応させていますので、別途『liタグ』などのコードを記述する必要はありません。

メニューの変更については、WordPress管理画面の『外観』→『メニュー』で設定したものが反映されるようになっています。

それでは、具体的な手順を紹介します。

【STINGER5】のheader.phpへの記述

header.phpのファイルは、STINGER5のテーマフォルダ（管理人の場合は、『stinger5ver20150505b』）中にあります。

本ファイルの記述の最後＜/header＞の直前に、以下の様な＜!－－メニュー－－＞の部分があります。

  <!--
メニュー
-->
  <nav class="smanone clearfix">
    <?php
$defaults = array(
	'theme_location'  => 'navbar',
);
wp_nav_menu( $defaults );
?>
  </nav>
</header>

<!--

メニュー

-->

<?php

$defaults = array(

'theme_location' => 'navbar',

);

wp_nav_menu( $defaults );

</nav>

</header>

こちらを、以下に示した記述に書き替えます。

  <!--
メニュー
-->
<nav class="smanone clearfix">
<?php wp_nav_menu(
    array(
        'container' => false ,
        'items_wrap' => '<ul id="menu">%3$s</ul>'
    )
); ?>
  </nav>

<!--

メニュー

-->

<?php wp_nav_menu(

array(

'container' => false ,

'items_wrap' => '<ul id="menu">%3$s</ul>'

)

); ?>

</nav>

以上で、header.phpへの記述は終了です。

次に、base.jsへの記述について記載します。

【STINGER5】のbase.jsへの記述

base.jsファイルは、STINGER5のテーマフォルダ内にある『js』というフォルダ内にあります。

本ファイルの最下部には、以下の様な記述がされています。

/*---------------------------
ドロップダウン
------------------------------*/

jQuery(document).ready(function(){
    jQuery(".menu ul.children").hide();
    jQuery("li.page_item").hover(function() {
        jQuery("ul.children",this).slideDown("slow");
    },
    function() {
        jQuery("ul.children",this).slideUp("slow");
    });
});

/*---------------------------

ドロップダウン

------------------------------*/

jQuery(document).ready(function(){

jQuery(".menu ul.children").hide();

jQuery("li.page_item").hover(function() {

jQuery("ul.children",this).slideDown("slow");

function() {

jQuery("ul.children",this).slideUp("slow");

});

更にこの下部へ、以下の様な記述を行います。

/*---------------------------
ドロップダウンメニュー
------------------------------*/

$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
    $('li').has('ul').mouseover(function(){
        $(this).children('ul').css('visibility','visible');
        }).mouseout(function(){
        $(this).children('ul').css('visibility','hidden');
        })
  }
});

/*---------------------------

ドロップダウンメニュー

------------------------------*/

$(function() {

if ($.browser.msie && $.browser.version.substr(0,1)<7)

{

$('li').has('ul').mouseover(function(){

$(this).children('ul').css('visibility','visible');

}).mouseout(function(){

$(this).children('ul').css('visibility','hidden');

})

}

});

以上で、base.jsへの記述は終了です。

最後に、style.cssへの記述について記載します。

【STINGER5】のstyle.cssへの記述

style.cssファイルは、STINGER5のテーマフォルダ内にあります。

このファイルは子テーマ作成して、その中にファイルを入れて記述を行っている方も多いと思います。

管理人も子テーマを使っていますが、本カスタマイズがうまく機能しませんでしたので、元ファイルに直接書き込みました。

まずは、style.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;
}

/*--------------------------------

メニュー

---------------------------------*/

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;

}

このメニューの部分の記述を、丸ごと以下のものに書き替えます。

/*--------------------------------
メニュー（ドロップ導入でまるまる書き替え）
---------------------------------*/
#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
    width: 100%;
    margin: 1px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 6px 27.9px;
    color: #999;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
	font-size:12px;
}

#menu li:hover > a {
    color: #fafafa;
}


#menu ul {
    margin: 20px 0 0 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;    
    background: #444;   
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    box-shadow: -1px 0 0 rgba(255,255,255,.3);      
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    width: 130px;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0; 
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3; 
    border-bottom-color: transparent;   
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

/*--------------------------------

メニュー（ドロップ導入でまるまる書き替え）

---------------------------------*/

#menu, #menu ul {

margin: 0;

padding: 0;

list-style: none;

}

#menu {

width: 100%;

margin: 1px auto;

border: 1px solid #222;

background-color: #111;

border-radius: 6px;

box-shadow: 0 1px 1px #777;

}

#menu:before,

#menu:after {

content: "";

display: table;

}

#menu:after {

clear: both;

}

#menu {

zoom:1;

}

#menu li {

float: left;

border-right: 1px solid #222;

box-shadow: 1px 0 0 #444;

position: relative;

}

#menu a {

float: left;

padding: 6px 27.9px;

color: #999;

text-transform: uppercase;

text-decoration: none;

text-shadow: 0 1px 0 #000;

font-size:12px;

}

#menu li:hover > a {

color: #fafafa;

}

#menu ul {

margin: 20px 0 0 0;

opacity: 0;

visibility: hidden;

position: absolute;

top: 38px;

left: 0;

z-index: 1;

background: #444;

background: linear-gradient(#444, #111);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

border-radius: 3px;

transition: all .2s ease-in-out;

}

#menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#menu ul ul {

top: 0;

left: 150px;

margin: 0 0 0 20px;

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#menu ul li {

float: none;

display: block;

border: 0;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#menu ul li:last-child {

box-shadow: none;

}

#menu ul a {

padding: 10px;

width: 130px;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#menu ul a:hover {

background-color: #0186ba;

}

#menu ul li:first-child > a {

border-radius: 3px 3px 0 0;

}

#menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 40px;

top: -6px;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #444;

}

#menu ul ul li:first-child a:after {

left: -6px;

top: 50%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

#menu ul li:last-child > a {

border-radius: 0 0 3px 3px;

}

以上で、style.cssへの記述は終了です。

それでは、メニューのスタイルがどのように変わったのか確認してみましょう。

【STINGER5】に設置したドロップダウンメニューの調整

まずはWordPress管理画面の『外観』→『メニュー』で、一例として幾つかのメニューを設定してみます。

メニュー設定画面

この設定を反映させたメニュー画面は、STINGER5のデフォルトでは以下のように表示されます。

STINGER5メニュー画面

非常にシンプルで、白ベースの画面であるとドロップダウンがほとんど目立ちません。

今回設定したドロップダウンメニューでは、以下のように表示されます。

ドロップダウンメニューのカスタマイズ（1）

黒ベースの灰色文字と白抜きで、良い感じに表示されていますが、管理人の画面では、余白の調整が必要のようです。

ついでにシャープさを出すために、メニューの縦幅も短くしようと思います。

先ほどメニューの記述を丸ごと書き替えた、style.css中の記述の一部を修正して調整を行います。

#menu {
    width: 100%;
    margin: 1px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;

#menu {

width: 100%;

margin: 1px auto;

border: 1px solid #222;

background-color: #111;

border-radius: 6px;

box-shadow: 0 1px 1px #777;

まず、＃menuのmarginを、60pxから1pxに修正しました。

#menu a {
    float: left;
    padding: 6px 27.9px;
    color: #999;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
	font-size:12px;

#menu a {

float: left;

padding: 6px 27.9px;

color: #999;

text-transform: uppercase;

text-decoration: none;

text-shadow: 0 1px 0 #000;

font-size:12px;

次に、＃menu aのpaddingを、12px 30pxから6px 27.9pxに修正しました。

ドロップダウンメニューのカスタマイズ（2）