こんにちは、しろまる（@akitashiromaru）です。
私のブログテーマはAFFINGER4という有料のテーマを使用していますが、今回は有料・無料どちらのテーマであっても、カスタマイズをする前に準備しておいたほうがいいことを書いてみます。
最初に見よう見まねでいじってしまうと、後で修正をしたいと思ったときに、過去の自分に泣かされるからです 涙
このルールを見て、ぜひ皆さんも編集がちょっとだけ楽しくなっていただけたら幸いです＾＾
その1：AFFINGER4親テーマCSSと比較して見れるようにする
子テーマというのは、親テーマを編集することなく自分なりのカスタマイズを行うためのものです。
AFFINGER4の子テーマ（ここでは、AFFINGER4-childのこと）を最初有効化したときは、編集するstyle.cssには以下のことしか書かれていません。
- AFFINGER4の子テーマであることの記述
- CSS記述の例文
- タブレットサイズ（960px以下）の指定
- タブレットサイズ（600px以上）の指定
- PCサイズ（960px以上）の指定
（いずれもコメントアウトで書かれています）
ここでオススメする自分ルールは、親テーマの記述ブロックと同じ順序で記述していくことです。
編集したいところだけ好き勝手に記述していくのもいいですが、後々「このCSSはなぜこういう表示に・・・？」と、自分で作ったCSSを自分で修正できなくなってしまいます。（そもそもCSSファイルが長くなってしまいますから 汗）
簡単にAFFINGER4の親テーマのstyle.cssを確認してみたところ、以下のような記述となっていました。
- 全体的なCSS記述
Googleフォントの反映箇所／各フォント設定／人気記事の指定／アイキャッチがない場合の指定／アイキャッチがある場合の指定／フリーウィジェットボックスの指定／フッターの指定／フッターウィジェットボックスの指定／トップページウィジェットボックスの指定／トップページ・アーカイブ一覧表示／PC閲覧時の記事上の一括表示部分／記事下の一括表示部分／関連記事表示部分／サイドバー／サイドバー固定ページ用のナビ／ウィジェット問い合わせボタン／ウィジェットオリジナルボタン／エディタ用／吹き出しプラグインのボーダー幅変更の場合の指定（コメントアウト）／アコーディオンメニュー／ミドルメニュー／スマホフッターメニュー／検索フォーム／ページャー／ぱんくず／SNS／カレンダー／PAGE TOP／コメント／PREV NEXT／NEWS（お知らせ）／スライドショー／レイアウトスマートフォン／カラム1適用／LP／白紙ノート／IEのみ／の、指定についての記述
- 959px以下で適応したいCSS（スマホ・タブレット）の指定
- 600px～959pxで適応したいCSS（タブレットのみ）の指定
- 600px以上で適応したいCSS（タブレット・PCのみ）の指定
- 960px以上で適応したいCSS（PCのみ）の指定
- 600px以下で適応したいCSS（スマホのみ）の指定
自分で子テーマのstyle.cssにあちこち記述し、わからなくなってしまうことのないように例えば親テーマなら全体の設定で「ぱんくずの指定→SNSの指定」と順を追って記述されているので、子テーマでその部分を変えたいときは同じように
/* ぱんくずの設定 */
コードをここに
/* SNSの指定 */
コードをここに
のようにstyle.css に記述していくと良いと思います。
その2：何のカスタマイズかわかるように説明を沿えておく
その1では、親テーマのstyle.cssの順番と同じように書くとわかりやすいですよ、ということを書きました。次に、「自分がどんなカスタマイズをしたのか」もコメントに残しておくのです。
もちろんCSSに慣れてきたらそんなことを書く必要もないかもしれません。しかし、説明があると後で編集時に自分が楽です。
その1で例にしたように、ぱんくずの設定を変えるとしましょう。
/* ぱんくずの設定 ぱんくずの矢印を画像に変更 */
コードをここに
というように、どんな風にカスタマイズしたのか、ということを書いて、わかりやすくしましょう。
その3：CSS記述の順番も決めておくとベター
これは、最初は慣れないと難しいかもしれませんが、慣れてくると同じコードを2回書いてしまったりするミスを防ぐことにもつながります。
例えば、こういう記述があるとします。
*{
width: 100px;
margin-bottom: 20px;
padding-bottom: 20px;
background: url(xxxxxxxxx.jpg);
}
このあと、また別の指定で、こういう記述があるとします。
.xxx {
padding-bottom: 20px;
background: url(xxxx.gif);
width: 200px;
padding-bottom 10px;
}
・・・うーん。なんだか気持ち悪くありませんか。
記述に順番がないからわかりづらいし、「padding-bottom: 20px;」と「padding-bottom: 10px;」のように同じpaddingの指定を2回してしまっています。
こうなるくらいなら、width（幅）、margin（要素外の下の幅）、padding（要素内の下の余白）、、、のように指定の順番もそろえたほうがいいのではないかなと思います。
ちなみに、GoogleさんのCSS記述にもルールがある（クリック先の4.1.5のところを見たら･･･！）そうで、こちらはアルファベット順なんだそうです。個人的には、幅を指定するもの、フォントを指定するもの、などでまとめたほうがいいとは思うんですが・・・。
どちらにしろ、なるべく記述順も守って書いたほうが、後で楽ですよ＾＾
まとめ
いかがでしたでしょうか。CSS編集をするときにオススメするルールとして書いていきましたが、これ、実は集団で制作を行うときにも役立つルールでもあります。
集団でCSSをいじる場合はなおさら順番をどうするか、記述をどうするかまで決めておかないと、ゆくゆくはクライアントに迷惑をかけることになります。
今回はAFFINGER4の子テーマCSSの場合なので、後々自分が泣かなくてもいいようにと思ってオススメを書いてみました。参考になれば幸いです＾＾
