ratio_3_2 のカスタマイズ方法

トップページのキャプションの背景色と文字色を変える方法~PC表示編~【baserCMS ratio_3_2】

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

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

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


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

デフォルトの状態

cappcolor0.png

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

変更後

cappcolor4.png

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

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

実践編

ソースを調べてみます。


前回 と同じ箇所です。
capcolor3.png
thumbnail-title というクラス名を style.min.css で探します。(Ctrl + F を押します。PCより)

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

こちらになります。(Google Chromeで Ctrl + F で検索) 18個該当の12個めあたり
cappcolor1.png

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

赤い線を引いた background-color:rgba(255,255,255,.75) この部分が背景色を指定しています。
background-color:rgba(255,255,255,.75) RGBは聞いたことが有ると思いますが、今回はRGBAとなっているので、透明度が追加されています。一番右の .75(0.75) というのが透明度を表していて、0.1=10% なので、0.75=75% となります。255,255,255, は白を表していていますので、白の透明度 75% の状態になっています。 ご覧の通り下の画像が透けています。
cappcolor6.png
これを変更します。
今回も、custom.css に追記する方法ではなく、style.min.css を直接書き換える方法を取りますので、ソースのバックアップを必ず取ってから作業して下さい。

変更点のコード

変更前

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

変更後

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

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


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

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

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

同じく、style.min.css の18個該当の17個めあたり(下の方です)
cappcolor3.png

青い線がメディアクエリの箇所でその中にタイトルの文字サイズを指定する箇所がありますが、この箇所だけの文字色の指定がないので追記します。
★豆知識 : 先述した メディアクエリの指定部分です。@media (min-width:992px){ この中に書かれた内容が画面幅992px以上に適用されます } また、@media (min-width:1200px){ 1200px以上 } こちらも同様の意味です。この様な指定があることで、スマホやタブレット、PCで表示が変わります。タブレットを縦横に動かすと解りやすいです。

変更箇所

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

追記前

.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)
 

最後に・・・

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

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

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

にほんブログ村 デザインブログ 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