
キャプションの背景色を変える方法~スマホ・タブレット編~
トップページのピックアップメニューのキャプション背景色の変更方法です。小技ですが特に目につく部分ですので、テーマカラーに合わせて変更したい方のためにご紹介いたします。(テーマ設定からも変更できない部分になります)
デフォルトの状態 タブレット・スマホでアクセス時

うすいグレーになっています。このカラーを変更する方法になります。
変更後

当サイトのメインカラーに合わせて薄い黄緑に変更しました。
スマホ・タブレットからのアクセスが主流になっている昨今、拘りたいサイトオーナー様もおられると思います。
実践編
ソースを調べてみます。
いつも通り、ページ(トップページ)のソースを見てみます。
thumbnail-title というクラス名を style.min.css で探します。(Ctrl + F を押します。PCより)
レイアウトテンプレート → CSS一覧 → style.min.css

緑の下線の部分がメディアクエリ(画面幅指定)で、画面幅 991pxまでの端末からのアクセスは、以下の指定を読み込むという記述です。この中に背景色を指定している記述があるのが判ります。
参考サイト → 原色大辞典
背景色の指定方法は様々ですが、定番なのがこちらです。
background-color:#f7ffef; この様に#から始まる色番号を指定するのが一般的です。透明度を持たせたい場合はRGBAを使います。
変更点のコード
変更前
.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)
次回は、パソコン表示編です。
→ キャプションの背景色と文字色を変える方法~パソコン表示編~
お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。