【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 STORM】ちょっといじってみた

いつもPHPの開発でお世話になってる方から、教えて頂いた開発環境「PHP storm」を使い始めたのだが、 ソースのヘッダーに記述するデフォルトのコメントが気に入らなかったので編集したので忘れないよう …

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

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

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

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

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

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

さくらレンタルサーバー初期ドメイン設定

このブログを設置するにあたって、さくらレンタルサーバーを借りて構築して自分で取得したドメインを使ってたんだけど、 ココ最近になって、さくらレンタルサーバーからもらったデフォルトのドメインの存在を思い出 …