【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】記事の一部修正【改善】

2014/02/22 2015/02/22

本記事はStinger3でのドロップダウンメニュー実装記事です。Stinger5のドロップダウンメニュー実装については以下の記事をご参考ください。

【コピペでOK！】Stinger5ドロップダウンメニューをCSS+jQueryで。

皆さんこんにちわ。

【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】

という記事を以前書かせて頂きました。

Stinger3を使用されてらっしゃる方にとって少しでもお役に立てればと思い、記事にしたところでありますが参考にしてくださった方のサイトで問題が発生したようなので、その問題点を追求し、今回解決策を発見できたと思いますのでご報告させて頂きたく記事にしました。

前回の記事を使用された方の反応（参考にさせて頂くためコメントや記事を抜粋させていただきました）

前回の記事にてStinger3テーマでドロップダウンメニューを実現させる方法を記事にさせて頂きました。

しかしながら、せっかくこの記事を参考に編集された方のサイトではそれが実現しなかった、というご報告が相次いでおりました。

以下は頂いたコメントの抜粋です。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

初めまして、この記事を読ませて頂きました。有難うございます。
私は一月の24日にリリースされたSTINGERテーマを使っています。この記事を見ながらCSSを編集してみたのですがDROPDOWN MENUを作る事が出来ず変化無しです。気付いたのは =>
私のサブメニューが
<li id=”menu-item-208″
となり,takuwoさんのこのサイトのように
<li id=”menu-item-343″
となってない事です。多分、classをmenu-navmenu-containerにすればいいのだと予想してますがどうすればそう変えられるのか分からないです。どうすれば、DROPDOWN MENUの機能が使えるようになりますか? 有難うございます。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

他にも試されてみてダメだったという方の記事です。

【ご報告】Stinger３のメニューをドロップダウンメニューに対応→だめでした。

厳しいタイトルですがその通りなので仕方がないです。。。

このコメント・記事を頂き、問題が発生していると気づいた私は早急に問題解決に奔走した次第です。

お詫び

まず先にお詫びしなければいけません。

拙著をご覧になられて、試された方の多くはおそらくドロップダウンメニューの実現ができていないと思います。

「これでStinger3のドロップダウンメニューを皆さん使えるよね！」と息巻いてしまい、私のサイトで実現できたので他のサイト様でも実現できるだろうと早合点してしまいました。

当サイトの記事をご覧になられて試された方には大変なご迷惑をおかけしたと思います。

誠に申し訳ございませんでした。

ご指摘してくださった、dyce様、教師の知的生活ネットワーク様、ご指摘くださりありがとうございました。

問題点の追求

前回の問題が発生した記事で以下のようにCSSコードを書きました。

/*追記*/
#menu-navmenu li{
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}
#menu-navmenu li a{
	display: block;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#menu-navmenu li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 250%;
	margin: 0;
	padding: 0;
}
#menu-navmenu li ul li{
	overflow: hidden;
	height:0;
	margin: 0;
	padding: 0;
}
#menu-navmenu li ul li a{
	text-align:left;
}
#menu-navmenu li:hover ul li{
	overflow: visible;
	height: 23px;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #f8f8f8;
	border:1px #ccc dotted;
}

/*追記*/

#menu-navmenu li{

position: relative;

float: left;

margin: 0;

padding: 0;

text-align: center;

}

#menu-navmenu li a{

display: block;

margin: 0;

padding-left: 10px;

padding-right: 10px;

padding-top: 5px;

padding-bottom: 5px;

}

#menu-navmenu li ul{

list-style: none;

position: absolute;

top: 100%;

left: 0;

width: 250%;

margin: 0;

padding: 0;

}

#menu-navmenu li ul li{

overflow: hidden;

height:0;

margin: 0;

padding: 0;

}

#menu-navmenu li ul li a{

text-align:left;

}

#menu-navmenu li:hover ul li{

overflow: visible;

height: 23px;

margin: 0;

padding-top: 5px;

padding-bottom: 5px;

background: #f8f8f8;

border:1px #ccc dotted;

}

このどこかに問題があるはず。

そう判断した私はWeb開発コンソールを使用して問題が発生したサイト様のコードを僭越ながら拝見させて頂きました。

そして以下が私のサイトのコードです。

んん！？上の方のコードでおかしな点が。。。

<div class="menu-%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-1-container">

1	<div class="menu-%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-1-container">

クラス名やid名のmenu-以下が文字化けしております。

おそらく、この部分と私が記事にしたＣＳＳの要素があっていないために発生しているのでは。

ＣＳＳで#menu-navmenuと指定しているのにHTMLコードが文字化けしていたり名前があっていなければＣＳＳプロパティが反映されるはずがない。。。

というわけで解決策の追求とご提案を次の項で。

解決策の追求・ご提案

当サイトではカスタムメニューを使用しております。

WordPressの管理者画面の

「外観」→「メニュー」ですね。

上記のように文字化けされてらっしゃるということは。。。

このメニュー名が日本語になっていらっしゃるのではないでしょうか。

ためしに「外観」→「メニュー」→「メニューの名前」を「メインナビ」という日本語に変更してWebコンソールで確認しました。

するとやはりWebコンソール上では

するとコンソールには、

となっております。しかも、、、

やはりドロップダウンメニューは崩れております。これはいけません。

さらに上記のメニュー名を「mainmenu」に変更して反映させてみました。

となっています。ということは。

カスタムメニューで指定したメニュー名（「外観」→「メニュー」→「メニュー名」）がメニューのクラス名やid名の”menu-（ここに反映される）”ということ。

なので解決策としては、

WordPressの管理画面から「外観」→「メニュー」→「メニュー名」を「navmenu」に変更する。※CSSの「#menu-navmenu」は変更しない。
上記と同じようにメニュー名をアルファベットで入力し、前回の記事にてＣＳＳで追記した部分の「#menu-○○」の○○を入力したメニュー名（アルファベット入力したもの）に合わせて編集する。

※上記2点で注意する点は、

カスタムメニューを使用してメニュー名を半角アルファベット入力する。
入力したメニュー名とＣＳＳのid名の「#menu-○○」の○○の部分を一致させる。

こうすることでドロップダウンメニューが実現しないよ！という問題が解決するかと思います。

当サイトをご覧になられてお試しになってドロップダウンメニューが実現しなかった方々、検証が不十分でご迷惑をおかけしました。

今回の記事では検証を十分に行っておりますが、それでも実現しない場合はご連絡ください。

また、ドロップダウンメニューがきちんと表示されたという場合でも、コメントを頂けるとWebブロガーとしてこの上ない幸せです。

ご指摘をくださった、dyce様・教師の知的生活ネットワーク様、ありがとうございました。

そしてご迷惑をおかけして申し訳ございませんでした。

この記事を参考に再度編集して頂けましたら、Stinger3でのドロップダウンメニューが表示されると思います。

日々、勉強です。

ではまた。

- WordPress stinger3, ドロップダウンメニュー, 改善, 表示されない

Comment

dyce より:

2014年2月22日 4:51 PM

早速有難うございました！　感謝です！！

返信
- takuwo より:
  
  2014年2月22日 10:41 PM
  
  dyce 様
  
  その後stinger3のドロップダウンメニュー表示で問題はないでしょうか？
  問題がなければよいのですが、「表示が変だよ！」という状態にございましたらご連絡ください。
  対応させて頂きます。
  
  今回、とても勉強になりました。ありがとうございました。
  
  返信
Lyustyle より:

2014年2月22日 10:19 PM

どうもありがとうございました。
報告としてかきっぱなしにしておいたものを、わざわざ受け止めていただき、対応まで考えていただき、心から感謝しています。
無事、成功しました。
この件、記事にしております。
http://lala.idea4u.net/archives/108436061

本当にありがとうございました。

返信
- takuwo より:
  
  2014年2月22日 11:14 PM
  
  Lyustyle 様
  
  度々失礼します。
  拙著をお試しになられた結果を記事にしてくださりありがとうございます。
  
  貴サイト様を確認いたしましたところ、確かに表示に不具合があるようなので早速、CSSの改善を試みました。
  以下、追記部分のCSSコードです。太文字のところを追加で記述してお試しください。コードの後に各追記のご説明がございます。
  
  /*追記*/ #menu-navmenu li{ 　　 position: relative; 　 float: left; 　 margin: 0; 　 padding: 0; 　 text-align: center; } #menu-navmenu li a{ 　 display: block; 　 margin: 0; 　 padding-left: 10px; 　 padding-right: 10px; 　 padding-top: 5px; 　 padding-bottom: 5px; } #menu-navmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; width: 250%; margin: 0; padding: 0; 　　z-index: 1; } #menu-navmenu li ul li{ overflow: hidden; height:0; margin: 0; padding: 0; } #menu-navmenu li ul li a{ text-align:left; } #menu-navmenu li:hover ul li{ overflow: visible; 　　width: 100%; height: auto; margin: 0; padding-top: 5px; padding-bottom: 5px; background: #f8f8f8; border:1px #ccc dotted; 　　z-index: 0; }
  
  z-index: 1;という記述をすることによりサブメニュー要素の現時点での重なり順を最前面にしております。
  z-index: 0;という記述はなくても構わないと思いますが、要素の重なり順序を確実にしておくために指定しております。
  
  上記で
  
  １段目の「ガジェット教師！」のサブメニューに２段目のメニューが透けている。
  「トラブルシューティング始末記」のサブメニューの２つ目、タイトルが長いのですが、右側のサイドバーの裏側に隠れてしまう。
  
  という問題が解決するのでないかと思います。
  
  貴サイト様を拝見した際にサブメニューの長さがバラバラだったので
  width: 100%;
  というプロパティを追加してみました。
  見た目の問題なのでこちらはお好みで設定してください。
  
  height: auto;
  という記述は当初、「height: 23px;」になっていたかと思います。この数値で記述をすると要素の高さが○○pxで固定されてしまうので
  「height: auto;」という文字の高さに自動で合わせる記述をしてみてください。
  
  上記で
  
  「ガジェット教師！」のサブメニューの３つめ。タイトルが長いので折れ曲がって表示されるのですが、それがメニューのバックの灰色の部分をはみでてしまって記事の文とまざりあってしまうこと。。
  
  の問題が解決するかと思います。
  
  検証が不十分な点、誤解を招く表記で申し訳ないです。
  度々お手数をおかけして恐縮ですが以上のコードをお試しになってください。
  
  ご不明な点がございましたらご連絡ください。対応させて頂きます。
  
  返信
Lyustyle より:

2014年2月23日 1:34 PM

検証の上、さらなる改善までしていただきました。

これは、もうなんと申し上げて良いのかわかりません。
CSSのことなのであとは自分で検証しなければ、と思っていた所、すぐに解答までいただけるとは・・・。

早速ためしてみて、ご報告いたします。
本当にありがとうございます。

返信
Lyustyle より:

2014年2月23日 2:02 PM

わざわざお出でいただき、さらなる不具合について検証いただきありがとうございました。
ご指摘にようにしました所、３つの不具合とも解決いたしました。

心から御礼を申し上げます。

また、記事に書かせていただきます。
今回は本当にありがとうございました。

返信
Stinger3のタイトルをロゴ画像に変更し、メニューバーをドロップメニューに変更してみましたより:

2014年4月9日 11:51 PM

[…] どうでしょうか？うまくできましたか？今回も参考にしたサイトはもちろんSTINGER3公式サイトです。私の文才ではうまく伝わったかどうか？全くわからんって人は参考にして下さい。 […]

返信
【stinger3】メニューバーをドロップダウンに対応させる方法より:

2014年5月7日 12:46 AM

[…] Creator　Heart様 […]

返信
ユウキより:

2015年3月25日 6:54 PM

ありがとうございます!!
わたしのブログでも解決しました!!
とても有益な記事でありがたく思います。

返信