趣味を楽しむDIYな暮らし

手作りのくふうを活かした日常生活ブログ

グローバルナビゲーションにドロップダウンメニュー追加手順 訂正版

f:id:sikinomori117:20190826030808j:plain

 

スマホのトグルメニューが切り替わらない問題を解決しました 

 

こんにちは いつもご訪問下さいましてありがとうございます。

 

script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">  

以前から気にかけていたグローバルナビゲーションにドロップダウンメニューを追加することが出来ました。

  

こちらの記事を参考にさせて頂きました 

www.notitle-weblog.com

 

グローバルナビゲーション改善前

 

ナビゲーションメニューの項目には以下の5つの項目がありPC画面で項目を選択してクリックすることで、其々の項目に対して1記事が表示されていました。

 

暮らし社会 アウトドアDIY べランダ菜園水耕栽培 熱帯魚飼育 ブログ運営

 

ドロップダウンメニュー追加による改善後

 

ドロップダウンメニューを追加出来たことにより、

 

暮らし社会 アウトドアDIY べランダ菜園水耕栽培 熱帯魚飼育 ブログ運営 

 

メインの項目1記事+3記事=合計4つの記事タイトルが表示出来る

 

暮らし・社会をクリックするとダイハツミライースターボCVTに期待

 

その下に表示されるメニューは以下の3つ

前立腺癌全摘出手術でPSA値が0になった!

外出前の防犯対策

アブとスズメバチの識別方法

 

つまり、PC画面をスクロールしなくても全部で5項目×4記事=20記事のタイトルを表示することが出来るようになったわけです。

 

面倒な操作をしなくても見たい記事を選べる!

 

これは正に読者様ファーストの改善になったと思います。

 

ナビゲーションメニューの各項目は当ブログに於けるランディングページ上位にある記事を表示させるようにしてあります。

 

その下のドロップダウンメニューには関連する記事を表示させています。

 

またスマホにおいては、スクロールしてもトグルメニューが固定されているため、何時でも別のページを見に行く事が出来ます。

 

以前から使わせて頂いているカッコイイデザインテーマのBrooklynが更に便利に使えるようになりました。

 

簡単な手順

 

参考にさせて頂いた記事内のナビゲーションコードを一旦メモ帳等にコピー

 

➁各メニュー欄の項目に入れる記事を決める(ナビゲーションに表示させる記事)

 

➂メモ帳にコピーしたコード内に表示させたい項目名とLURを貼り付けます

 

※貼り付ける部分等の細かい説明も全て参考にさせて頂いた記事内に書かれていましたので大変助かりました。

 

➃コード内の項目や記事のURL貼り付けが終わったら、コード全体をデザイン⇒カスタマイズ⇒ヘッダー⇒記事下へ貼り付け

 

以上のような方法でグローバルナビゲーションにドロップダウンメニューの追加が出来ました。

 

スマホのトグルメニューが一旦表示されて直ぐに消えてしまう問題については

 

 
ダッシュボード→デザイン→スマホ→ヘッダー→詳細設定欄→レスポンシブにチェックを入れる。

 

この設定をしておけば問題は解決します。