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

Comment

1. dyce より:

   2014年2月22日 4:51 PM

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

   返信
   • takuwo より:

     2014年2月22日 10:41 PM

     dyce 様

     その後stinger3のドロップダウンメニュー表示で問題はないでしょうか？
     問題がなければよいのですが、「表示が変だよ！」という状態にございましたらご連絡ください。
     対応させて頂きます。

     今回、とても勉強になりました。ありがとうございました。

     返信
2. 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;」という文字の高さに自動で合わせる記述をしてみてください。

     上記で

     「ガジェット教師！」のサブメニューの３つめ。タイトルが長いので折れ曲がって表示されるのですが、それがメニューのバックの灰色の部分をはみでてしまって記事の文とまざりあってしまうこと。。

     の問題が解決するかと思います。

     検証が不十分な点、誤解を招く表記で申し訳ないです。
     度々お手数をおかけして恐縮ですが以上のコードをお試しになってください。

     ご不明な点がございましたらご連絡ください。対応させて頂きます。

     返信
3. Lyustyle より:

   2014年2月23日 1:34 PM

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

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

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

   返信
4. Lyustyle より:

   2014年2月23日 2:02 PM

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

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

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

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

   2014年4月9日 11:51 PM

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

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

   2014年5月7日 12:46 AM

   […] Creator　Heart様 […]

   返信
7. ユウキ より:

   2015年3月25日 6:54 PM

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

   返信

WordPress をマルチサイト化しました。（参考URL有り）

私、複数サイトを制作したくてマルチサイトの勉強を致しました。 参考にさせて頂いた …

子テーマの重要性

あー、やっちまったよ と思いましたが後の祭りでした。 先日、一年ほど前から運営し …

【WordPress：プラグイン】google xml sitemapsを マルチサイトで使用できるようにしてみました。

皆さんこんにちわ。最近仕事に忙殺されている私です。 今回は初めて（？）プラグイン …

wordpress 作成した記事が「お探しのページが見つかりません」状態になった時の対処法。

私、首をひねりました。「記事は必ず存在する。だのに”お探しのページが …

【WordPress】TwentyTwelve　「続きを読む」を画像に変更する方法。

TwentyTwelveテーマに限らず記事を作成しているときに挿入できるmore …

サイトタイトルをロゴに変更しました。

所要時間５分程度で作ったロゴをサイトのトップに。 最近、私地元でMr.child …

ポートフォリオサイトにＷＥＢコンテンツ「ボロス兵士の日誌」を追加しました。

趣味の一つマジックザギャザリングのブログサイトを制作したのでポートフォリオサイト …

【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】

本記事はStinger3でのドロップダウンメニュー実装記事です。Stinger5 …

wordpress twenty twelve に子テーマを設定する。（前編）※追記【重要】あり

みなさまこんにちは。 先日、くりてすのテーマをなにも考えずに更新しデザインをまっ …

Twenty Twelve サイトタイトルをロゴに変更する方法

先日、サイトタイトルをロゴに変更しました。という記事を書きました。 以下はそのコ …