トップスライドショーの文字の大きさを変えたい!Lightning ライトニング 【CSSカスタマイズ】

Lightning ライトニング トップスライドショーの文字の大きさを変えたい!【CSSカスタマイズ】

今回は、人気のワードプレスの無料テーマ

ライトニング」の
カスタマイズ方法をひとつご紹介します。

ライトニングでは、トップスライドショーという
画像の上に文字を書けるんですが

実はその文字、
大きさが決まっていて変えられないのです。

それをなんとか!
無理やり変える方法(笑)をご案内します。

CSSを書くだけなので、カンタンですよ^^

まずは概要をご説明しますね。

 

Lightning ライトニングのトップスライドショーの文字とは

ライトニングはこんなデザインで、
はじめから、トップスライドショーの
画像の上に文字が入っています。

ライトニングテーマ

上の画像でいうと、
「シンプルでカスタマイズしやすい…」
書かれているところを
好きな言葉に変更することができます。

 

書き換える

  ↓ ↓ ↓

 

 ↓ ↓ ↓

こうなります。

※<br>というのは、「改行」という意味です

 

 

このように、サイトのトップの目立つところなので

サイトのキャッチコピーを書いたり
イベントのお知らせをすることもできる

とても便利な機能です♪

普通は、こんな場合画像に直接文字を書くしかないので
文字を変更したいときは、
画像を作り変えないといけないのですが

メニューから文字を書き換えるだけで、
簡単に変更できるのは
とてもありがたいですね^^

それでは設定画面を見ていきましょう。

 

トップページスライドショーの設定画面

 

 

ライトニングの
カスタマイズの下の方にある

Lightning
トップページスライドショー
」を開くと

 

 

 

スライドショー部分のメニューが出てきます。

 

 

 

ここを見ても、
文字については
色を変えるメニューしかないのです。

 

これをなんとか変えたいという企画です。

CSSでカスタマイズしちゃいましょう!

 

CSSというのは、デザインについての
プログラムコードのことです。

ここに、ちょこっと書き足すだけで
変更することができるんですよ。

 

CSSカスタマイズのやり方

カスタマイズメニューから

追加CSS」を選びます。

 

 

 

すると、追加CSS、という
プログラムを書く欄が出てきます。

 

ここに、変更するプログラムを
記入していく、というわけです。

 

文字の大きさを変えるCSSサンプル

まずこれをコピペしてください。

.mini-content-1 .slide-text-title{
font-size:2.2vw;
}

.mini-content-1 .slide-text-caption{
font-size:1.7vw;
}

.mini-content-1 .btn-ghost{
font-size:1.3vw;
}

これが、今書いてあるのと
同じCSSです。

ここの、数字を変えれば
文字の大きさが変わっていきますよ^^

 

では詳しく解説します。

 

CSSの書き替え部分 :スライドショーの番号

CSSは3つ書いてあるのですが…
一番上のものを見てみましょう。

 

.mini-content-1 .slide-text-title{
font-size:2.2vw;
}

 

まず、.mini-content-1 というのが
スライドの何枚めか?という指定です。

2枚目、3枚目の設定の時は
ここの数字を変更してください。

 

 

ex)
2枚目の場合、このように変更します。

 

.mini-content-2 .slide-text-title{
font-size:2.2vw;
}

.mini-content-2 .slide-text-caption{
font-size:1.7vw;
}

.mini-content-2 .btn-ghost{
font-size:1.3vw;
}

変更したいスライドが指定できたら、
次は文字の大きさです。

 

 

※スライドを1枚しか使っていない場合は、

.mini-content-2 .slide-text-title{
font-size:2.2vw;
}

赤い文字の部分は消して

.slide-text-title{
font-size:2.2vw;
}

これだけで大丈夫ですよ♪

 

 

CSSの書き替え部分 :文字の大きさ

では、文字の大きさを変えていきましょう。

文字は3種類用意されています。

スライドの番号の後の綴りに
注目してみて下さい。

 

.mini-content-2 .slide-text-title{
font-size:2.2vw;
}

ここですね。

slide-text-title 
スライド・テキスト・タイトル

と、書いてあります。

これは一番上の文字を指しています。

 

.mini-content-2 .slide-text-title{
font-size:2.2vw;
}

その後に出てくる
フォントサイズ2.2vw

 

この数字を変更すると
文字の大きさが変えられるんです。

数字を大きくすれば、
文字が大きくなります。

あとは、同様に…

2段目の文字は
slide-text-caption 
スライド・テキスト・キャプション

 

一番下のボタンは
btn-ghost 
ボタン・ゴースト

 

それぞれの数字を変更すると
お好みのサイズに調整できますよ!

あんまりやりすぎると、
レイアウトが崩れるので、確認しながら
調整してみてくださいね!

 

「;」や「}」がないだけで
まったく効かなくなるので
ご注意くださいね。

ライトニングについての記事はコチラ
合わせてご覧ください

https://wp-firststep.com/theme_lightning/

いくら美しいデザインを作っても「売れなければ意味がない」と気づきWebマーケティングを学び実践中。長年のカスタマーサポートのキャリアと、Web制作スキルを活かし、初心者向けに「日本一カンタン」をコンセプトとしたWordPressワークショップを主宰

Pocket