【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 + バーチャルホストの設定|うつしよ このサイト …

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

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

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

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

【CSV】大量のCSVを「コマンド」1つで簡単にまとめちゃう方法

どうもこんにちは。 ゴエです。 12月がかなり忙しかったのでブログ全然更新出来んかったwww (そもそもそんなに更新していな(ry) さて、仕事の関係上最近CSVファイルを見る機会が増えたんだけど、 …

【メモ】PHPでWebAPIを自作する際にXMLで詰まった話

どうも、ゴエです。 今回は「XMLかなんかでPOSTして処理するWebAPIを自作すればいいじゃん」っと かるーい考えで作ろうとしたら詰まった話です。 目次1 ことの発端2 簡易プログラムの作成~そし …