PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

Cocoonでプルダウンの階層メニュー幅を変更する方法

スポンサーリンク

こんにちは、解説ゾロです!

グローバルメニューの項目にマウスを重ねると、新たな小項目のメニューが表示される設定があります。そのメニューのことを「ドロップダウンメニュー」「階層メニュー」など、いくつかの呼び方があるようですが私は「プルダウンメニュー」で落ち着いています。

先日、カテゴリーやタグの整理を検討した結果、わかりやすいようにプルダウンメニューを設置することにしました。(まだ反映してませんが・・・笑)プルダウンメニューをアドセンス広告に重ならないように注意しながら設定をしたところ、表示されたプルダウンメニューの幅がとても長くて驚きました。

こんなに長いと、どのカテゴリーのプルダウンメニューなのかがわかりづらくなり、せっかくの改善が裏目に出てしまいますので、幅を短くして見やすくしようと思います。

今日は、プルダウンメニューの「幅」を変更する方法を解説します。Cocoonならプルダウンメニューの幅を短くしたり、長くしたりの変更が簡単にできますので一緒にやりましょ!

スポンサーリンク
スポンサーリンク
スポンサーリンク

Cocoonでプルダウンの階層メニュー幅を変更する方法

まず、WordPress「ダッシュボード」を開いてください。そして左ペイン(枠)の項目から、
の「Cocoon設定」をクリックします。すると「Cocoon 設定」の画面に変わりますので、
の「ヘッダー」をクリックしてください。

スポンサーリンク

ヘッダー設定

一番上が「ヘッダー設定」というページに変わりますので、マウスでカリカリと下まで移動すると、
の「グローバルナビメニュー幅」という項目があります。その右側に「トップメニュー幅」がありますので、その、
の枠に、数字を入れて幅を変更します。ここでは「200」を入れました。カテゴリーなどの項目名の文字数とバランスの良い数値を探して設定してください。ちなみに先ほどのサンプル幅は500ですので、数値の参考にしてください。デフォルト(初期の設定)では「240」です。変更する数値を入力しましたら、
の「変更をまとめて保存」をクリックです。

手首が気になる方はイイかもです!

2年間使い続けたマイクロソフト エルゴノミクスキーボード|レビュー

スポンサーリンク

プレビューで幅の確認

これでプルダウンメニューの幅が短くなっているはずですが、どれくらい幅が短くなったのか、プレビューで確認してみますと、
のようにちょうどよい幅になったので大成功です。

本当に爆速になり、復活です

古いノートパソコンを長く使うにはSSD 換装が絶対おすすめ

まとめ

グローバルメニューの項目(カテゴリーなど)の文字幅に合わせて、長すぎず短すぎずの幅にできれば見た目もスッキリしますし、見る方もわかりやすくなると思います。

繰り返しになりますが、プルダウンメニューはアドセンス広告と一部でも重なるとアドセンスのポリシー違反に抵触し「警告」される場合がありますのでご注意くださいませ。

自分のブログが、どんどん見やすくなっていくと楽しいですよね!

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!

プルダウンメニュー色やマウスホバー色も変更できます!
もう4年になりますが、絶好調で手首の腱鞘炎も治まっています!
タイトルとURLをコピーしました