lightning ｜グローバルメニューのフォントサイズ・フォント変更｜cssカスタマイズ・コード付

私が仕事でよく使うテーマlightning pro。lightning proは使い勝手がよく企業向け・イベント向けサイトに非常に相性が良いです。もちろん既存のテーマのままでも十分です。しかし、クライアントによっては〇〇のフォントサイズを変更・色を変更して欲しいなどと希望があります。

今回はグローバルメニューが少し小さいようです。そちらのサイズや色・フォントを変更するカスタマイズを紹介。もちろんコピペで何度も使用できるようにコードも貼り付けましたのでよかったら参考にしてください。

lightning proのグローバルメニューカスタマイズ編

既にフォントサイズを変更したlightning proです。今回は上記のようにみやすいレイアウトにするためにはどうすれば良いのか？説明させていただきます。結論から言いますと、cssという場所に今回紹介するコードを貼り付けるだけです。

CSSを追加する場所

カスタマイズするためにはCSSという場所を色々と追記する必要があります。

lightning proではダッシュボード→外観→カスタマイズ→追加CSSと進んでいけば、以下のページにたどり着きます。

以下に紹介コードを貼り付けて保存するだけです。

グローバルメニューのフォント変更

上記のコードを追加する場所に以下のコードをコピーして貼り付けてください。

/* メニューのフォントサイズ変更 */
.gMenu>li .gMenu_name {
font-size: 20px;
}

これだけです。

サイズの大きさを自由に設定する場合

現在は20PXというフォントサイズになっております。そこの数値をお好きな数値に変更してあげればお好きな文字の大きさに変更できます。

フォントカラーを変更したい場合

/* メニューのサイズ変更 */
.gMenu>li .gMenu_name {
font-size: 20px;
font-color: #お好きなカラーコード記入
}

カラーコードを記入するとナビのフォントを変更できます。余談ですがここに色々と追記することでフォント・上下に線を追加できます。

今回は以上です。当サイトで私がこれまでに使用したテーマのカスタムを備忘録も兼ねて簡単に紹介しています。ぜひその他の記事も参考にしてください。