新着情報

前回に引き続き、今回は、トップページのピックアップメニューのキャプションの文字色と背景色を変更する方法をご紹介いたします。

→ キャプションの背景色を変える方法～スマホ・タブレット編～
 

キャプションの背景色と文字色を変える方法～パソコン表示編～

今回変更する箇所はこちらです。

デフォルトの状態

赤枠の部分になります。透明度のある白い背景色に文字（黒）が乗っている状態。
 

変更後

透明度のある黒い背景色に文字（白）をのせた状態。簡単に言うと反転させた状態です。お使いの画像によっては、こちらの方が文字は見やすいかもしれません。

また、デフォルトのメイン画像のキャプションは、変更後の状態と同様ですので、揃えたい方もおられると思います。

---

実践編

ソースを調べてみます。

→ 前回 と同じ箇所です。

thumbnail-title というクラス名を style.min.css で探します。（Ctrl ＋ F を押します。PCより）

レイアウトテンプレート → CSS一覧 → style.min.css
こちらになります。（Google Chromeで Ctrl ＋ F で検索）　18個該当の12個めあたり


青い線を引いた .pickup がすぐ前にありますので見分けて下さい。

赤い線を引いた　background-color:rgba(255,255,255,.75)　この部分が背景色を指定しています。
これを変更します。

変更点のコード

変更前

background-color:rgba(255,255,255,.75)

変更後

background-color:rgba(0,0,0,.4)

0,0,0,は黒、.4 は40%を表します。


これで保存するとこの様になります。


変わりましたか？ 変わらない場合は、更新するかキャッシュを削除してみて下さい。
 

続いて文字色の変更方法です。

同じく、style.min.css の18個該当の17個めあたり（下の方です）


青い線がメディアクエリの箇所でその中にタイトルの文字サイズを指定する箇所がありますが、この箇所だけの文字色の指定がないので追記します。

変更箇所

追記箇所が２つありますので注意して下さい。

追記前

.thumbnail-title{font-size:18px}

追記後

.thumbnail-title{color:#FFF;font-size:18px}

2つ目

追記前

.thumbnail-title{font-size:22px}

追記後

.thumbnail-title{color:#FFF;font-size:22px}

文字色を #FFF で指定しています。 白を意味しています。

@media (min-width:992px) から font-size:22px} までの全体のコード

@media (min-width:992px){.pickup [class*=col-]{padding:0 1px}.pickup .thumbnail .thumbnail-title{color:#FFF;font-size:18px}.pickup .thumbnail .caption{font-size:12px}.pickup .thumbnail p.thumbnail-more .btn{font-size:11px}}@media (min-width:1200px){.pickup [class*=col-]{padding:0 2px}.pickup .thumbnail .thumbnail-title{color:#FFF;font-size:22px}

これで、全て変更完了です(^^)/
 

表示が変わらない時は・・・

ページを更新する （PCからは F5 を押す）

スーパーリロードする （PCから Ctrl ＋ F5 を同時押し Windows）

キャッシュをクリアする

→ ブラウザのキャッシュをクリアする方法（PC）
 

最後に・・・

今回は、文字と背景を反転させたような仕様にしましたが、他の色でも可能です。また、透明度を調節することも出来ますので、お好みの仕様に出来ると思います。ただ、サイト訪問者にとって見やすいサイト作りを第一に考えて下さいね(^^)/

次回は、フォントの変更方法についてです。
→ トップページのキャプション文字のフォントと文字サイズを変える方法​

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。