WordPress講座(個別相談)

BizVektorのグローバルメニューのフォントサイズを変更する方法を紹介します。現在は次のようなイメージです。

BizVektorのグローバルメニュー

BizVektorのグローバルメニュー

以下、メニュー全体のフォントサイズを設定する方法や個別のメニュー項目だけ微調整する方法を紹介します。

スポンサーリンク

グローバルメニュー全体の文字サイズを大きく

メニュー項目のフォントサイズを設定するには、次のようなCSSでメニュー項目のliタグにスタイルを設定する方法があります。

/* グローバルメニュー全体のフォントサイズを設定 */
#gMenu .menu li {
    font-size: 16px;
}

表示結果は次のようになります。指定したサイズはグローバルメニュー全体に反映されます。

グローバルメニューの文字サイズを大きく

グローバルメニューの文字サイズが大きくなる

個別メニューのフォントサイズを微調整

上記で設定したフォントサイズによっては、一部のメニュー項目が2行になって見づらくなる場合があります。

文字数の多いメニューが2行になる

文字数の多いメニューは2行になる場合も

調整方法はいくつかありますが、次の方法で個別メニューのCSSを調整することができます。

個別メニュー項目のIDを調べる

まずは、ブラウザの「要素の検証」(要素の調査)またはHTMLソース表示から、修正したいメニュー項目のidを調べます。

メニュー項目のidをチェック(要素を調査)

メニュー項目のidをチェック(要素を調査)

この例では「特別席(5階)のご予約」に対応するliタグは次のようになっています。

<li id="menu-item-235" …略…">…略…<strong>特別席(5階)のご予約 …略…</li>

このメニュー項目のIDは「menu-item-235」だとわかります。

調べたIDに対してCSSを指定する

修正対象のメニューID「menu-item-235」に対して次のCSSを指定すれば、このメニュー項目だけフォントサイズを調整できます。4行目まではグローバルメニュー全体のフォントサイズ設定です。

/* メニュー全体のフォントサイズ */
#gMenu .menu li {
    font-size: 16px;
}

/* 個別メニュー項目のフォントサイズ */
#gMenu #menu-item-235 {
    font-size: 14px;
}

/* 行間を調整 */
#gMenu #menu-item-235 a {
    line-height: 130%;
}

「特別席(5階)のご予約」のみフォントサイズが小さくなり、1行に収まります。ついでに行間も調整しています。

文字数の多いメニュー項目のフォントサイズを小さく

文字数の多いメニュー項目のフォントサイズを小さく

欲を言えばタブレットやスマホ表示のときはグローバルメニューのフォントサイズ調整は不要ですが、話が長くなるので今回は「@media (…略…)」を省略します。

ドロップダウンメニューの子要素のフォントサイズがおかしいとき

フォントサイズをpxで指定する代わりに、相対指定の「%」や「em」を使うとうまくいかない場合があります。

#gMenu .menu li {
    font-size: 150%;
}

このCSSではドロップダウンメニューの子要素だけが大きくなってしまうかもしれません。親メニューのliタグに対して150%、それを基準に子メニューのliタグにも150%のサイズが適用されるためです。単純計算で150%の150%で225%になります。

親子でフォントサイズが違う

親子でフォントサイズが違う(子要素が大きくなる)

この場合、「%」の代わりに「rem」で指定(例:font-size: 1.5rem;)するか、「すぐ下の子要素のみに」というCSSを指定します。以下に例を紹介します。

#gMenu .menu > li {
    font-size: 150%;
}

「.menu > li」は「.menu直下のli」という意味です。この設定は基本的には下階層のliタグにも引き継がれるため、親子のメニューが同じフォントサイズになります。

親子メニューが同じフォントサイズに

親子メニューが同じフォントサイズに

次のようにrem(ページのルート要素からの相対的なサイズ)を指定する方法もあります。

#gMenu .menu li {
    font-size: 1.5rem;
}
「150%=1.5rem」ではないので注意してください。

この例のグローバルメニューは全体のフォントサイズ16pxの1.5倍の24pxになります。

グローバルメニューのフォントサイズを1.5remに設定した結果

グローバルメニューのフォントサイズを1.5remに設定した結果

フォントサイズを「%」で指定するのが良いか「rem」や「em」を使うのが良いか、この記事の主旨から外れるので説明は省略します。

あくまでBizVektorの対応例です。他のテーマではうまくいかない場合があります。「%」の代わりに「rem」を使う方法などもお試しください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク