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

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

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

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

ライトニングテーマ

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

書いてあるのがご覧いただけるかと思います。

これは、ライトニング独自の機能で
画像の上に文字を書けるようになっています。

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

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

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

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

よく見ると3つに分かれていますね。
一番上のものを見てみましょう。

 

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

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

これはスライドの何枚めか?という指定です。

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

赤い文字の部分は消して

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

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

 

 

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

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

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

スライドの番号の後につづく文字を
読んでみましょう。

 

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

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

と、書いてありました。

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

 

そして、その後も読んでみると

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

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

 

フォントサイズ…
その名前の通り、この数字を変更すると
文字の大きさが変えられます。

数字を大きくすれば、

文字が大きくなります。

あとは、同様に…

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

 

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

 

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

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

 

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

テーマ:ライトニングについて
概要をお話した記事はこちらです。
合わせてご覧ください。

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

村重 敦子

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

Follow me!