トップのナビメニューの表示を改善したい

https://www.koko-de.com

Wordpress

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

投稿日:

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

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

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

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

パソコントップのナビメニューとはコレの事

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

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

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

  • メニューの数が多くなった時
  • メニューの字数が多くなった時
  • ワンカラムと2カラムで表示が違う

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

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

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

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

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

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

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

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

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

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

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

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

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

ワンカラムの場合はメニューが1行でスリム!きれいに表示される♪

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

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

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

2カラムのときのメニュー表示

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

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

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

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

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

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

CSSで字の大きさを変える

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

※以下は親のスタイルシートの画像もあります※更新があった場合に消える可能性があります※行数などは当時のものです※

「外観」>「テーマエディター」>「SANGO」>スタイルシート「3903行目」

「SANGO」>スタイルシート

子テーマです!「SANGO Child」または「SANGO」>スタイルシートで改善!

シート行数で3903行目(親の場合)にTOPナビの文字の大きさを変えるところがあります!

  ▲3903行目の12pxです。

ココがポイント

メニューの字の大きさのデフォルトは15pxです。14px,13pxと試して12pxでようやく1行になりました。

親テーマの更新があって修正が消えた場合は、ここを12pxに変更すればOK!

.header--center .desktop-nav li a {
height: auto;
padding: 10px 15px 15px;
font-size: 12px;
line-height: 1.5;
}

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

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

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

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

以上です。

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

これをコピペでOKです。

.header--center .desktop-nav li a {
height: auto;
padding: 10px 15px 15px;
font-size: 12px;
line-height: 1.5;
}

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

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

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

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

このテーマがおすすめです!

「WING」アフィンガー5

アフィリエイトの成果をアップさせるワードプレステーマ

★アフィリエイトに特化したワードプレステーマ!

WINGはこんな方におすすめ!

アフィリエイトを本気で取り組みたい !

アドセンスブログに本気で挑戦したい!

ドロップシッピングに本気で取り組みたい!

ドロップシッピング×Wordpress制作代行!

Wordpress制作ショップ(ドロップシッピング)

ドロップシッピング×Wordpress ショップ制作をお手伝い!

ドロップシッピングでバリバリ頑張りたい人を応援するひな型・土台ショップが手に入る!

商品ページがすでに実装されているから分かりやすい!構造や商品ページ作りの勉強にもなる!

扱う商品ごとにショップが分かれています!

興味津々のサイトです!

ショップできすぎくん制作代行

ショップできすぎくんで作ったショップ

副業にピッタリ!将来のために収入源を増やそう!ドロップシッピングは無在庫で無料で始められるネットビジネス!しかも梱包・発送作業ナシ!問い合わせ対応ナシ!リスクが最小限で始められるビジネスです。

ショップできすぎくんはMOSHIMOドロップシッピングの公式ショップ作成ツールです。 作り方が分からない方のためにショップ制作を代行します!納品後すぐに使えます! ブログからの誘導、広告を使って初売上を目指しましょう!

★会社勤めの方、主婦の方、子育て中の方、高齢の方!副業にぜひご活用ください!

  • この記事を書いた人
アバター

<50ブログ>

こんにちはこの<50ブログ>を書いている管理人です。職歴は有名チェーン店飲食業が長く現場と管理職を経験しました。広告の営業の仕事もしていた時代もあり、いろんな経験を経て今は独立して広告業とネットショップの構築などの仕事をしています。いろんな経験をもとにわがままに書いてます。日々Wordpressと向き合いHTML、CSSなどと向き合っています。参考になる部分があったら嬉しいです☆50ブログとは、自分の座右の銘です。人は常に50:50の分岐に立たされています。やるかやらないか、どっちにするのか、など。。。話せば長くなるのであとはご想像にお任せします☆

Copyright© 副業・起業に役立つブログ!WEB制作・ネットビジネス応援<50ブログ!> , 2019 All Rights Reserved.