chat-blog

僕の独り言が誰か一人の役に立つことを祈って

*

stinger5でヘッダーメニューをドロップダウンにカスタマイズする方法

   

ブログのヘッダー部分のナビゲーションバーで、マウスオーバーと同時に、
デロロロっとそれに付随するメニューを表示させてみたくなったので備忘録として残しておきます。

PR

ブログを書いてて自分が結構気合入れて更新してるカテゴリだとかをヘッダーのナビゲーションバーに、
表示させておきたいことは結構あると思います。
それでかつ、カテゴリの中でもいくつか分類がわかれている場合に、
例えば3つあったらそれを3つ横に並べるのはあまりにもダサいため、
何もないときは、

スマホアプリ

とだけ表示させといてマウスオーバーや選択されたときに

スマホアプリ
└パズドラ
└モンスト
└スクフェス

って言う風に表示させたいですよね。

というわけで表示させていきましょう。(無理やり初めて行く感が否めない)

ナビゲーションバーをマウスオーバーと同時にアコーディオン風に表示させる。

作業内容としては、

  1. カスタムメニューの作成
  2. style.cssの編集
  3. header.phpの編集

となります。

え!ファイルの編集するのかよ、大丈夫かな・・・
と思われるかもしれませんが大丈夫です、コペピするだけでいけます。頑張りましょう。

というわけでまずはそこから順にやっていきます。

カスタムメニューを作成する

wordpress管理画面から、
[外観]→[メニュー]と進んでいきます。

すると下記の画面が表示されます。

スクリーンショット 2016-02-20 16.11.06

そこでまずメニューの作成をします。
メニュー名はなんでもいいのでとりあえずナビゲーションバーとでもつけておきます。

そして、スクリーンショット_2016-02-20_16_11_06

 

左赤枠のメニューの欄からナビゲーションバーに表示させたい項目を選択します。

僕の場合とりあえず
【固定ページ】の【オーディンスフィア攻略】のページ

【カテゴリ】の【チュウニズム】

【チュウニズム】のカテゴリ内にある、【チュウニズムの記事】
を選択しました。
※メニューにカテゴリや固定ページではなくとある記事を追加したい場合は、【リンク】ってところから選択できます。

すると下記の画像のような状態になります。

スクリーンショット_2016-02-20_16_19_17

 

ただこの状態だと単純にナビゲーションバーに横に3つずらって並ぶだけです。
【稼ぎ曲】っていうのはチュウニズムの稼ぎ曲という意味なので、チュウニズムってメニューに内包したいですよね。
その場合は赤枠内の稼ぎ曲ってメニューをクリックしたままの状態にして少し右にドラッグします。
すると、

スクリーンショット_2016-02-20_16_25_30

 

ちょっと右にずれましたね。これでチュウニズムってメニュー内に稼ぎ曲ってメニューが内包された状態になりました。

そしたら下のほうに赤枠でかこったように【テーマの位置】という欄があるのでそこの【ナビゲーションバー】にチェックをいれてメニューを保存します。

これでカスタムメニューの設定は完了です。

この状態でページを確認すると結構しょぼいことになってるのであまりみないほうがいいです。笑

style.cssの編集

コピペするだけです何も恐れるものはないです。

style.css内に、

という記述がありますので、こいつの中に、

width:100%;
を追記します。

次に、

という記述がありますので、そこの下に、

上記コードをそのまま貼り付けます。

次に、

という記述があるのでその下に、

を貼り付けます。

これでstyle.cssの編集は完了です。

header.phpの編集

あと一息です。

header.php内に、

という記述があるのでその下に、

これを貼り付ければ完了です!お疲れ様でした。

この状態でページを確認しますと、

スクリーンショット_2016-02-20_16_48_38

こんな感じにアコーディオン風に表示されるかと思います。

以上です。

設定内容が多く難易度高めっぽいですがそれだけやる価値はあるかと思いますのでぜひぜひやってみて欲しいカスタマイズです。

参考にさせていただいたサイト様

【コピペでOK!】Stinger5ドロップダウンメニューをCSS+jQueryで。

そんな感じです。

今日の一言

本当はもっとCSSを駆使してかっこいいデザインにしたい意識高いチャットより。

スポンサーリンク

スポンサードリンク

スポンサードリンク

最後まで見ていただきありがとうございます。
今後とも頑張って更新していきますのでもしよろしければ
下記お一つでもシェアしていただけると幸甚です。
Facebookでシェア Twitterでシェア はてなブックマーク LINEで送る

 - wordpress

\皆によく読まれてる人気記事/

スポンサーリンクと関連コンテンツ

  関連記事

wordpressのコメント欄を移動、もしくは削除する方法

最近は朝に更新するように心がけているのですが起きたら起きたで、 艦隊これくしょん …

no image
wordpressで502 Bad gatewayがでてダッシュボードにログインできなくなった時の備忘録

久しぶりにブログを更新しようと思ったら管理者画面に入れなくなって完全に詰んでたへ …

wordpressのトップページで最近の投稿(new post)を表示させない方法

まいど。月曜から二日酔いに苛まれつつも頑張って仕事行った自分をちょこっとだけ褒め …

stinger5でサイドバーのnew post(最新の投稿)で特定のカテゴリーを非表示にする方法

topページから消すのはプラグインを入れて楽にできたのですが、 サイドバーのne …

ブログの更新を自動でツイッターで呟かせる際の改行方法

できるはずなので、色々と試してみた結果、 %0a のアスキーコードを埋め込むこと …

【wordpress】stinger5でアドセンスの広告を横並びで表示させる方法

なんか最近wordpressの記事が多すぎるので別のネタを考え中なチャットです。

【wordpress】stinger5の固定ページでもsnsのシェアボタンを表示させる方法

よくみたら固定ページにはデフォルトでsnsのシェアボタンが表示されていなかったた …

またもこのブログ(word press)で「bad gateway 502エラー」がでました。

今日は19:30頃には会社をでて(僕の会社は10時出社の19時定時)、 早めに家 …

ブログをgoogleとbingにインデックスさせた(申請した)

ブログを立ち合げたわけだしせっかくなので、 検索エンジンに引っかかるようにしたい …

【wordpress】SNSシェアボタンをいわゆるバイラルメディア風にカスタマイズしてみた

今我が家の洗面所では洗面器の交換のために業者さんが来てくれていますが、僕はブログ …

※コメントですが僕が確認してからとなるのでだいたい3日後の反映となります。

Message

メールアドレスが公開されることはありません。