起業家・企業のありかた

起業家を育てるあたらしい企業の在り方

現在、日本の中小企業は、経営者の高齢化が進み、後継者問題が深刻化しています。結果として今まで培ってきた技術や伝統を継承することなく廃業する事業者が急増しています。さらに日本は起業家が生まれにくい国だともいわれています。 今回は、新しい時代の企業(社長)のありかた、世代交代、人材育成をテーマに考えてみたいと思います。 目次 起業家を育てるあたらしい企業の在り方日本の中小企業が抱える企業存続の問題点創業時の理念・技術を存続させる企業のありかた問題の根本を考えてみるひとつの会社に長居することを前提に考えていない ...

続きを読む

副業ドロップシッピングで開業!

40代会社員 副業|ドロップシッピング無知で開業はダメ! 始めるのに必要な心構えと知識

ドロップシッピングって稼げる?失敗する人から学ぶ 成功するための秘訣! 目次 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい副業ドロップシッピングで開業!稼げる?まず知りたいこと3つ!ドロップシッピング開業!失敗する人から学ぶ 成功するための秘訣!まとめ | 副業ドロップシッピング開業で成功の秘訣!実際のドロップシッピングで開業したショップを公開! 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい 冴えない40代サラリーマン。出世もこれ以上望めないし、給与は減るばかり。。 ...

続きを読む

自宅が仕事場のフリーランス

SOHOで働く!人間関係で会社辞めたい!働きに出たくない!

目次 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない「SOHO 楽して自宅で稼ぐ」は本当か?働き方をSOHOにしてよかったと思うことSOHOにはどんな仕事があるのかSOHOで食べていけるのか?SOHOが大変と思うときは仕入れがほとんどないネットの仕事 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない 会社辞めたい。でも生きていくためには働かないと・・・。 自分にはこの会社向いていない この職場で働くのムリ この仕事を一生続けていく自信がない もう人間関係に疲れた 転職しても同じことの繰り返し 辞 ...

続きを読む

もしもドロップシッピング

もしもドロップシッピングの始め方!ネットショップを3店開設してみた【完全解説】

初心者にも分かる!ドロップシッピングを始める!簡単ショップづくり!実際のショップがココで見れる! 目次 もしもドロップシッピングではお店が無料で作れる3ステップもしもドロップシッピングとはお店ができるまでの手順は簡単3ステップ!もしもドロップシッピングで稼ぐ仕組みと流れショップできすぎ君(もしもドメイン)で作成ショップ!ショップできすぎ君(独自ドメイン)で作成ショップ!ワードプレスで作成したショップ!自分で好きなデザインにできる!ショップ制作のお手伝い外部発注してショップを作ることも可能!実際に発注し納品 ...

続きを読む

会社のことをパソコンで管理

会社での3大管理「人・物・金」はもう古い!今は7大管理!

マネジメントする立場になったら覚えておこう!会社での重要な管理項目を簡単に解説! 目次 会社のマネジメントで大事な管理とは?人の管理とは物の管理とは金の管理とは会社での新しい7大管理とは技術の管理とは時間の管理とは情報管理とは自己管理とは会社の7大管理まとめ 会社のマネジメントで大事な管理とは? 会社での大事な管理項目は?一昔前までは「人・物・金」の3大管理で済んでいましたが、今ではリスクや様態の多様化でこれだけでは全く足りません。最低でも7大管理が必要な時代に突入しています。大変ですが会社や個人の優劣の ...

続きを読む

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

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 ショップ制作をお手伝い!

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

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

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

興味津々のサイトです!

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

<50ブログ>

こんにちはこの<50ブログ>を書いているホットリングです。このブログを書いているのは1968年生まれ 申年のおっさんです。A型です。職歴は飲食業が長く現場と管理職を経験しました。広告の営業の仕事もしていた時代もあり、いろんな経験を経て今は独立して広告業とネットショップの構築などの仕事をしています。いろんな経験をもとにわがままに書いてます。日々Wordpressと向き合いHTML、CSSなどと向き合っています。参考になる部分があったら嬉しいです☆

最近よく読まれているページ

PVを増やして収益UP!はアフィリエイトではなくアドセンスです! 1

アフィリエイトの収益アップには「PVを上げろ!」とか「100万PVのわたしが解説!」なんていう文言をよく見ますが。。。 見られる回数が増えただけで収益は上がるのでしょうか?そんなにPVって大事なんでし ...

ドロップシッピング ベッドショップ ポートフォリオ 2

WordPressで作ったドロップシッピングサイトが欲しい WordPressのショップを持ちたいけど作り方が分からない WordPressのショップ構築が分からない 商品ページ、固定ページ、メニュー ...

副業ドロップシッピングで開業! 3

ドロップシッピングって稼げる?失敗する人から学ぶ 成功するための秘訣! 目次 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい副業ドロップシッピングで開業!稼げる?まず知りたいこと3つ ...

大きく打ち上げる 4

アフィリエイトで稼ぐ方法!長くやっていくには?アフィリエイトで売れない理由の一つに無駄に大きい目標を掲げてしまうというのがあります。楽して大きく稼げると思ったら大間違いです!アフィリエイトの本質を見極 ...

自宅が仕事場のフリーランス 5

目次 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない「SOHO 楽して自宅で稼ぐ」は本当か?働き方をSOHOにしてよかったと思うことSOHOにはどんな仕事があるのかSOHOで食べていけるのか?S ...

2人のやる気 6

営業の仕事は大変!売れないセールスマンと売れるセールスマンには「売る気」の意味が違う!? 目次 売る気満々では売れない理由があるそれは「売る気」には、2つの「売る気」が存在するからです。成果を分ける2 ...

履歴書 7

転職の時期がきているのかも・・・ 目次 今の会社、今やっている仕事、このままでいいのか無駄な時間を過ごしていないか考えてみる無駄なところにパワーを使っていないか考えてみるブラック企業に身を置いていない ...

電子ベイプで禁煙 8

目次 40歳 禁煙したきっかけは体調不良吸いたくなる時があるのはこんなとき電子ベイプと出会い禁煙が加速今では電子ベイプがちょっとした趣味に 40歳 禁煙したきっかけは体調不良 40歳の時に私は禁煙をし ...

ワードプレステンプレート 9

アフィリエイト特化型ワードプレステーマを導入したらボタンやデザインに感動しただけでなく、落ち込んでいた売り上げも回復しました!アフィリエイトとGoogleの検索結果について、アフィリエイト成果が回復す ...

洗剤でテーブルを掃除中 10

なぜ新人さんは掃除をさせられるのか?そこには深い意味がありました。就職したばかりの社員、採用されて初日のアルバイトが掃除をさせられるのには教育と効率の2面性がありました! 目次 仕事初日から掃除が続く ...

Copyright© WEB制作・ネットビジネス・起業についてあれこれ<50ブログ!> , 2019 All Rights Reserved.