【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】 記事の一部修正【改善】
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の機能が使えるようになりますか? 有難うございます。
----------------------------------
他にも試されてみてダメだったという方の記事です。
【ご報告】Stinger3のメニューをドロップダウンメニューに対応→だめでした。
厳しいタイトルですがその通りなので仕方がないです。。。
このコメント・記事を頂き、問題が発生していると気づいた私は早急に問題解決に奔走した次第です。
お詫び
まず先にお詫びしなければいけません。
拙著をご覧になられて、試された方の多くはおそらくドロップダウンメニューの実現ができていないと思います。
「これでStinger3のドロップダウンメニューを皆さん使えるよね!」と息巻いてしまい、私のサイトで実現できたので他のサイト様でも実現できるだろうと早合点してしまいました。
当サイトの記事をご覧になられて試された方には大変なご迷惑をおかけしたと思います。
誠に申し訳ございませんでした。
ご指摘してくださった、dyce様、教師の知的生活ネットワーク様、ご指摘くださりありがとうございました。
問題点の追求
前回の問題が発生した記事で以下のように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 |
/*追記*/ #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開発コンソールを使用して問題が発生したサイト様のコードを僭越ながら拝見させて頂きました。
そして以下が私のサイトのコードです。
んん!?上の方のコードでおかしな点が。。。
1 |
<div class="menu-%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-1-container"> |
クラス名やid名のmenu-以下が文字化けしております。
おそらく、この部分と私が記事にしたCSSの要素があっていないために発生しているのでは。
CSSで#menu-navmenuと指定しているのにHTMLコードが文字化けしていたり名前があっていなければCSSプロパティが反映されるはずがない。。。
というわけで解決策の追求とご提案を次の項で。
解決策の追求・ご提案
当サイトではカスタムメニューを使用しております。
WordPressの管理者画面の
「外観」→「メニュー」ですね。
上記のように文字化けされてらっしゃるということは。。。
このメニュー名が日本語になっていらっしゃるのではないでしょうか。
ためしに「外観」→「メニュー」→「メニューの名前」を「メインナビ」という日本語に変更してWebコンソールで確認しました。
するとやはりWebコンソール上では
するとコンソールには、
<div class=”menu-文字化け-container”>
<ul id=”menu-文字化け” class=”menu”>
となっております。しかも、、、
やはりドロップダウンメニューは崩れております。これはいけません。
さらに上記のメニュー名を「mainmenu」に変更して反映させてみました。
<div class=”menu-mainmenu-container”>
<ul id=”menu-mainmenu” class=”menu”>
となっています。ということは。
カスタムメニューで指定したメニュー名(「外観」→「メニュー」→「メニュー名」)がメニューのクラス名やid名の”menu-(ここに反映される)”ということ。
なので解決策としては、
- WordPressの管理画面から「外観」→「メニュー」→「メニュー名」を「navmenu」に変更する。※CSSの「#menu-navmenu」は変更しない。
- 上記と同じようにメニュー名をアルファベットで入力し、前回の記事にてCSSで追記した部分の「#menu-○○」の○○を入力したメニュー名(アルファベット入力したもの)に合わせて編集する。
※上記2点で注意する点は、
- カスタムメニューを使用してメニュー名を半角アルファベット入力する。
- 入力したメニュー名とCSSのid名の「#menu-○○」の○○の部分を一致させる。
こうすることでドロップダウンメニューが実現しないよ!という問題が解決するかと思います。
当サイトをご覧になられてお試しになってドロップダウンメニューが実現しなかった方々、検証が不十分でご迷惑をおかけしました。
今回の記事では検証を十分に行っておりますが、それでも実現しない場合はご連絡ください。
また、ドロップダウンメニューがきちんと表示されたという場合でも、コメントを頂けるとWebブロガーとしてこの上ない幸せです。
ご指摘をくださった、dyce様・教師の知的生活ネットワーク 様、ありがとうございました。
そしてご迷惑をおかけして申し訳ございませんでした。
この記事を参考に再度編集して頂けましたら、Stinger3でのドロップダウンメニューが表示されると思います。
日々、勉強です。
ではまた。
関連記事
-
-
ポートフォリオサイト公開しました。
「次週位にポートフォリオサイトを公開します!」と豪語してたのなんだったのと言わん …
-
-
wordpressをこれから始める初心者の方はまずこの一冊。
私、wordpressを始めてから約1年が立とうとしています。 今でもわからない …
-
-
【デザイン】ブログのデザインについての考察(その1)【ブログ】
皆さんこんにちわ。 今回はブログのデザインについての私なりの考察(その1)を記事 …
-
-
ポートフォリオサイトにWEBコンテンツ「ボロス兵士の日誌」を追加しました。
趣味の一つマジックザギャザリングのブログサイトを制作したのでポートフォリオサイト …
-
-
author をウィジェットで表示する方法。
先日、制作兼管理人の情報をウィジェットエリアに追加しました。 自分の写真を乗っけ …
-
-
wordpress twenty twelve に子テーマを設定する。(前編)※追記【重要】あり
みなさまこんにちは。 先日、くりてすのテーマをなにも考えずに更新しデザインをまっ …
-
-
【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】
本記事はStinger3でのドロップダウンメニュー実装記事です。Stinger5 …
-
-
wordpress 作成した記事が「お探しのページが見つかりません」状態になった時の対処法。
私、首をひねりました。「記事は必ず存在する。だのに”お探しのページが …
-
-
twenty twelve フッター部分にウィジェットを追加する方法(参考URLあり)
みなさま、こんにちわ。 え、「なんかデザイン変わってね?」。HAHAHA。いろい …
-
-
子テーマの重要性
あー、やっちまったよ と思いましたが後の祭りでした。 先日、一年ほど前から運営し …
- PREV
- CSSで角丸・サークルを実現!
- NEXT
- 今更ですが2015年のご挨拶
Comment
早速有難うございました! 感謝です!!
dyce 様
その後stinger3のドロップダウンメニュー表示で問題はないでしょうか?
問題がなければよいのですが、「表示が変だよ!」という状態にございましたらご連絡ください。
対応させて頂きます。
今回、とても勉強になりました。ありがとうございました。
どうもありがとうございました。
報告としてかきっぱなしにしておいたものを、わざわざ受け止めていただき、対応まで考えていただき、心から感謝しています。
無事、成功しました。
この件、記事にしております。
http://lala.idea4u.net/archives/108436061
本当にありがとうございました。
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;という記述はなくても構わないと思いますが、要素の重なり順序を確実にしておくために指定しております。
上記で
1段目の「ガジェット教師!」のサブメニューに2段目のメニューが透けている。
「トラブルシューティング始末記」のサブメニューの2つ目、タイトルが長いのですが、右側のサイドバーの裏側に隠れてしまう。
という問題が解決するのでないかと思います。
貴サイト様を拝見した際にサブメニューの長さがバラバラだったので
width: 100%;
というプロパティを追加してみました。
見た目の問題なのでこちらはお好みで設定してください。
height: auto;
という記述は当初、「height: 23px;」になっていたかと思います。この数値で記述をすると要素の高さが○○pxで固定されてしまうので
「height: auto;」という文字の高さに自動で合わせる記述をしてみてください。
上記で
「ガジェット教師!」のサブメニューの3つめ。タイトルが長いので折れ曲がって表示されるのですが、それがメニューのバックの灰色の部分をはみでてしまって記事の文とまざりあってしまうこと。。
の問題が解決するかと思います。
検証が不十分な点、誤解を招く表記で申し訳ないです。
度々お手数をおかけして恐縮ですが以上のコードをお試しになってください。
ご不明な点がございましたらご連絡ください。対応させて頂きます。
検証の上、さらなる改善までしていただきました。
これは、もうなんと申し上げて良いのかわかりません。
CSSのことなのであとは自分で検証しなければ、と思っていた所、すぐに解答までいただけるとは・・・。
早速ためしてみて、ご報告いたします。
本当にありがとうございます。
わざわざお出でいただき、さらなる不具合について検証いただきありがとうございました。
ご指摘にようにしました所、3つの不具合とも解決いたしました。
心から御礼を申し上げます。
また、記事に書かせていただきます。
今回は本当にありがとうございました。
[…] どうでしょうか?うまくできましたか?今回も参考にしたサイトはもちろんSTINGER3公式サイトです。私の文才ではうまく伝わったかどうか?全くわからんって人は参考にして下さい。 […]
[…] Creator Heart様 […]
ありがとうございます!!
わたしのブログでも解決しました!!
とても有益な記事でありがたく思います。