ratio_3_2 のカスタマイズ方法

トップページのキャプションの背景色を変える方法~スマホ・タブレット編~【baserCMS ratio_3_2】

トップページのキャプションの背景色を変える方法~スマホ・タブレット編~【baserCMS ratio_3_2】

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

トップページのピックアップメニューのキャプション背景色の変更方法です。

小技ですが特に目につく部分ですので、テーマカラーに合わせて変更したい方のためにご紹介いたします。(テーマ設定からも変更できない部分になります)

デフォルトの状態 タブレット・スマホでアクセス時

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

変更後

capcolor2.png
当サイトのメインカラーに合わせて薄い黄緑に変更しました。

スマホ・タブレットからのアクセスが主流になっている昨今、拘りたいサイトオーナー様もおられると思います。
スポンサードリンク

実践編

ソースを調べてみます。

いつも通り、ページ(トップページ)のソースを見てみます。
capcolor3.png
thumbnail-title というクラス名を style.min.css で探します。(Ctrl + F を押します。PCより)

レイアウトテンプレート → CSS一覧 → style.min.css
★豆知識 : 背景色の場合は、background-color: と指定されている事が多いので、クラス名が多数ある場合に探す時の材料になります。また、今回は、タブレットやスマホでアクセスした時だけに表示される箇所なので、メディアクエリの指定があると考えられます。
ありました。こちらが該当部分になります。
capcolor4.png

緑の下線の部分がメディアクエリ(画面幅指定)で、画面幅 991pxまでの端末からのアクセスは、以下の指定を読み込むという記述です。この中に背景色を指定している記述があるのが判ります。
background-color:rgba(0,0,0,.1) となっています。RGBは聞いたことが有ると思いますが、今回はRGBAとなっているので、透明度が追加されています。一番右の .1(0.1) というのが透明度を表していて、0.1=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です。
capcolor5.png
例)background-color:rgba(130,174,70,.1)

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

ページを更新する (PCからは F5 を押す)

キャッシュをクリアする

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

ブラウザのキャッシュをクリアする方法(スマートフォン)

スーパーリロードする (PCから Ctrl + F5 を同時押し Windows)


次回は、パソコン表示編です。
→ キャプションの背景色と文字色を変える方法~パソコン表示編~​

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework