【釣りのネタ帳】では、管理人が行ったFC2からWordPressへ引越し（移転）方法と、ブログサイトのカスタマイズ方法について、順次紹介しています。
過去の紹介内容はコチラからどうぞ
FC2からWordPressへのブログ移転（引越し）方法のまとめサイト
今回は管理人も使用しているテーマSTINGER5に、親・子・孫までの3階層を持たせたドロップダウンメニューを設置する手順について紹介します。
PC画面のみの表示になりますが、シンプル過ぎるSTINGER5のメニューを、スタイリッシュな見栄えに替えるカスタマイズです。
目次
STINGER5にドロップダウンメニューを設置する方法
ここで紹介する方法は、WordPressのカスタムメニューに対応させていますので、別途『liタグ』などのコードを記述する必要はありません。
メニューの変更については、WordPress管理画面の『外観』→『メニュー』で設定したものが反映されるようになっています。
それでは、具体的な手順を紹介します。
【STINGER5】のheader.phpへの記述
header.phpのファイルは、STINGER5のテーマフォルダ（管理人の場合は、『stinger5ver20150505b』）中にあります。
本ファイルの記述の最後＜/header＞の直前に、 以下の様な＜!－－メニュー－－＞の部分があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- メニュー --> <nav class="smanone clearfix"> <?php $defaults = array( 'theme_location' => 'navbar', ); wp_nav_menu( $defaults ); ?> </nav> </header> |
こちらを、以下に示した記述に書き替えます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- メニュー --> <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』というフォルダ内にあります。
本ファイルの最下部には、以下の様な記述がされています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*--------------------------- ドロップダウン ------------------------------*/ 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"); }); }); |
更にこの下部へ、以下の様な記述を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*--------------------------- ドロップダウンメニュー ------------------------------*/ $(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の中で以下の記述を探します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/*-------------------------------- メニュー ---------------------------------*/ 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; } |
このメニューの部分の記述を、丸ごと以下のものに書き替えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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; 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のデフォルトでは以下のように表示されます。
非常にシンプルで、白ベースの画面であるとドロップダウンがほとんど目立ちません。
今回設定したドロップダウンメニューでは、以下のように表示されます。
黒ベースの灰色文字と白抜きで、良い感じに表示されていますが、管理人の画面では、余白の調整が必要のようです。
ついでにシャープさを出すために、メニューの縦幅も短くしようと思います。
先ほどメニューの記述を丸ごと書き替えた、style.css中の記述の一部を修正して調整を行います。
|
1 2 3 4 5 6 7 8 |
#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に修正しました。
|
1 2 3 4 5 6 7 8 |
#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に修正しました。
一応メニューに3階層目を追加して、表示に問題がないことを確認しました。
因みに、上記のpaddingで横幅の調整も行ったのは、次の図でに示すように必要なメニューを全て加え、横幅丁度に調整したためです。
こちらが最終的な、メニュー表示の完成形です。
上記のメニューのうち、右の3種については、ドロップが発生しないように、子メニューと孫メニューがないもの（管理人の場合は、未分類、サイトマップ、お問い合わせ）を設定しました。
理由はSTINGER5では、万一アドセンス広告を設定する際に、サイドバーの最上段に広告がくるように自動設定が可能になっているためです。（アドセンス広告では、ドロップなどで広告が隠れるサイト構成はポリシー違反になります）
以上で、ドロップダウンメニューを設置する方法の紹介を終わります。
なお、ここで紹介したドロップダウンメニューは、CSS3 animated dropdown menuというサイトで紹介されているものです。
ここで紹介したカスタマイズは、あくまで自己責任で行って頂きますようにお願いします。
可能な限り、カスタマイズ前にファイルのバックアップを取ったり、子テーマを作成してから記述を行うなど、十分に注意を払って行うことをお勧めします。
【ブログ移転のまとめサイト】
FC2からWordPressへのブログ移転（引越し）方法のまとめサイト
サイトの新規開設や移転を検討されている方は、ドメイン無料キャンペーンを行っているタイミングでのエックスサーバー（XSERVER）がお薦めです。
内容確認のうえ、サーバーレンタルの検討をされてはいかがでしょうか。
ドメインの取得（追加取得）を考えている方はコチラ
