【Cocoon】グローバルナビメニューの文字サイズ、太さを変える方法

この記事ではグローバルナビメニューの文字サイズ、太さを変える方法をご紹介したいと思います。

グローバルナビメニューの文字サイズ変更

グローバルナビメニューの文字サイズを変更するには、CSSを書き込みます。

書き込む場所は、管理画面＞外観＞カスタマイズ＞追加CSSです。

以下の記述を書き込みます。

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 18px;
}

フォントサイズは「font-size: 18px」の数字を変えます。
では、グローバルメニューのフォントを小さくしてみます。

12pxにしてみました。

次に、フォントを太字にしてみましょう。

グローバルナビメニューの文字を太字にする場合は、
「font-weight: bold;」を追加します。

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 18px;
font-weight: bold;
}

これでグローバルメニューは太字になります。

グローバルメニューにはアイコンを入れることもできます。

グローバルメニューにグラデーションを入れることもできます。

グローバルメニューエリアのキャッチフレーズの文字を太字にしたり、サイズや色を変えることもできます。

ということで、グローバルナビメニューの文字サイズ、太さを変える方法をご紹介しました。

簡単にできますので、ぜひ試してみてください。