【WordPress】グローバルナビの各メニューを2行にする方法

※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。

ワードプレスの使用するテーマによっては
メニュー名を2行にすることができるものもありますが
そういった機能がない場合は、以下のような形で
2行にすることができます。


外観>メニューにて、名前に以下のようなパターンで入力します。

新着記事<span class="menu-break">News</span>


外観>カスタマイズ>追加CSSにて以下コードを追加して保存。
見た目が悪い場合は数値等調整するとよいです。

span.menu-break {
	display: block;
	bottom: 10px;
	position: absolute;
	font-size:14px;
	color:red;
}

そうするとこのような感じになります。

写真は、フォントも調整しているバージョンです。




\応援ありがとうございます🌿/
各種ブログランキングに参加しています✨

アバター画像

Hiro先生

おかげさまで豊かさに満たされた日々を
今、素敵に生きています
感謝の種まきによって人生が根底から変わることを知って
素敵なご縁の輪を広げながら、
望む未来を叶える、奇跡を起こし続けるお手伝いをしています。

記事本文: 358