ブログ関連

WordPress STINGER8 メニューの幅や高さ・フォントを小さくする方法

投稿日:2017年6月29日 更新日:

【 本記事のターゲット 】

  1. WordPress Stinger 8 を利用している
  2. カテゴリーが増えてきた
  3. メニューに表示させる項目を増やしたい
  4. メニューの幅や文字フォントを小さくして少ない行で沢山表示させたい

今回はWordPressに関するブログネタになります。

当ブログですが、テーマは「STINGER 8」を利用しており、そんなにカスタマイズもせずデフォルトのままで基本利用しているのですが、ここ最近下記のような悩みを持っていました…

  • 記事が多様化してカテゴリーが増えてきた
  • メニューにカテゴリーを記載したいが、数が多くなりすぎて3行となり見栄えが良くない
  • メニューの幅やフォントの大きさを自由に調整出来ないのか…

結構色々調べたりメニューをカスタマイズしている人のブログをみて諸々いじってみたのですが、中々上手く行かず…

何とか試行錯誤の末、メニュー幅とフォントを小さくして1行6個のカテゴリーを7個に増やし2行に納める事が出来ました。

もし同じ悩みを持っている方の為に、メモ書きとして変更箇所を下記に記載しますので良ければ参考にしてみてください。

STINGER 8 メニューカスタマイズ方法

メニューのレイアウトを確認する

まずはブログのメニューを再確認しておきましょう。下記赤で囲った部分がメニューになります。

上記は既にカスタマイズしてしまった後なのですが、デフォルトの状態だと下記設定になっています。

1項目の幅・高さ・文字フォント

  • 幅:160px
  • 高さ:40px
  • フォント:13px

この状態だと1行で表示出来るカテゴリーの数としては「6項目」になります。2行だと12項目。今回mogの場合、14項目表示させたかったのですが、いままで2行で表示していた為、出来れば2行で14項目表示出来ないかな…というのがきっかけになります。

メニューの幅を小さくしてみる

では実際にメニューの幅を小さくする方法ですが、今回スタイルシート(style.css)を直接編集しました。※下記編集作業は自己責任でお願いします。

まずは管理画面から「外観」→「テーマの編集」をクリックします。

テーマの編集で「スタイルシート(style.css)」を選択します。その中から検索等で

「header .smanone ul.menu li{」

を検索して下記画面の場所を見つけ出します。※2つあるかもしれませんが、下記文字列の箇所を探します。

この中の項目を見るとデフォルトでは

  • width:160px
  • height:40px

になっているかと思います。幅を小さくするには「width:160px」の160pxの数字を小さくします。今回mogblogの場合だと150pxにしてみました。そうする事で、今まで6項目の表示だったのがメニューの幅が小さくなり7項目の表示が可能になりました。

メニューのフォントの大きさを小さくする

メニュー幅を小さくしたのはよかったのですが、フォントの大きさがそのままだったので若干圧迫感が…

そこで、メニューのフォントの大きさを1段階だけ小さく出来ないかと思い、下記項目を編集してみました。先ほど編集した項目の直ぐ下にある部分になります。※下記編集作業は自己責任でお願いします。

デフォルトでは

  • font-size: 13px

となっている部分があるかと思います。こちらがメニュー内の文字フォントの大きさになりますので、今回こちらの数字を「12px」に変更してみました。

その結果、1行で7項目&フォントも一回り小さくしたので見た目もスッキリ♪

最後に

STINGER 8のメニューカスタマイズ方法って意外と紹介されているブログ等が少ないので、初心者のmogとしては結構苦戦しました。まず設定箇所を見つける所が…苦笑

同様に色々と悩んでいる方がいらっしゃいましたら、当ブログの内容が少しでも役に立てば幸いです。

スポンサーリンク

-ブログ関連

執筆者:

関連記事

Googleマップ&ストリートビューのキャプチャ・ブログ掲載はポリシー違反

【 本記事のターゲット 】 ブログ&WebにGoogleマップの地図を掲載したい ストリートビューの画像を利用したい 今 …

【2017年最新】初心者でも分かるGoogle Adsense 審査通過ポイント

medi8の記事でも書きましたが、こちらのサイトではレンタルサーバとドメイン名くらいは何とかWebの収益で賄えないかな& …

【初心者向け】WordPressブログ作成方法 TOPページ作成から初回投稿まで

「ブログを開設しよう」のページでは、レンタルサーバ(wpXクラウド)と独自ドメインの取得、そしてWordPressのイン …

WordPressプラグイン不具合発生 ダウングレードで元の状態に戻す方法

【 本記事のターゲット 】 WordPressを利用している プラグインを活用している プラグインアップデート後にエラー …

検索流入を増やしてアクセス数アップ ブログ開設4ヶ月間での実践方法を伝授

【 本記事のターゲット 】 ブログのアクセス数がなかなか伸びない 検索流入が少ない 今回はブログを作成されている方向けに …




管理人:mog
昔からキャンプ・旅行好き。東京都在住。現在7歳の息子と4歳の娘の2児の父。家族旅行・キャンプに奮闘中。

ブログの更新内容をメールでお知らせします。