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

関連記事

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

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

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

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

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

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

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

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

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

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