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

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

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

      2015/02/22

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

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

みなさん、こんにちわ。

今回は先日、当ブログにて変更したテーマ「Stinger3」のナビゲーションメニューをドロップダウンメニューに対応させた記事を公開したいと思います。

尚、Stinger3はPC用とスマートフォン用にスタイルシートが分かれており、PC用は確認できておりますがスマホ用は手持ちのスマホでしか確認していないため「こんなんじゃない!」となってもご容赦ください。

目次

  • 個人的に思う、Stinger3(ver20131217)の問題点
  • ググった結果
  • PC用スタイルシートの編集
  • スマホ用スタイルシートの編集
  • 最後に
  • Stinger3公式サイト

個人的に思う、Stinger3(ver20131217)の問題点

SEO的に有利だということで大人気のStinger3。

「Wordpress テンプレート」で検索すると大量にあるテンプレートの中で特にこのStinger3がピックアップされています。

昨年末に自作テンプレートで当ブログのデザインを一新しようと思いテンプレート自作に臨みましたが、病み上がりということもあってあえなく撃沈。

年末年始の時期もあって時間をそんなにさけなかったので、上記キーワードで出てきたStinger3テンプレートを採用させて頂いた次第であります。

使用させて頂いている身分で僭越ながら、Stinger3に変更したときに問題が発生しました。

ナビゲーションメニューのサブメニューが崩れている!

例えば当ブログの場合「About」がメインで「お知らせ」「このサイトについて」「profile」はサブメニューとなっております。

通常ならばサブメニューはホバーしていない状態では隠れていなければいけなくて、ホバーしたならばメインメニューの下部に表示されなければいけません。

しかしながら今回、サブメニューが常時表示されており(ということはホバーしても表示非表示の変更がない)レイアウトが微妙に崩れておりました。

「こ、これは・・・?」

なにかしらの設定をミスったのかしらと首をかしげること数時間。

Stingerを採用されていらっしゃるブログ様では、のきなみナビゲーションメニューにホバーした際にドロップダウンメニューが表示されていらっしゃいません。つまりメニューの親子関係に問題が生じているということ。

制作者さまに申し訳ないなとは思いましたが、個人的にサブメニューのドロップダウンメニューの採用はWordpressを使用する身としてはどうしも外すことができない機能なので改善することに臨みました。

ググった結果

目次タイトルが若干前項と被りますが、この問題を解決すべくグーグル大先生にていろいろなキーワードをかけました。

2014年1月2日執筆現在、「Stinger ドロップダウンメニュー」で検索した際にこのYahoo知恵袋にたどり着き、この知恵袋の解答欄にWebpark様の記事、CSSだけで作る動きのあるドロップダウンメニューを最終的にタブに常時表示し編集にあたった次第です。

 

 PC用スタイルシートの編集

さて、Stinger3のスタイルシート編集にあたって注意すべきことがあります。

Stinger3はスタイルシートをPC用とスマートフォン用の2枚を採用されていらっしゃいます。

PC用のスタイルシートを編集して表示に成功したとしてもスマホで閲覧するとレイアウトが崩れているのでスマホ用のスタイルシートも編集する必要があります。

ということを踏まえたうえでPC用スタイルシートの編集を始めます。

「外観」→「テーマ編集」→「stinger3ver20131217」を選択→右部のスタイルシート(style.css)をクリックして編集を開始。

 

というコメントアウトから始まる部分がナビゲーションメニューの部分に当たります。

デフォルトの状態からいじっていなければ上記のようになっていると思いますが(デフォルトと違うよ!という場合はご連絡をください)この部分はいじりません。

私の場合、上記の最後の行の次行に以下のように追記をしました。

非常にざっくりですがこれでPC用のメイン・サブのドロップダウンメニューが実現しました。

不必要な記述もあるかと思いますが、同じような状況にある方はコピペしてご活用ください。

※重要なお知らせ

上記、PC用スタイルシートの編集で「ドロップダウンメニューにならないよ!」というご報告を頂きましたので検証いたしましたところ、ご使用になられているカスタムメニューのメニュー名とCSSの要素指定が合致しないために実現しないという現象が発生していたようです。

検証し改善を試みた記事を参考に再度、編集して頂けましたらと存じます。

お手数おかけして申し訳ありませんがよろしくお願いします。

後、記述に行き届かない点がございましたことをお詫び申し上げます。

スマホ用スタイルシートの編集

PC用のスタイルシートの編集が終わり、無事にドロップダウンメニューが表示されるようになってもスマートフォンで閲覧するとサブメニューのレイアウトが崩れて表示されてしまう現象を解決するために、同テーマ編集からsmart.css(これがスマホ用のスタイルシートになります)を編集します。

スマホ用のレイアウトは個人的に及第点だと思う点で終了しましたので「もっとこうしたい!」という方はカスタマイズして編集してください。

スマホ用のナビゲーションメニューは

から始まる部分になります。

まずレイアウトが崩れてしまうであろう原因の部分を削除しました。

から始まる要素の

を3か所コメントアウトしました。削除しなかったのは後に再活用するかもしれないと踏んだからです。

ナビゲーション部分の最後の行に以下のように追記しました。

あとは.list6 dd.acordion_tree要素のbackground-colorプロパティを#333;に変更して見た目を調整しました。

これでスマートフォンでナビゲーションメニューのレイアウトが崩れてしまう現象と、ナビ開閉ボタンをタッチした際にコンテンツを押し上げしてしまう現象を解決しました。

最後に

今回Stinger3のナビゲーションメニューを編集させて頂きましたが、バージョンは「stinger3ver20131217」です。これに個人的に編集したものですので動作を保証するものではありません。ご容赦ください。

その上で勝手ながらStinger3の制作者様に利用・カスタマイズさせて頂いていることをこの場を借りて感謝・謝罪させて頂きたく思います。

Stinger3公式サイト

Stinger3公式サイト

にて配布されております。初心者の私にとってはありがたいサイト様です。

非常に長くなりごめんなさい。

お疲れ様でした。

 - WordPress , ,







Comment

  1. dyce より:

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

  2. dyce より:

    前の質問のコードの部分がうまく表示されなかったので追記します。
    私のsubmenu

    <li id="menu-item-208"

    takuwoさんのこのサイトのsubmenu

    <li id="menu-item-343"

  3. dyce より:

    何回もすみません! コードの部分がうまく表示できないです 🙁

    私のsubmenu = class=”menu-%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-1-container” id=”menu-%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-1″

    takuwoさんのこのサイトのsubmenu class=”menu-navmenu-container” id=”menu-navmenu”

    • takuwo より:

      初めまして。dyceさん初コメントありがとうございます。
      stinger3のドロップダウンメニューの表示がうまくいかないとお困りのようですね。
      私も問題を解決すべく、ver20140124をインストールして編集しプレビュー表示してみましたところドロップダウンメニューを表示させることができました。
      お手数なのですが、dyceさんのホームページのアドレスを教えて頂けるとご一緒に問題を解決するのにお力添えできると思います。
      ホームページアドレスが記載されたコメントを公開されたくなければコメントにそのように注意書きしていただけたらそのコメントは当サイトで表示いたしません。

      宜しくお願いします。

    • takuwo より:

      dyce様、こんにちわ。
      先日頂いたコメントを参考に致しまして記事を書きました。

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

      上記記事をご参考にお手数ですが、再度編集をしてみてください。
      ご迷惑おかけします。

      宜しくお願いします。

  4. […] 参考Stinger3をドロップダウンメニューに対応させてみました […]

  5. […] 参考記事:【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】 […]

Message

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

CAPTCHA


  関連記事

no image
ロリポップレンタルサーバーで記事を編集中に「403エラー」が出た時もしかしたらこの対処をすると大丈夫かもしれない。

先日、wordpress twenty twelve に子テーマを設定する。(前 …

no image
author をウィジェットで表示する方法。

先日、制作兼管理人の情報をウィジェットエリアに追加しました。 自分の写真を乗っけ …

no image
wordpress:twenty twelve 「コメントをどうぞ」 を消す方法

コメントをどうぞってのは大歓迎なんだけど場所悪くね? と感じたので調べてコメント …

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

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

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

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

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

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

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

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

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

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

no image
twenty twelve フッター部分にウィジェットを追加する方法(参考URLあり)

みなさま、こんにちわ。 え、「なんかデザイン変わってね?」。HAHAHA。いろい …

no image
簡単にCSSでのグラデーションを実現!「Ultimate CSS Gradient Generator」!

記事のタイトルの背景が無色透明だと無味乾燥だなぁ・・・とは思いませんか? そこで …