WordPressカスタマイズ・基礎知識TwitterFacebookB!HatenaLINELINECopy初めてCSSカスタマイズを覚えると、まずデベロッパーツールでデフォルトのCSSを確認してそれをコピペするか、どこかで拾ってきたコードをコピペしてカスタマイズしていくような形になることが多くなりますよね。そのやり方をしばらく続けていると問題が!CSSカスタマイズの画面がとんでもなく長い......。いつ書いたかもわからないコードが思わぬところで適用されて混乱CSSが効かない原因にもなってしまう。そんなことにならないための整理整頓術を紹介します。これでCSSの管理が簡単に!HTMLを書くときは、他のページや要素でも使えるCSSの基本パターンを想定しながら書くHTMLを書くときに合わせてCSSを指定するためのclass名やid名を付与していくと思います。使いまわせそうなデザインかどうかを考えてから付けましょう。全幅で背景がピンク色のdiv要素を作るときに、このページはお問合せに関するページだから、div.contact-wrapでいいか。全幅にするCSSは他でも使えそうだな。背景がピンク色のdivもありそうだ。いうわけでdiv.wide-wrap.pink-areaというように2つのクラスを付与し、全幅に関係するCSSは.wide-wrapに対して指定しピンク色の背景のときに適用させたいデザインは.pink-areaに指定するというように使い分けましょう。一つのサイト内で使う種類はそんなに多くならない方が良いでしょう。おススメするボタンの種類ボタンは特に様々なところで出てくる要素。いちいち別のかっこいいデザインを適用するよりも、サイト内でそろえた方が全体が引き締まります。サイトの基本カラーのパターン数種類(アクセントカラーの目立つボタン、基本カラーの落ち着いたボタン、薄い色のボタンの3種類くらい)大きさ数種類(全幅のボタン、インライン(ボタン文字の長さくらいの大きさ)のボタン、それぞれの余白が大きいものと小さいものの3種類くらい)影がついた立体的なボタンや、特別なデザインのボタンを作りたければ、ボタンデザイン数種類(背景に直接貼るボタンと本文内のボタンで分けるなど)上記の例を参考に全部で10個以内のクラス名にあてたデザインを用意して、組み合わせて使うと良いです。数種類の基本のデザインを作っておけば、管理がしやすくなります。h1{}すべてに適用される基本デザインはなるべくシンプルにする。h1{}投稿記事内の見出しは最初に決めておく。基本のデザインにボーダーやら疑似要素やらがついていると、他のデザインにするときにいちいち取り消さなければならなくなるので、基本のなるべくシンプルなデザインを作っておきます。それから、場面ごとに数種類の見出しデザインを作り、使いまわしましょう。デザインだけでなく横幅や内側の余白paddingで分けるのも大切です。見出しデザインは単純なサイトならh1~h4毎に基本のデザイン+4種類のクラス名くらいで十分にどんなページにも対応できるでしょう。見出しとボタン以外にもあちこちに出てくるHTML要素にCSSを適用させるときには思わぬところでデザインが適用されてしまったり、同じようなCSSが増えていかないように数種類に抑えておくべきものがあります。リスト要素ul・li定義リストdt・ddボックス要素divテーブル要素th・td文字の装飾p・spanCSSは最小限に!クラス名を組み合わせて様々なデザインを作る方法これらをどうやって管理するかというと、クラス名を使いこなすことで数種類のCSSだけで管理することができます。h2が適用されるので、あとはデザインの種類を指定)Gudenbergのブロックを使うときや、その他のプラグインでHTMLを出力するときでも、大抵は高度な設定で追加CSSを指定することができます。そこに自分が作ったデザインを適用させるためのCSSクラスを指定すれば、大体どんな場面でも自分のCSSを適用させることができます。適用させたい範囲を考えながら、細かくクラスを使ってCSSを作る初心者にありがちなのが、デベロッパーツールで見たところdtに対してCSSが適用されていたからそのままdtをカスタマイズしてしまうというミス。自分が調べていた要素だけ変えたかったのに、なぜかサイト内の他の所のデザインが崩れてしまった!!なんてことに。投稿のタグを表示している部分にだけ適用させたいなら、その部分の親divのクラス名もセレクタに含めましょう。CSSファイルを分けて作成し、条件毎に読み込みして出力する特定のページにしか適用させないようなCSSは、初めから固定ページ毎のCSSとして書いた方が他のページで読み込まれないのでページ速度を改善できます。Unitを使っている場合は、投稿や固定ページの編集画面でカスタムCSSを入力できるので、そこで入力しましょう。ページ毎だけでなく様々な条件毎にCSSファイルを読み込みすることもできます。投稿タイプ毎、複数のページ毎、ログインしているときのみなど、別のCSSを適用させるにはCSSファイルを作って、functions.phpで条件分岐して読み込ませます。一か所に膨大なコードが書き込まれているよりもCSSの管理もしやすくなります。オリジナルのCSSファイルの作り方CSSファイルには特別な作り方はありません。テキストエディタでカスタムCSSに書き込むときと同じようにそのままCSSを書き込み、whatever-name.cssと自分で好きな名前と.cssでファイル名を付けます。読み込ませるときは子テーマにアップしますが、子テーマがスッキリするようcssというフォルダーを作っておいて、その中にアップすると良いでしょう。★2は子テーマ内のファイルを置いた場所のスラッグ★3はバージョン情報(作成した日時など)CSSが多くなり過ぎたときには、検索で探すのが一番効率が良いCSSが多くなり過ぎると、どこで何を書いたのかもわからなくなってしまいます。知っている方が多いとは思いますが、WordPressの外観のカスタマイズでも、一般的なCtrl+Fで検索窓を出すショートカットが使えます。CSSカスタマイズの画面ではすぐ検索窓を出して、自分が編集したいコードを探しましょう。これでCSSの管理が簡単に!最初は大して気にしていないCSSの整理整頓ですが、遅くなればなるほど後から管理しようとしても難しくなっていきます。始めに気を付けるべきポイントを頭に入れて、スマートにCSSを書きましょう。さやお役に立てたらぜひシェアをお願いします。