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

関連記事

【What Font】気になったフォントを調べる

どうも、こんちは3回目の更新です (・ω・)ノ 最近、WordPressのデザインをいじるのが楽しくなってきましたw ところで皆さん、こんな事はありませんか? ふと見たサイトのフォントが気に入ったけど …

【WordPress】WordPressを4.3にしたら真っ白になった話

目次1 事の発端2 原因3 対応4 まとまってないまとめ WordPressをバージョンアップしたら真っ白になったので 今回に限るかもしれないけど対応方法をメモメモ。 事の発端 久々にブログの管理画面 …

【Google Analytics】not setが異常に増えたので調べてみた

どうもゴエです。 ブログをやる上で、どんな人がこのブログを読んでるのか、どこからアクセスされたのかを確認するために「google Analyst」と言ったアクセス解析を入れてるんですが、今日はそのアク …

【メモ】FuelPhpのtasksをPHPSTORMでデバッグする

どうもゴエです。 仕事上PHPに触れる事が多いのですが、あまりPHPのフレームワークというものを利用したことが無かったので、最近、勉強がてら「Fuel PHP」というフレームワークを弄っていました。 …

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

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