stinger5ナビケーションメニューバーをグラデーションカスタマイズ

stinger 5グラデーション, サブメニュー, ナビケーションメニューstinger 5, サブメニュー, ナビケーションメニュー

stinger5

何回かこのブログで取り上げていますが、stinger5のナビケーションメニューを改めてリニューアルしたので備忘録として書き留めています。もちろんサブメニュー付きです。
リニューアルしたstinger5のサブメニュー付きのナビケーションメニューをグラデーションカスタマイズをした備忘録として紹介しています。

 

サブメニュー付きメニューバーのグラデーション

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

前回このブログでナビケーションメニューのカスタマイズを紹介していました。
stinger5サブメニュー付きナビケーションメニューをカスタマイズ

stinger5 ナビケーションメニューのカスタマイズ

今回は以前にも増してより理想に近いナビケーションメニューになった。

 

header.phpの書き換え

「header.php」を開いて「</header>」すぐ上の 「<!?メニュー?>」の部分を書き換えます。
デフォルトでは

[php]
<!–
カスタムヘッダー画像
–>
<div id=”gazou”>
<?php if(get_header_image()): ?>
<p id=”headimg”><img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></p>
<?php endif; ?>
</div>
<!– /gazou –>
<!–
メニュー
–>
<nav class=”smanone clearfix”>
<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</nav>
</header>
[/php]
となっていると思います。

上記コード内にある
[php]
<!–
メニュー
–>
<nav class=”smanone clearfix”>
<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</nav>
[/php]
上記コードを削除してからそこに下記コードを追記します。
[php]
<!–メニュー–>
<nav class=”smanone clearfix”>
<?php wp_nav_menu(
array(
‘container’ => false ,
‘items_wrap’ => ‘<ul id=”menu”>%3$s</ul>’
)
); ?>
</nav>
[/php]

 

私の場合他にカスタマイズしているので

子テーマの「header.php」を書き換えた。
[php]
<!– /アコーディオン –>
<!– 移動<div id=”wrapper”> –>
<header>
<!–メニュー–>
<nav class=”smanone clearfix”>
<div class=”header-nav-inner”>

<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</div>
</nav>
<div class=”header-inner”>
<!– ロゴ又はブログ名 –>
[/php]
上記コード内にある以下のコード

「<div class=”header-nav-inner”>」を
「<header> 」の下に移動する。
上記コード内にある
[php]
<!–メニュー–>
<nav class=”smanone clearfix”>
<div class=”header-nav-inner”>

<?php
$defaults = array(
‘theme_location’ => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</div>
</nav>
[/php]
上記コードを削除してからそこに下記コードを追記した。
[php]
<!–メニュー–>
<nav class=”smanone clearfix”>
<?php wp_nav_menu(
array(
‘container’ => false ,
‘items_wrap’ => ‘<ul id=”menu”>%3$s</ul>’
)
); ?>
</nav>
</div>
[/php]

 

js/base.jsファイルに追記

FFFTPソフト等で自分のサーバーにアクセスします。

「wp-content」フォルダー ⇒「themes」フォルダー ⇒ 親の「stinger5バージョン」フォルダー ⇒ 「js」フォルダーをクリックする。

次にそのフォルダーの中にある「base.js」をPCのお好きなフォルダーにダウンロードする。

次にダウンロードした「base.js」を「Terapad」等で開きます。

開いたら次に以下のコードを最下部にコピペします。
[php]
/*—————————
ドロップダウンメニュー
——————————*/

$(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’);
})
}
});
[/php]

 

 

ここで注意

コピペが終わって保存する時は、文字コードに注意が必要です。

「Terapad」等で開いた時、右下の方に「文字コード」が表示されていると思います。

保存する時は、その「文字コード」で保存しないとダメのようです。

私の場合「文字コード」は、「SHIFT-JIS」だったので文字コードを「SHIFT-JIS」にして上書き保存した。

 

 

次に上書き保存できた「base.js」ファイルをサーバーにアップロードする。

 

スタイルシート(style.css)に追記

念のため、親テーマのスタイルシート(style.css)内にある「メニュー」を「コメントアウト」した。

コードの先頭行の前に「/* コメントアウト —-」を追記。
コードの最終行の後ろに「—– コメントアウトここまで */」
子テーマのスタイルシート(style.css)を開きます。

 

そんで改めてカスタマイズしたコードを子テーマに追記した。
[css]
/*——————————————–
ナビゲーション(メニュー)のカスタマイズ 4

メニューをドロップダウンリストのように階層化
———————————————*/
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu {
width: 100%;
margin: 60px auto;
border: 1px solid #222;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
box-shadow: 0 1px 1px #777;
/*– メニュー全体の背景グラデーション –*/
}

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

#menu:after {
clear: both;
}

#menu {
zoom:1;
}

#menu li {
float: left;
position: relative;
}

#menu li:first-child before,
#menu li:first-child after {
content: “”;
display: table;
}
#menu a {
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px #000;
font-size:14px;
}

#menu li:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #666666;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#666666’, endColorstr = ‘#111111’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#666666’, endColorstr = ‘#111111’)”;
background-image: -moz-linear-gradient(top, #666666, #111111);
background-image: -ms-linear-gradient(top, #666666, #111111);
background-image: -o-linear-gradient(top, #666666, #111111);
background-image: -webkit-gradient(linear, center top, center bottom, from(#666666), to(#111111));
background-image: -webkit-linear-gradient(top, #666666, #111111);
background-image: linear-gradient(top, #666666, #111111);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*– メニューホバー時の背景グラデーション –*/
}

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

#menu ul {
margin: 20px 0 0 0;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
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;
background-color: #0000cd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#0000cd’)”;
background-image: -moz-linear-gradient(top, #4169e1, #0000cd);
background-image: -ms-linear-gradient(top, #4169e1, #0000cd);
background-image: -o-linear-gradient(top, #4169e1, #0000cd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#0000cd));
background-image: -webkit-linear-gradient(top, #4169e1, #0000cd);
background-image: linear-gradient(top, #4169e1, #0000cd);
/*– メニューホバー時サブメニューの背景グラデーション –*/
}

#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;
font-size:15px;
}

#menu ul a:hover {
background-color: #04acea;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#04acea’, endColorstr = ‘#0186ba’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#04acea’, endColorstr = ‘#0186ba’)”;
background-image: -moz-linear-gradient(top, #04acea, #0186ba);
background-image: -ms-linear-gradient(top, #04acea, #0186ba);
background-image: -o-linear-gradient(top, #04acea, #0186ba);
background-image: -webkit-gradient(linear, center top, center bottom, from(#04acea), to(#0186ba));
background-image: -webkit-linear-gradient(top, #04acea, #0186ba);
background-image: linear-gradient(top, #04acea, #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 #04acec;
}

#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;
}
[/css]

 

まとめ

 

なんか長~いコードになってしまったけど、もしかしたら要らないコードが出てきたりして?

その時は「メンゴ!!!」

グラデーションについてですが、現バージョンの「Google Chrome」・「Firefox」と「ie 11」での確認はしていますが、それ以前のバージョンや「サファリ」等の他のブラウザについては確認が取れていない。

なので本当にこのコードでグラデーションがすべて掛かっているか判りません。

またブログによってはマージンやパディングの変更調整が必要と思われます。

まだまだ私の理想に近づいただけで完全ではありません

その時は備忘録として紹介します。