lightning ｜ロゴ・タイトルのサイズ変更｜cssカスタマイズ・コード付

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

今回はロゴのサイズ変更希望。サイズを変更するカスタマイズを紹介。もちろんコピペで何度も使用できるようにコードも貼り付けましたのでよかったら参考にしてください。

lightning proのロゴ・タイトルカスタマイズ編

適応前のlightning proです。今回はロゴが小さいということでレイアウト修正にするためにはどうすれば良いのか？説明させていただきます。結論から言いますと、cssという場所に今回紹介するコードを貼り付けるだけです。

CSSを追加する場所

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

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

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

ロゴのサイズ変更

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

/* ロゴのサイズ変更 */
.siteHeader_logo img {
max-height: 100px;
}

これだけです。大きくなりましたとさ。

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

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

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