lightning pro|キャンペーンテキストのサイズ変更|cssカスタマイズ・コード付

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

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

lightning proのキャンペーンテキスト・カスタマイズ編

適応前のlightning proです。今回はキャンペーンテキストが小さいということでレイアウト修正にするためにはどうすれば良いのか?説明させていただきます。結論から言いますと、cssという場所に今回紹介するコードを貼り付けるだけです。確かに現状では少し小さいですね。

CSSを追加する場所

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

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

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

ロゴのサイズ変更

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

/* キャンペーンテキストのサイズ変更 */
.vk-campaign-text {
font-size: 27px;
}

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

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

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

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