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

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

大人気WordPress無料テーマ
Lightning ライトニング」の

カスタマイズ方法をひとつご紹介します。

トップページのスライドショーの上の
文字の大きさを変更する方法です。

 

Lightningのスライドショーの文字とは

「シンプルでカスタマイズしやすい
WordPress.org登録テーマ」

と書いてある部分です。

これは、テーマ”ライトニング”独自の機能で

「スライドタイトル」と
「スライドテキスト」と呼ばれ、

トップスライドショーの上に文字を書けるようになっています。

トップページにお知らせをするのに
毎回画像を変えなくていいのでとっても便利ですね。

 

変えてみました。

ですが、実は文字が書き換えられるだけで
大きさは変えられないのです。

もうちょっと変えたくありませんか?

それをなんとか
無理やり変える方法を考えましたよ(笑)

 

 

編集画面で変えられるのは文字と色だけ

 

ライトニングの
カスタマイズメニューを見てみます。

Lightning
トップページスライドショー
」の中に

スライドの設定メニューがあります。

 

 

 

 

文字に関しては、

色だけでした。

というわけで・・・

 

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の書き替え :スライドショーの番号

 

何か、数字が書いてありますね。

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

これは何枚目のスライドの文字を変えるのか
というページの指定です。

2枚目、3枚目の文字を変えたいときは、
ここの数字を1から2、または3に変更してください。

例)
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;
}

赤い文字の部分は消して

.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;
}

スライド・テキスト・タイトル

と、書いてありました。

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

 

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

 

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

 

 

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

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

CSSの最後に、また数字があります。

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

フォントサイズ2.2vw
と書いてありますね。

 

フォントサイズ…

その名前の通り、この数字を変更すると
文字の大きさが変えられます。

 

数字を大きくすれば、

文字が大きくなります。

 

あたりまえですかね(笑)

 

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

 

CSSは、コピペしたときに
記号がひとつでも足りないと
「;」や「}」がないだけで
まったく効かなくなるので、コピー漏れにご注意くださいね。

 

同じく、Lightningの背景色を変える
カスタマイズの方法はこちら

ブログの背景色を変えたい!Lightning ライトニングカスタマイズ

テーマ:ライトニングについて
概要をお話した記事はこちらです。

「Lightning」ライトニング スライドショーも使える人気テーマ ワードプレス無料お勧めテーマ3

合わせてご覧ください^^

Follow me!

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。