キャプションの背景色を変える方法～スマホ・タブレット編～
トップページのピックアップメニューのキャプション背景色の変更方法です。小技ですが特に目につく部分ですので、テーマカラーに合わせて変更したい方のためにご紹介いたします。（テーマ設定からも変更できない部分になります）
デフォルトの状態 タブレット・スマホでアクセス時
うすいグレーになっています。このカラーを変更する方法になります。
変更後
当サイトのメインカラーに合わせて薄い黄緑に変更しました。
スマホ・タブレットからのアクセスが主流になっている昨今、拘りたいサイトオーナー様もおられると思います。
実践編
ソースを調べてみます。
いつも通り、ページ（トップページ）のソースを見てみます。
thumbnail-title というクラス名を style.min.css で探します。（Ctrl ＋ F を押します。PCより）
レイアウトテンプレート → CSS一覧 → style.min.css
★豆知識 ： 背景色の場合は、background-color: と指定されている事が多いので、クラス名が多数ある場合に探す時の材料になります。また、今回は、タブレットやスマホでアクセスした時だけに表示される箇所なので、メディアクエリの指定があると考えられます。
ありました。こちらが該当部分になります。
緑の下線の部分がメディアクエリ（画面幅指定）で、画面幅 991pxまでの端末からのアクセスは、以下の指定を読み込むという記述です。この中に背景色を指定している記述があるのが判ります。
background-color:rgba(0,0,0,.1) となっています。RGBは聞いたことが有ると思いますが、今回はRGBAとなっているので、透明度が追加されています。一番右の .1（0.1） というのが透明度を表していて、0.１＝10% となります。0,0,0, は黒を表していていますので、黒の10%の色味でデフォルトの色になっています。 見た目は薄いグレーですが、透明度がありその下の色（白）と混ざった色味になっているという訳です。
脱線しましたが、これを変えることで変更ができます。私は背景色の下地（白）を変えないので、今回はメインカラーに合わせた薄い色目にしてみました。参考サイト → 原色大辞典
背景色の指定方法は様々ですが、定番なのがこちらです。
background-color:#f7ffef; この様に＃から始まる色番号を指定するのが一般的です。透明度を持たせたい場合はRGBAを使います。
今回も、custom.css に追記する方法ではなく、style.min.css を直接書き換える方法を取りますので、ソースのバックアップを必ず取ってから作業して下さい。
変更点のコード
変更前
.thumbnail-title{position:static;bottom:0;background-color:rgba(0,0,0,.1)}変更後
.thumbnail-title{position:static;bottom:0;background-color:#f7ffef;}
#から始まる色を指定する事で、お好みの色目に変更することができます。この部分は文字の下に来る部分ですので、薄い色目が望ましいかと思います。
デフォルトと同様に透明度を持たせたい場合は、お好みの色をこちらで調べてRGB形式で記述し、最後の数字を変えてあげればOKです。
例）background-color:rgba(130,174,70,.1)
表示が変わらない時は・・・
ページを更新する （PCからは F5 を押す）
キャッシュをクリアする
→ ブラウザのキャッシュをクリアする方法（PC）→ ブラウザのキャッシュをクリアする方法（スマートフォン）
スーパーリロードする （PCから Ctrl ＋ F5 を同時押し Windows）
次回は、パソコン表示編です。
→ キャプションの背景色と文字色を変える方法～パソコン表示編～
お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。
応援して頂けると励みになります。
