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

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

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

 icon-book 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>

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

  <!--
メニュー
-->
<nav class="smanone clearfix">
<?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");
    });
});

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

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

$(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;
}

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

/*--------------------------------
メニュー（ドロップ導入でまるまる書き替え）
---------------------------------*/
#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;
}

以上で、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の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のpaddingを、12px 30pxから6px 27.9pxに修正しました。

 

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

 

一応メニューに3階層目を追加して、表示に問題がないことを確認しました。

因みに、上記のpaddingで横幅の調整も行ったのは、次の図でに示すように必要なメニューを全て加え、横幅丁度に調整したためです。

 

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

 

こちらが最終的な、メニュー表示の完成形です。

上記のメニューのうち、右の3種については、ドロップが発生しないように、子メニューと孫メニューがないもの（管理人の場合は、未分類、サイトマップ、お問い合わせ）を設定しました。

理由はSTINGER5では、万一アドセンス広告を設定する際に、サイドバーの最上段に広告がくるように自動設定が可能になっているためです。（アドセンス広告では、ドロップなどで広告が隠れるサイト構成はポリシー違反になります）

 

以上で、ドロップダウンメニューを設置する方法の紹介を終わります。

なお、ここで紹介したドロップダウンメニューは、CSS3 animated dropdown menuというサイトで紹介されているものです。

ここで紹介したカスタマイズは、あくまで自己責任で行って頂きますようにお願いします。

可能な限り、カスタマイズ前にファイルのバックアップを取ったり、子テーマを作成してから記述を行うなど、十分に注意を払って行うことをお勧めします。

 

【ブログ移転のまとめサイト】

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

 

サイトの新規開設や移転を検討されている方は、ドメイン無料キャンペーンを行っているタイミングでのエックスサーバー（XSERVER）がお薦めです。

内容確認のうえ、サーバーレンタルの検討をされてはいかがでしょうか。

ドメインの取得（追加取得）を考えている方はコチラ icon-arrow-circle-down

 

コチラの人気記事もどうぞ


関連記事も読まれています

海釣りおすすめロッドシリーズ3選

万能磯竿 ダイワ リバティクラブ磯風

信頼のメーカーが送り出す、波止釣りの万能ロッドは、初心者からベテランまで幅広く使用されている人気のロッドです。
軽快な振り調子、汎用ロッド中No.1の持ち軽さ、相反する最高レベルの強度を兼備した通常モデルは、ウキ釣りなどの軽い仕掛けはもちろん、サビキ釣り、カゴ釣りやチョイ投げなど負荷の掛かる仕掛けに至るまで、幅広い強度の釣りに対応可能です。
売れ筋No.1は、もっとも使いやすく汎用性の高い3号4.5mの遠投モデルです。

詳細ページ

ラインナップ

万能ルアーロッド アブガルシア クロスフィールドXRFS

コンセプトである｢様々なフィールド、ターゲット、釣り方を一本のロッドで｣をさらに突き詰めた結果、誕生したのがXRFSシリーズの9ft台モデルです。
強固なシーバスロッドでありながら、エギング2.5号～、ワインド1/4oz～の適用範囲となる本ロッドは、まさに万能ルアーロッドと言えます。
実売価格10,000円を切る、このコストパフォーマンスの高さは圧巻です。

ラインナップ

ライトSWロッド ダイワ 月下美人

アジング、メバリングの専用ロッドと呼ぶに相応しい、繊細なアタリを食い込ませる機能が、ふんだんに盛り込まれた最先端ロッドです。
食い込み性能に優れたソリッドトップのSモデルと、高速フッキングを可能にするパワフルなチューブラートップのTモデルの2タイプがあります。
おすすめは76UL-Sで極細ソリッドがもたらすフッキング時の食い込みの良さ、キャスト時のシャープな振り調子は、初心者でも扱い易いロッドです。

ラインナップ

-STINGER5
-, ,

Copyright© 釣りのネタ帳 , 2020 All Rights Reserved.