トップナビメニューが１行で収まらないときの改善策【備忘録】

今回は、サイトのトップメニューの改善についてです。

パソコンで表示されるトップのナビメニューの事なのですが、ここのメニューの数が多くなった時や字数が長くなった場合などは、表示が崩れることがあります。

その時の改善した方法です。ワードプレステーマは「SANGO」です。

トップのナビメニューパソコン通常表示

▲こんな感じですねトップのメニュー表示！

これくらい少ない場合は、ほぼ完全に表示されるのですが、表示が崩れる場合があります。

それが以下のような時です。

ナビメニューの数が多くなった時に表示が崩れる

ナビメニューの数が多くなってくると、どうなるかというと、１行から２行になります。１段から２段へという表現もありますが。

１行で収めたいのが２行になって見映えが悪くなるという感じですね。メニューの数が１０個くらいになると字数にもよりますが、１行では収まりにくいですね。

この場合の簡単な改善策は、無駄なメニューを削除して数を減らす！または同じようなメニューは第二階層に入れ込む！などが考えられます。

ナビメニューの字数が多くなった時に表示が崩れる

これもよくある表示崩れです。ワードプレスのテーマによっては字数制限なしで表示される場合もあります。テーマによってここは大きく違うところですね。有料テーマではこの字数切りを設定できるモノもあります。

どちらにしても長い文章のようなメニューは、かっこ悪いし、これも２行になったり、途中で文字が切れたりして表示がダサくなります。

改善策としては、短くする！これに尽きます！

カテゴリをメニューに入れ込んでいる場合は端的な言葉で表さないと後で詰め込んでいくときに、そぐわないカテゴリができてしまいます。

たとえば、車のサイトがあったとして「中古車」という短いカテゴリ表示で済むのに「１９８０年代の中古車」という長くて限定したものにすると、このカテゴリ（メニュー）には１９８０年代の中古車しか入れられなくなり、違う年代の記事だと新しいカテゴリをつくる必要が出てきます。結果として、またメニューの数が増えてしまいます。。。。

ワンカラムと２カラムで表示が違う

これは、メニュー全体の幅が変わることが原因です。すべてのワードプレスでこういう現象が起こるかというとそうでもありません。そのテーマ特有の構造によるものです。

ワンカラム時のメニューの表示

２カラムの場合のメニュー表示

▼２カラムになるとメニュー全体の幅が少なくなり入りきれなかった部分が２行目になってしまう場合があります。

これだと見映えが悪くなってしまいます。

TOPページがワンカラムで投稿ページがサイドバーのある２カラムになるサイトはよく見かけます。同じメニューの数なのですが、TOPと投稿ページではメニューの見映えが変わってきます。

改善策としては、スマホでの閲覧が多い場合はすべてワンカラムにしてしまう。

スマホ表示の場合はサイドバーがあっても記事の下に回り込むためワンカラムも２カラムも関係なくなります。

つまり、すべてのページをワンカラムにすれば、パソコンで見た時、どのページのメニューも１行で表示されます。

メニュー表示が１行から２行になってしまう場合の改善策

CSSで字の大きさを変える

CSSでメニューの字の大きさだけを変えれば、列の数そのまま、多少字数が多くても、２カラムになっても。。。１行で表示させることができる可能性が増えます！

シート行数で３９０３行目（親の場合）にTOPナビの文字の大きさを変えるところがあります！

　　▲3903行目の12pxです。

これで、メニューは１行になりやすくなるはずです。

変更して間もない場合はブラウザーのキャッシュが邪魔をして以前の表示が出たままになっている場合があります。

その場合は３分ほど待ってから「ctrl」+「F5」を押してキャッシュをクリアしてから見てください。

または「shift」+「ctrl」+「N」を同時に押してプライベートモードでURLを表示させてみてください。

以上です。

今回のCSS修正で「親」を変更したのですが、まずは「子テーマ」のスタイルシートに記述、または「外観」＞「カスタマイズ」＞「CSSの追加」で以下のコードを記述してみてください。

以上、CSSを使ってメニューの表示を改善する方法でした！

いろんなことで、メニュー表示が崩れる原因になるのですが、メニューだけの字の大きさを小さくすれば、キレイに１行で表示される可能性が高くなります。

もし、メニューの表示でお困りでしたら改善のヒントにしてください。

WordPress の簡単なカスタマイズします どうしてもできない！あんな感じにしたい！などを実現！？