賢威7.0

賢威7:クール版の記事一覧やメインコンテンツの背景色を変更する方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、WordPressテーマ:賢威7クール版の記事一覧や、メインコンテンツの背景色を変更する方法を紹介したいと思います。

背景色を変更するカスタマイズというと、CSSの background プロパティを変更するだけなので、一見簡単そうに見えるかもしれません。

でもクール版の場合は余白も一緒に設定しないと、背景色の境目に文字がぴったりくっついてしまうので、少し注意が必要です。

カスタマイズ前

↓ 記事一覧は背景全体が薄いグレー

keni-cool-main-contents-background-color-before

カスタマイズ後

カスタマイズ 1

↓ トップページやアーカイブページの記事一覧に白い背景色を追加

keni-cool-main-contents-background-color

↓ 個別記事(投稿)や固定ページの背景も白に

keni-cool-main-contents-background-color-after-2
カスタマイズ 2

↓ サイト全体の背景色を白にして、記事一覧の背景色をサイドバーと同じグレーに変更

keni-cool-main-contents-background-color-after-3

↓ 個別記事や固定ページも同じように変更

keni-cool-main-contents-background-color-after-4

[ad]

カスタマイズ 1. CSSファイルを編集

今回は見た目のみのカスタマイズなので、CSSファイルのみを編集していきます。

親テーマ(賢威7本体)の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加すると、、、

.main-conts .section-wrap {
    padding: 40px;
    background: #fff;
    background: #fff;
}

トップページやアーカイブページの記事一覧や、個別記事(投稿)や固定ページのメインコンテンツ部分に白い背景色が追加されました。

↓ トップページの記事一覧(アーカイブや検索結果一覧も同じ)

keni-cool-main-contents-background-color

↓ 個別記事(固定ページなどの投稿タイプも同じ)

keni-cool-main-contents-background-color-after-2

ちなみに先ほどのコードには padding も設定しましたが、もし padding を設定しない場合は、下のように余白がなくなり、とても見づらい状態になってしまいます。

keni-cool-main-contents-background-color-bad

2. お好みの背景色にするには(カスタマイズ 2)

先ほどは記事一覧やメインコンテンツの背景色を白にしましたが、もちろんそれ以外の色に変更することもできます。

例えば、背景色をクール版で使われているサイドバーと同じグレーにする場合は、追加するCSSコードは下のようになります。
(一緒にサイト全体の背景色を白にしました)

body {
    background: none;
}
.section-wrap {
    padding: 40px;
    background: #fafafa;
}

サイト全体の背景を白にすると更にクリーンな印象になりますね。

↓ トップページ/アーカイブページの記事一覧

keni-cool-main-contents-background-color-after-3

↓ 個別記事/固定ページ

keni-cool-main-contents-background-color-after-4

background: の後が色コード(#から続く6桁の英数字)なので、この部分を変更すればお好みの色に変更することができます。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。