【Stinger3】メニューをドロップダウンメニューにしてみた

  投稿日:2014年2月17日   更新日:  - 開発, WordPress

どうも!、ブログ初めてから初投稿です。

ブログを作るにあたってメジャーな「WordPress」を初めて使ってみましたw
その「WordPress」のデザイン(テンプレート)で「Stinger3」というのが人気らしいので使ってみましたー。

早速つかってみた

早速「Stinger3」の公式サイトからテンプレートをお借りしてWordPressにインストールしてみた。

参考サイト:WordPressテーマのSTINGER3公式サイト

んで、CSSとか、ヘッダー画像を作って・・・・

top
完成!!

と思ったら・・・・

menu1

メニューが崩れてる!!!

どうやら「Stinger3」ではメニューをツリー構造にするとこうなるみたい・・・・ (´・ω・)

 

崩れたメニューをドロップダウンメニューにする

このままだとちょっと良くないのでメニューをどうにかする為にググってみたら
こんな記事を発見!

【Wordpress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】 | クリエイターハートブログ

CSSでドロップダウンメニューが作れるというのでやってみた。

しかし、参考サイトに書いてあるCSSを追加しても変わらず・・・・ (´・ω・)<何故だ・・・・

原因はメニューの設定にアリ!!

参考サイトに書いてあるCSSを追加しても、何故かドロップダウンメニューにならなかったので
一回Google Chromeのデベロッパーツールでソースを見てみた。

editer

 

なんかクラス名が文字化けしてるし!!!!

どうやら、クラス名が文字化けしてるのが原因でCSSが反映されていなかったみたいだった。
なのでWordPressの管理画面にログインして「外観」→「メニュー」を選択。

するとメニュー名が「メニュー1」になっていた。
どうやら、ここのメニュー名がそのままクラス名になるみたい。

原因がわかったのでクラス名を「メニュー1」から「navmenu(参考サイトのクラス名のままなので変更した場合はそのクラス名)」に変更。

menu2

おぉー!直った!!!

無事にCSSでドロップダウンメニューにすることが出来たので良かったw
WordPressを初めて使うと、ここの問題結構つまづきそうだな・・・・・ (´・ω・`;)

-開発, WordPress,

関連記事

【PHP】XAMPPでSSL環境構築

ローカル環境内でPHPの開発を行えるXAMPPでSSL(https://~)を使った開発が必要になったのでメモメモ。 参考サイト[XAMPP] SSL + バーチャルホストの設定|うつしよ このサイト …

【Stinger8】ブログのデザインをリニューアルした!

どうもお久しぶりですゴエです。 年末に左肘骨折して入院してましたw さて、話は変わってこのブログで今まで「Stinger5」というテンプレートを利用していましたが、「Stinger8」と新しいバージョ …

【WordPress】ある日突然サイトマップが更新されなくなった!!

目次1 事の発端2 原因判明3 まとめ 事の発端 どうもゴエです。 ココ最近ブログの記事を書きまくってます。 今までサボっていた更新出来なかった分色々書いてます。 この間ついに投稿記事が10記事超えた …

【Google Analytics】新しいリファラスパムが出たので調べてみた

どうもゴエです。 前回、Google Analyticsのリファラスパムに対する記事を書いてから 早1年とちょっと・・・。 最近GoogleがAnalyticsのリファラスパムに対応したとか言う記事を …

【WordPress】タイトルの文字数をjQueryでカウントする方法

目次1 はじめに2 早速やってみた3 まとめ はじめに どうもこんにちは、ゴエです。 ところで皆さん、記事のタイトルって気にしてますか? やっぱりブログをやってく上で結構タイトルって重要何ですよねw …