タイトルにつけておいて冒頭から否定しますが、cocoonに限った話では無いです。WordPress全般で使えます。ですので、名称を連呼してクドイですが、CSSの対象はWordPressになります。
さて、ここではcocoonを使っているのでその名前を出しましたが、珍しく背景色の設定をしようと思いました。
#mainを基準に背景色を設定する
少しややこしい話ですが、対象の場所は#mainです。メインコンテンツを含むその上下の場所です。ですが、背景色を変えたいのは、トップページやカテゴリーページ等のいわゆる記事一覧ページであって、記事が書かれているページではありません。
この記事一覧ページと言うことが大事です。記事が書かれているページを今の設定から変えたらダメなのです。
統一ではなく個別指定
cocoonの標準設定では個別にこと細かく背景色の設定は出来ません。ですのでCSSで指定してあげないといけないのですが、そこでテーマの「cocoon」と「背景色」で検索をしてユーザー達はどのように背景を弄っているのか調べたのですが、多くはそのままbobyの変更でした。
body がカバーする範囲
- ヘッダー（ロゴやキャッチフレーズ）
- メインコンテンツ（記事本文）
- サイドバー（新着記事や検索窓）
- フッター（コピーライトなど）
- 背景の余白（画面の両端など）
全体、もしくは全域と言って良いでしょう。ここで単純にbodyを指定して背景色を設定すると、全体の背景色が変わるのですが、力の強い箇所は変わりません。!importatで強制している場合やテーマの機能で設定している場合などです。
プロパティ：backgroundの書き方
自分でCSSを書き加えて背景色を設定している人はよく見るプロパティ：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
指定はこれらになります。至ってシンプルな使い方ができます。そして今回のページ指定で重要なのが、.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: #ffffff;
}トップページと記事一覧ページを指定して#mainに背景色を付けるならこのようになります。そして、ここで本当にやりたかった事の説明をします。
背景色を使った枠組みテクニック
#mainの背景色を変えました。しかし、この場合ですと状況によっては#main全ての背景色が変わってしまします。#mainを指定したので当たり前ですが、それから更にやりたかった事の説明をしていきます。#mainだけの背景色を変えたかった人はこれで何も問題はありません。
エントリーカードの背景色
エントリーカードとは何を指しているか。それはサムネイル（アイキャッチ画像）、記事タイトル、投稿日（更新日）、抜粋文（スニペット）の部分です。
cocoonでは.entry-card-wrapになります。#mainだけの背景色の設定だと、エントリーカード（.entry-card-wrap）の背景色も変わります。
調整できる個所が増える事で現状よりも使いやすさを追及できるようになります。今回は背景色をメインにしていますが、#mainと.entry-card-wrapの背景色の調整によってコンテンツの領域がハッキリと視認出来るようになります。そして、セレクタを特定する事で他の調整が可能になります。
線や枠でよく使われるborderを使わなくても見やすくなり、それによって操作性が上がる。つまりはユーザビリティが上がります。ただし、borderを使う事を間違いとは言っていません。
.entry-card-wrapの背景色を変えなくても囲ったように見えますが、調整する為のCSSを作っておけば、いつでも微調整が楽になります。そしてほんの少し読み進めた所の話になりますが、構成を知る切っ掛けに繋がります。
CSS：エントリーカードの背景色
CSS：ページ指定と#mainの背景色では#main部分の紹介をしました。次は.entry-card-wrapの部分になります。
/* 記事一覧背景色 */
.home .entry-card-wrap,
.archive .entry-card-wrap {
background-color: #ffffff;
}#mainと.entry-card-wrapを色分けする事によって記事も見分けやすくなります。特に濃い色を使わなくも良いです。薄くても、僅かな違いが見やすさに繋がります。それとマウスオーバー（ホバー）を付けたいなら以下の様になります。
/* 記事一覧：ホバー時の背景色 */
.home .entry-card-wrap:hover,
.archive .entry-card-wrap:hover {
background-color: #ffffff;
}トップページとアーカイブページの２つに指示を出すので: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つ使います。ここでやりたかった事が一段落しました。まとめに入ります。
誰が為のデザインか
勿論、使い手にとってWebサイトの使いやすさ、見やすさはとても大事です。しかし、管理してる人間のモチベーションにも大きく関わってくると思います。ここでうまくいかなければ、飽きに繋がりもします。短いおさらいになりますが、
- トップページなら：
.home - 投稿記事なら：
.single - 記事一覧なら：
.archive - 固定ページなら：
.page
- GAPという罠
これだけは覚えておいてください。
コメント