クリエイターハートブログ

クリエイターハートブログはものづくりの心からおくるブログです。

【ご報告】【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コードを書きました。

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

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

文字化け

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

当サイト

んん!?上の方のコードでおかしな点が。。。

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

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

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

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

解決策の追求・ご提案

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

WordPressの管理者画面の

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

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

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

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

日本語試し1

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

文字化け2

 

するとコンソールには、

<div class=”menu-文字化け-container”>

<ul id=”menu-文字化け” class=”menu”>

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

メニュー崩れ

 

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

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

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 , , ,







Comment

  1. dyce より:

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

    • takuwo より:

      dyce 様

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

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

  2. Lyustyle より:

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

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

    • takuwo より:

      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つめ。タイトルが長いので折れ曲がって表示されるのですが、それがメニューのバックの灰色の部分をはみでてしまって記事の文とまざりあってしまうこと。。

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

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

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

  3. Lyustyle より:

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

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

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

  4. Lyustyle より:

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

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

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

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

  6. ユウキ より:

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

no image
WordPress をマルチサイト化しました。(参考URL有り)

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

no image
子テーマの重要性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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