WordPress 4.7のCustom CSSは一時的な見た目の調整とthemeの設計変更を分けて使う
公開日： 執筆：佐藤
WordPress 4.7のCustom CSSは、文字の余白や色のような見た目の調整をpreviewで確かめるために使います。pageの構造、問い合わせへの導線、スマホでのmenuの動きまで変える作業を、一つのCSS欄へ重ねる場所ではありません。最初に直す対象と、直したあとに確認するpageを決めます。
Custom CSSを使うと、CustomizerでCSSを追加し、公開前のpreviewで見え方を確認できます。themeのfileを直接開かずに小さな調整を試せることは便利です。ただし、previewで一か所が整って見えても、別のpage、画面幅、menuを開いた状態まで正しいとは限りません。CSSを書く作業と、siteが利用者へ必要な案内を渡せるかの確認を分けます。
調整で済むこととthemeを直すことを分ける
Custom CSSへ書く前に、変えたいことを一文にします。「記事本文の行間を読みやすくする」「footerのlinkを背景から読める色にする」のように、対象と見た目が決まっている調整なら確認しやすくなります。一方で「問い合わせを増やすためにheaderを直す」のように、構造や導線まで関わる仕事は、CSSだけで終えるかを別に考えます。
| 変更したいこと | 先に確認する場所 | 判断の分け方 |
|---|---|---|
| 文字の色、余白、罫線 | 対象pageと小さい画面 | 読めるか、ほかの文字へ影響しないか |
| 特定のbuttonの見え方 | buttonがあるpageと操作後の状態 | 押せるか、linkや説明を覆わないか |
| headerやmenuの構成 | themeのtemplateと複数page | CSSだけで直すか、HTMLや設定を直すか |
| 問い合わせformの項目や送信処理 | formの設定と送信経路 | 見た目でなく入力と受信を直す必要があるか |
たとえば、問い合わせbuttonが背景に溶け込んで読みにくい場合を考えます。buttonの文字色、背景色、余白をCustom CSSで調整し、通常pageと小さい画面で読めるかを確認できます。しかし、buttonをどのpageへ置くか、どのformへ進めるか、送信後に誰が受けるかはCSSで決まりません。見え方を直す作業と、問い合わせの流れを決める作業を混ぜないことが必要です。
同じように、headerの高さを少し調整することと、headerからサービス案内を外すことは違います。前者は表示の調整ですが、後者は利用者が最初に受け取る情報を変えます。CSSを追加すれば画面上から要素を隠すことはできますが、隠した案内が必要な内容なら、別のpageやmenuへどう渡すかを決めなければなりません。見えなくしたことを、siteの構成を直したことと取り違えません。
previewは対象pageと状態を替えて確認する
Custom CSSのpreviewは、変更を保存する前に確認できる場所です。確認するときは、CSSを書いたpageだけを見て終えません。共通のclassや要素へ指定したruleは、記事、固定page、一覧pageなど、同じHTMLを使う場所へ影響することがあります。
説明用の仮例として、本文内のlinkの色を替える場合を考えます。記事pageでは読みやすく見えても、footerやsidebarにも同じclassが使われていれば、背景と重なって読めなくなるかもしれません。linkを通常の状態で見るだけでなく、pointerを重ねた状態、keyboardで移動した状態、背景色が違う場所を確認します。CSSの一行は短くても、影響するpageは一つとは限りません。
確認する順番は、次のように決めます。
- 変更するselectorが、どのpageと要素へ使われているかを確認する。
- previewで代表pageを開き、変更した要素と周囲の文字を読む。
- 小さい画面でmenu、本文、buttonが重ならないかを確認する。
- 保存後に公開pageを開き、previewと同じ表示になっているかを確認する。
- 変更したrule、理由、確認したURLを残す。
小さい画面では、desktopで横に並ぶ要素が縦に並びます。desktopのheaderで余白を減らすCSSが、小さい画面ではlogoやmenuを重ねることがあります。画像の幅を固定するCSSが、記事の本文を横へはみ出させることもあります。画面幅ごとに見え方を確認し、読めることと操作できることを別に確かめます。
ruleを重ねて原因を失わない
Custom CSSは、すぐに試せるため、以前のruleへさらに別のruleを重ねやすい場所です。文字色を替えたあとに別の色を追加し、余白を直したあとに打ち消す指定を重ねると、どのruleが必要か分からなくなります。変更を加える前に、同じselectorへすでに何を書いたかを読みます。
ruleを直すときは、古い指定を残したまま新しい指定を足すより、今回の目的に必要な形へ整理します。ただし、意味が分からないruleを一度に消しません。どのpageで使われているかを確認し、代表pageで表示を確かめながら変更します。CSSの行数を減らすことが目的ではなく、次に直す人が影響を読める状態にすることが目的です。
themeを更新したあとにも同じ見え方を保ちたい調整と、themeそのものの構造を替えたい変更は、同じ記録にしません。Custom CSSへ追加した内容、themeのfileを直した内容、pluginが出すHTMLへ合わせた内容を分けて残します。更新後に表示が変わったとき、どこを確認すればよいかが分かるためです。themeを変える予定があるなら、Custom CSSで整えた見た目を新しいthemeでもそのまま使えると決めつけず、必要なpageを開いて確認します。
外部の制作者へ調整を頼む場合は、「見た目をよくする」とだけ依頼しません。直したい要素、読めるようにしたい情報、確認するURL、変更してよい範囲を渡します。制作者がCSSを書けても、料金、受付時間、サービスの条件を決める人とは限りません。見た目の作業を委託しても、siteで何を伝えるかの責任まで渡すわけではありません。
最初の一手は、直したい見た目を一つ選び、対象pageと小さい画面で確認することです。Custom CSSを保存する前に、画像だけでもheaderだけでもない状態で、利用者が本文と次のlinkを読めるかを確かめます。
関連記事
