ページデザインの決め手にもなる『背景色(background-color)』に関して記載していきます。
プラグインは使用せずに、背景色(background-color)を簡単にカスタムしていきますので少しでも参考になれば幸いです。
KTA
カスタムする前には必ずデータのバックアップを取っておくようにしましょうね！
Before
After
こんな感じになります。
新人
全然違い分からんで・・・
Contents
カスタマイズ手順
KTA
背景色(background-color)は２つの手順で変えていきます
- Cocoonの機能を利用
- CSSを利用
Step1:Cocoonの機能を利用
KTA
ここまではCocoonの機能で簡単に変更ができます！
Step2:カスタマイズ用CSS(background-color{})の入力
私はホーム画面のメイン箇所とカテゴリページの２か所でのみbackground-colorを変えています。
さらに細かく設定したい方はセレクタ『どの部分のデザインを変えるのか』箇所を指定するとより細かく設定ができます。
今回は以下の通り入力してみましょう！
ホーム画面のメイン背景に対して
〇〇〇に指定カラーを入力
background-color:〇〇〇;
CSS
.home .main{/*ホーム画面メイン背景に対して*/
background-color:#e0e0e0;
}カテゴリー画面のメイン背景に対して【補足部分】
CSS
.category .main{/*カテゴリー画面メイン背景に対して*/
background-color:#e0e0e0;
}カスタマイズ用のコードを入力したらまずは『Cocoon Child: スタイルシート (style.css)』でファイルの更新ボタンで入力情報の保存をします。
Step3:カスタマイズの確認
KTA
Cocoonの設定とCSSが効いているか確認してみましょう
ブラウザ別スーパーリロード方法
KTA
ブラウザによってスーパーリロードとキャッシュクリアの方法が異なりますので簡単にまとめたので参考にしてみてください！
スーパーリロードとは?
ブラウザに残っているキャッシュをスルーして、最新ページの情報を読み込む方法です！
【Google Chrome】
【Microsoft Edge】
【Microsoft Edge】
- 『Ctrl』+『F5』
- 『Shift』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Ctrl』+『』
- 『Shift』+『』
【Safari】
- 『Shift』+『』
- 『Ctrl』+『R』
【FireFox】
- 『Ctrl』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Shift』+『』
ブラウザ別キャッシュクリアの方法
キャッシュクリアとは?
ブラウザに残っているキャッシュを削除して、Webサイトのサーバーから新しいデータを取り込む方法です
【Google Chrome】
- ブラウザ右上の設定メニュー（・が縦に３つ並んでいるボタン）をクリックして「設定」を選ぶ
- ページ下の方にある「詳細設定」をクリック
- 「プライバシーとセキュリティー」をクリックして、「閲覧履歴データの削除」をクリック
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」をクリックする
【Microsoft Edge】
- 画面右下の・が３つ並んだアイコンをクリック
- 「設定」をクリック
- 「プライバシー、検索、サービス」をクリック
- 「クリアするデータの選択」を押す
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「今すぐクリア」を押す
さいごに
KTA
Cocoon機能＋CSSだけで背景色(background-color)カスタムできるので非常に簡単ですが、ページの雰囲気をガラッと変えられる要素なのでぜひ参考にしていただけると嬉しいです。
注意
カスタムは自己責任でやりましょうね！
コメント