CSSを小さくするための書き方と不必要なCSSを増やさない＆読み込まないための整理の仕方－CSSカスタマイズを管理－

2019年9月13日2019年12月20日WordPressカスタマイズ・基礎知識

初めてCSSカスタマイズを覚えると、まずデベロッパーツールでデフォルトのCSSを確認してそれをコピペするか、どこかで拾ってきたコードをコピペしてカスタマイズしていくような形になることが多くなりますよね。

そのやり方をしばらく続けていると問題が！

CSSカスタマイズの画面がとんでもなく長い……。

いつ書いたかもわからないコードが思わぬところで適用されて混乱

CSSが効かない原因にもなってしまう。

そんなことにならないための整理整頓術を紹介します。

INDEX

1. HTMLを書くときは、他のページや要素でも使えるCSSの基本パターンを想定しながら書く
2. サイトで多用されるHTML要素には基本のデザインを決めて使いまわす
3. CSSは最小限に！クラス名を組み合わせて様々なデザインを作る方法
4. 適用させたい範囲を考えながら、細かくクラスを使ってCSSを作る
5. CSSファイルを分けて作成し、条件毎に読み込みして出力する
6. CSSが多くなり過ぎたときには、検索で探すのが一番効率が良い
7. これでCSSの管理が簡単に！

HTMLを書くときは、他のページや要素でも使えるCSSの基本パターンを想定しながら書く

HTMLを書くときに合わせてCSSを指定するためのclass名やid名を付与していくと思います。

その場でよく考えずに名前を付けるのではなく、
使いまわせそうなデザインかどうかを考えてから付けましょう。

例えば全幅で背景がピンク色のdiv要素を作るときに、

このページはお問合せに関するページだから、div.contact-wrapでいいか。

と決めるのではなく、

全幅にするCSSは他でも使えそうだな。背景がピンク色のdivもありそうだ。というわけで

div.wide-wrap.pink-areaというように２つのクラスを付与し、全幅に関係するCSSは.wide-wrapに対して指定しピンク色の背景のときに適用させたいデザインは.pink-areaに指定するというように使い分けましょう。

サイトで多用されるHTML要素には基本のデザインを決めて使いまわす

見出しやボタン、ボックスのデザインは、様々なところで変えたくなるものですが、

一つのサイト内で使う種類はそんなに多くならない方が良いでしょう。

おススメするボタンの種類

ボタンは特に様々なところで出てくる要素。

いちいち別のかっこいいデザインを適用するよりも、サイト内でそろえた方が全体が引き締まります。

サイトの基本カラーのパターン数種類(アクセントカラーの目立つボタン、基本カラーの落ち着いたボタン、薄い色のボタンの３種類くらい)
大きさ数種類(全幅のボタン、インライン(ボタン文字の長さくらいの大きさ)のボタン、それぞれの余白が大きいものと小さいものの３種類くらい)
影がついた立体的なボタンや、特別なデザインのボタンを作りたければ、ボタンデザイン数種類(背景に直接貼るボタンと本文内のボタンで分けるなど)

上記の例を参考に全部で10個以内のクラス名にあてたデザインを用意して、組み合わせて使うと良いです。

h1～h6のデザインの使い分け

固定ページで様々なページを作るときには特に増えてしまいやすい見出しのデザインですが、

数種類の基本のデザインを作っておけば、管理がしやすくなります。

h1｛｝すべてに適用される基本デザインはなるべくシンプルにする。
.post h1｛｝投稿記事内の見出しは最初に決めておく。
.col-md-12 h1｛｝全幅ページ用のデザイン
h1.around-design｛｝背景色やボーダーで囲まれている見出し
h1.line-design｛｝行で表示する見出し
特別目立たせたいデザインや、ボックスの中の見出し用など必要な種類

基本のデザインにボーダーやら疑似要素やらがついていると、他のデザインにするときにいちいち取り消さなければならなくなるので、基本のなるべくシンプルなデザインを作っておきます。

それから、場面ごとに数種類の見出しデザインを作り、使いまわしましょう。

デザインだけでなく横幅や内側の余白paddingで分けるのも大切です。

見出しデザインは単純なサイトならｈ１～ｈ４毎に基本のデザイン＋４種類のクラス名くらいで十分にどんなページにも対応できるでしょう。

その他のむやみにCSSを増やさない方が良いHTML要素

見出しとボタン以外にもあちこちに出てくるHTML要素にCSSを適用させるときには
思わぬところでデザインが適用されてしまったり、同じようなCSSが増えていかないように数種類に抑えておくべきものがあります。

リスト要素ul・li
定義リストdt・dd
ボックス要素div
テーブル要素th・td
文字の装飾p・span

CSSは最小限に！クラス名を組み合わせて様々なデザインを作る方法

これらをどうやって管理するかというと、クラス名を使いこなすことで数種類のCSSだけで管理することができます。

全幅でサイトカラーの影が付いたボタンを作る: btn.btn-wide(全幅にする).btn-primary(アクセントカラーのデザイン).btn-shadow(影を付ける)
全幅の固定ページでアイコン付きのh2を使う: h2.with-icon（指定しておいた全幅ページ内のh2デザイン.col-md-12 h2が適用されるので、あとはデザインの種類を指定）

Gudenbergのブロックを使うときや、その他のプラグインでHTMLを出力するときでも、大抵は高度な設定で追加CSSを指定することができます。

そこに自分が作ったデザインを適用させるためのCSSクラスを指定すれば、大体どんな場面でも自分のCSSを適用させることができます。

適用させたい範囲を考えながら、細かくクラスを使ってCSSを作る

初心者にありがちなのが、デベロッパーツールで見たところdtに対してCSSが適用されていたからそのままdtをカスタマイズしてしまうというミス。

自分が調べていた要素だけ変えたかったのに、なぜかサイト内の他の所のデザインが崩れてしまった！！なんてことに。

自分がそのとき書くデザインはサイト内のすべてのdtに適用されて良いものでしょうか？

どの範囲で適用させたいかを考えて、
例えば投稿のタグを表示している部分にだけ適用させたいなら、その部分の親divのクラス名もセレクタに含めましょう。

CSSファイルを分けて作成し、条件毎に読み込みして出力する

特定のページにしか適用させないようなCSSは、初めから固定ページ毎のCSSとして書いた方が他のページで読み込まれないのでページ速度を改善できます。

WordPressのテーマLightningでVK All in One Expantion Unitを使っている場合は、投稿や固定ページの編集画面でカスタムCSSを入力できるので、そこで入力しましょう。

さらに、ページ毎だけでなく様々な条件毎にCSSファイルを読み込みすることもできます。

投稿タイプ毎、複数のページ毎、ログインしているときのみなど、別のCSSを適用させるにはCSSファイルを作って、functions.phpで条件分岐して読み込ませます。

特に沢山CSSを書き込むページがある場合や、ページ毎に全く異なるデザインを使っている場合はこれをやるだけでも少しはサイトが軽くなり、
一か所に膨大なコードが書き込まれているよりもCSSの管理もしやすくなります。

オリジナルのCSSファイルの作り方

CSSファイルには特別な作り方はありません。

テキストエディタでカスタムCSSに書き込むときと同じようにそのままCSSを書き込み、

whatever-name.css

と自分で好きな名前と.cssでファイル名を付けます。

読み込ませるときは子テーマにアップしますが、子テーマがスッキリするようcssというフォルダーを作っておいて、その中にアップすると良いでしょう。

functions.phpで条件分岐してCSSファイルを読み込ませる方法

functions.phpに以下のように書く

// ページ毎にCSSを読み込む
function add_styles() {
if( is_home() || is_front_page() ){ //トップページ、フロントページでのみ読み込む
wp_enqueue_style( 'front-page-style', get_stylesheet_directory_uri() . '/css/front-page-style.css', '', '20191814');
}
if(is_page(array(1605,1607))){ //ページIDが1605のページと1607のページでだけ読み込む
wp_enqueue_style( 'login-page', get_stylesheet_directory_uri() . '/css/login-page.css', '', '20190815' );
}
if( get_post_type() === 'cases'){ //カスタム投稿タイプcasesのアーカイブや投稿ページでのみ読み込む
wp_enqueue_style( 'cases-design★１', get_stylesheet_directory_uri() . '/css/cases-design.css★２', '', '20190815★３' );
}
}
add_action('wp_print_styles', 'add_styles');