WordPressを使っていると、不定期でテーマの更新をしなくてはいけなくなります。
テーマの更新は、テーマで利用されているPHPやJavaScriptなどのプログラムの変更（バグの修正やセキュリティの強化等）が行われた時に、最新バージョンにアップデートする作業です。
WordPress自体がかなりの頻度で新しいバージョンに更新されるので、それに従ってテーマの更新も必要になる場合があります。
テーマの更新を怠ってしまうと、セキュリティ面で不安を抱えたり、レイアウトが崩れたり、とにかく色んな問題が出てくる可能性があるんですね。
もちろん、WEB制作会社としては、テーマの更新を疎かにして何かトラブルが起こったことはありません。むしろ、バグに気付いて開発者に連絡をとり、新しいバージョンのテーマをリリースしてもらったことは3回ほどあります。
さてさて、テーマの更新で面倒なのが、「外観」→「テーマ編集（テーマエディター）」もしくは、直接FTPに入って記述を変更した部分を同じように更新しないといけないという点です。
今回は、CSSの変更点であればカスタムCSSを使うのが便利ですよって記事です。WordPress入門編のようなタイトルになりますが、プログラムをガリガリ書く人ほどテーマを直接変更している事も多いと思いますので、よろしければご参考にしてください。
「!important」宣言をして最優先のCSSにする
ご存知の通り、CSSの記述は上から順番に上書きされて適用されます。
スタイルシートに記述されている同じidやclassに異なる記述がされている場合、ファイルの下の方の記述が優先されるんですね。
しかし、「!important」宣言をすれば最優先されるので、WordPressのCSSを変更する際、スタイルシートに直接!importantを加えることによって同じidやclassが記述されていても「!important」宣言をしている方の記述が適用されているはずです。
例えば、
.post-content h3 {
font-size: 20px !important;
}
このように記事内のh3タグ（見出し3）のフォントサイズを20pxに「!important」宣言をして記述したとします。
もともとのh3のフォントサイズは24pxですが、最優先の指定をしているので、同じスタイルシートに同じ部分の違う指定があったとしても20pxが優先されますので、20pxで表示されます。
この記事を読んでいる方も良く使うと思うのですが、important宣言はあまり使わない方が良いと言われています。
理由は、スタイルの自然のカスケードを破壊するためデバッグが難しくなるためです。
それに!importantばかりのCSSって、何か汚いソースコードにみえますよね。
直接書き込むのではなくカスタムCSSに書き込もう！
テーマ編集（テーマエディター）やFTPからファイルに直接書き込むと、テーマの更新を行った際に書き込んだソースがなくなってしまいます。
しかし、WordPressのダッシュボードから追加CSSに書き込むことによって、テーマの更新をしても記述したソースは引き継がれます。
私も何年か前まではこれを知らずに直接CSSを書き換えたり書き加えたりしていましたが、これをすることによってメンテナンスが凄く楽になりました。
入門編になりますが、カスタムCSSに書き込む方法を一応ご案内します。
ダッシュボードを開いて「外観」→「カスタマイズ」をクリックします。
左側の追加CSSをクリックします。
あとは、追加CSSの下の空欄に記述したいCSSを書き込むだけ。
このサイトは、ヘッダー部分の背景色が決まってましたので、私は黒（カラーコード#000000）に変更しました。
他にもフロントページのh3タグの文字フォントを小さくしたかったので、36px→20pxに変更しています。
どちらも!importantを利用していますが、宣言しなくても反映されていました。ソースが汚くなっても念のためにつけています。
一部の無料テーマでは、有償バージョンにアップグレードすると、簡単に文字の大きさを変えたり背景などのカラーを変えたり、レイアウトを自由に変更出来たりするようになりますが、CSSさえある程度わかれば、無料テーマでも充分に素晴らしいWEBサイトに仕上がります。
PHPも変更する場合はテーマ更新すると当然、直接ファイルを書き戻さなきゃいけないものの、CSSだけであればカスタムCSSに書き加えるだけでOK。
ちなみに、テーマによっては固定ページにもカスタムCSSを書けるものも多くなりました。
そのページだけ反映されるCSSを記述することができて、これも大変便利です。
＊そのページだけといっても、ヘッダーやウィジェット、フッターまで反映されますので、ヘッダーなどに使われているidやclassにもスタイルが指定されるのでご注意を。
また、CSSを変更する際は、変更前に（chromeやOperaであれば）変更したい箇所を右クリックして「検証」すれば簡単に現在のCSSを確認できます。
さらに、変更したい内容を検証の部分で書き換えると、書き換えた内容が表示されますので、そのままCSSをコピーしてカスタムCSSなどに!imporatnt宣言をして記述すれば簡単にCSSを書き換えられます。
WordPressはどんどん便利になってきますが、やはり基礎的なHTMLやCSSは知っておかないといけませんね。
PHPもある程度理解すれば、テーマをガラリと独自性のあるWEBサイトに変えることもできるので、WordPressがもっと楽しくなるかもしれません。