cocoonを使ているのでタイトルにテーマ名を付けましたが、WordPress全般の話です。
今回は背景色についてです。
#mainを基準に背景色を設定する
対象の場所は #main です。メインコンテンツを含むその上下の場所になります。
ですが、背景色を変えたいのは、トップページやカテゴリーページ等のいわゆる記事一覧ページであり、記事が書かれているページではありません。
広い範囲となりますが、一旦 #main の範囲全域を対象とします。
プロパティ：backgroundの書き方
背景色を設定している人はよく見るプロパティ background だと思いますが、背景色を設定するならこのようになります。
background-color: #ffffff;よく見る書き方だと思いますが、.background では下記のような書き方が出来ます。
background: #ffffff url("×××△△△.png") no-repeat center;| プロパティ名 | 役割 | 指定できる内容 |
|---|---|---|
background-color | 単品指定 | 色だけを指定する（例：#0abf82） |
background | 一括指定 | 色、画像、繰り返し、位置などをまとめて指定できる |
では、background: #ffffff ; のようなcolorを付けないbackgroundと色のコードの書き方は間違いなのか？と疑問に思う人もいるかと思いますが、間違いではありませんし、そのまま使って問題ありません。
ページごとの背景色を設定する為にやってはいけないこと
まず背景色を変えたい所は #main の部分です。#main だけを指定して背景色を変えると全てのページで #main の背景色が変わってしまいます。そこで場所をハッキリと指定する事が重要です。
下の例は悪い訳ではありませんが、ページ指定をするCSSではありません。#main を含むページ全てに対応してしまいます。
#main {
background-color: #ffffff;
}プレビューを見ながらですと、上記のCSSで背景色は変わります。ですが「設定が出来た」と勘違いして保存してしまう事もあるかもしれませんね。目的はページ指定の設定です。
セレクタを知り、本当にシンプルなページ指定のCSSを作る
- トップページなら：
.home - 投稿記事なら：
.single - 記事一覧なら：
.archive - 固定ページなら：
.page - 検索ページなら：.search
指定はこれらになります。至ってシンプルな使い方ができます。そして今回のページ指定で重要なのが、.archiveです。
.archiveとカンマ（,）の役割
記事一覧ページを指定して #main の背景色を変えたい訳ですが、その記事一覧ページとはトップページを含む記事が一覧で表示されるページです。カテゴリーページやタグページ、月別ページ等です。
.home #main 一つではトップページのみになってしまいます。
トップページと記事一覧ページの #main を指定する書き方はこの様になります。
正しい例：
.home #main, .archive #main {
ここでカンマが入ってきますが、このカンマは「両方に適応してください」の意味となります。ダメな例というか、違った意味の例も出します。
違う意味の例：
.home #main .archive #main{
CSSで大変よく見る半角スペース繋がりです。
この意味はトップページ（.home）の中にある #main のさらに中にある .archive のさらに中にある #main を探します。
CSS：ページ指定と#mainの背景色
/* 記事一覧背景色 */
.home #main, .archive #main {
background-color: #f2f2f2;
}トップページと記事一覧ページを指定して #main に背景色を付けるならこのようになります。
背景色を使った枠組み
#main の背景色を変えたかった理由としては、記事一覧ページの投稿記事が表示される部分との区別をハッキリとさせたかっただけなのですが、セレクタを知っておくと簡単です。
エントリーカードの背景色
エントリーカードとは何を指しているか。それはサムネイル（アイキャッチ画像）、記事タイトル、投稿日（更新日）、抜粋文（スニペット）の部分です。
cocoonでは .entry-card-wrap になります。
#main だけの背景色の設定だと、エントリーカード（.entry-card-wrap）の背景色も変わってしまします。
#main と .entry-card-wrap が同色になってしまって、白以外は特に見づらいのでエントリーカードの背景色も設定します。これらに背景色を付けてあげると枠で囲っている感じに見えます。
CSS：エントリーカードの背景色
.entry-card-wrap のCSSになります。ホームを含む記事一覧ページのエントリーカード部分の背景色がこれで設定できます。
/* 記事一覧背景色 */
.home .entry-card-wrap,
.archive .entry-card-wrap {
background-color: #fefefe;
} #main と .entry-card-wrap を色分けする事によって見分けやすくします。
特に濃い色を使わなくも良いです。薄くても、僅かな違いが見やすさに繋がります。それとマウスオーバー（ホバー）を付けたいなら以下の様になります。
/* 記事一覧：ホバー時の背景色 */
.home .entry-card-wrap:hover,
.archive .entry-card-wrap:hover {
background-color: #e5e9f1;
}トップページとアーカイブページの２つに指示を出すので :hover は２つ付けます。
GAPという罠をご存じだろうか
見た目を整える為に padding や margin の調整をすると思います。これを使い始めた時は堪らなく面白かった事を覚えています。padding-top を使えば上だけの指定になり、margin: 5px 10px; を使えば上下と左右の別々で指定出来るという好きな人には恰好の玩具です。
ですが、その玩具とは別次元にいる奴がいます。下の画像を見てください。
少し太い紫の領域が見えると思います。この紫の領域はいくら padding や margin を弄っても変わりません。1つのコンテンツの上下左右の余白を均等に整えようとしても、この紫の領域は駄目なのです。そんな時、ちゃんとデベロッパーツール（開発者ツール）を使ってCSSを見てください。GAPが潜んでます。
GAPの役割
簡単に説明すると、GAPとは仕切り板の様な存在です。文字で表すとこんな感じになります。
①｜②｜③｜④｜⑤
この中間に入ってる縦線がGAPです。要素と要素の間だけに自動的に一律の隙間（仕切り）を作るので、非常に便利なプロパティと言えます。
ですが、少しCSSをかじり始めた人には馴染みなんてゼロの厄介者でしかありません。
このGAPの値をここではゼロにします。するともちろんGAPの値がゼロなのですから、記事と記事の間に出来た余白は消えます。
- GAPの値にnoneは使えません。
- GAPの値にunsetは使えますが、unsetとは設定をリセットして親要素から引き継ぐか初期値に戻すという命令です。もし親要素に別のGAPがいたら、その設定を引き継いでしまいます。
- GAPの値は数値を入れてください。
GAPが残した罠
GAPの値をゼロにしたのですから、GAPがいた場所の修正をしなくてはなりません。
記事と記事の間の余白設定をしないといけないのです。
/* #1. 外枠を5pxに固定 */
.home main#main,
.archive main#main {
padding: 5px;
}
/* #2. gapのみ */
.home main#main #list.list.ect-entry-card,
.archive main#main #list.list.ect-entry-card {
gap: 0;
}
/* #3. 2番目の記事以降のカードの上にだけ5pxの隙間を作る */
.home .entry-card-wrap:nth-child(n+2),
.archive .entry-card-wrap:nth-child(n+2) {
margin-top: 5px;
}上記は例としてのCSSになりますが、注目する点は#3の2番目の記事以降のカードの上にだけ5pxの隙間を作るとなります。
- #1はpaddingで外枠の調整です。
- #2ではgapを0にして画像にあった紫の領域を消しています。
- #3ではmarginのtopへ5pxの指示を出します。この方向指示を出さなければ、１つ目の記事から、下の部分に上下の数値が重なります。すると10pxの余白が出来てしまうからです。
そこで順番を指定する:nth-child(n+2)を使ってます。これは2番目以降全てに指示を出してくれます。注意点はセレクタを2つ使っているので、:nth-child(n+2) も2つ使います。ここでやりたかった事が一段落しました。
画像はこれまでの結果です。一件よく見るデザインですが、記事と記事の間のGAPを取り除いた状態のものになります。
GAPをそのままにしていると、一つ前の画像のあの紫の隙間が何をどうしても居座り続けます。
WordPressで使えるセレクタを最後にもう一度
今回はページ指定に便利なセレクタが活躍しました。ＷＰ限定のものになりますが、
- トップページなら：
.home - 投稿記事なら：
.single - 記事一覧なら：
.archive - 固定ページなら：
.page - 検索ページなら：.search
- GAPの存在
便利な存在と、厄介な存在を確認した所で、終わりとなります。
コメント