カスタムCSSとは、テーマのスタイルシートを直接、編集しなくても良い仕組みです。カスタムCSSは、プラグインにより、実装しますが、まずは、違いを確認していくのが分かりやすいと思います。記事が長いので、2回に分けて投稿します。

『Jetpack by WordPress.com』プラグインのカスタムCSSの例

WordPressの管理画面『プラグイン』をクリックすると、トップページに表示されるプラグインのなかに、『Jetpack by WordPress.com』があります。

1-1

『Jetpack by WordPress.com』は、とても多機能なプラグインです。
パフォーマンスやセキュリティに関わるツール、アクセス統計情報などアクセス関連のツール、ウィジェットの種類が増えるなど編集ツールの充実ほか、サイトを管理していくうえで便利なツールが何十個と搭載されています。
『WordPress.com』というサイトにアカウントを登録していないと利用できませんが、登録してインストールすれば、無料で使える機能もたくさんあります。そのため、すでに利用している方も多いと思います。

補足

WordPress.orgのアカウントと勘違いしてしまう方もおられるかもしれないので、補足しておきます。WordPressを配布しているのは『WordPress.org』であり、ブログ運営サイトのWordPress.comとは別物です。そのため、WordPressをインストールした時に作成したアカウントは、WordPress.comとは関係ないアカウントです。WordPress.comのアカウントは、WordPress.comで新規に作成する必要があります。

1-2
『Jetpack by WordPress.com』プラグインを導入すると、管理画面の『外観』に『CSS編集』というメニューが追加されています。

このメニューをクリックして表示されるスタイルシートと、その下のメニュー『テーマの編集』から読み出したスタイルシートは別のスタイルシートです。

1-3

上のひとつ目は『CSS編集』のスタイルシートです。

1-4

次に上の2つ目が親テーマのスタイルシートです。

1-5

最後は子テーマのスタイルシートです。

 

補足:親テーマと子テーマ

親テーマとは、必要な設定ファイルをすべて含んだオリジナルのテーマです。
もし、親テーマのスタイルシートを直接編集していたら、そのテーマのアップデート版を適用したときに、問題が起こります。これまで自分が設定変更してきた箇所も、新たな設定ファイルに上書きされてしまうのです。そのため、これまでは子テーマを作り、この問題を回避してきました。
子テーマについて、もう少し詳しいことが知りたい方は、以下の記事を参考にしていただくのが良いと思います。

『Twenty Fourteen』はじめてのテーマカスタマイズ(第1回)子テーマの作成

カスタムCSSは、子テーマを作らずとも、オリジナルのテーマのスタイルシートを編集することなしに、オリジナルのスタイルシートに設定変更を適用する仕組みです。
デフォルトでは、『CSSを追加(推奨)』という設定になっているため、ここでの設定内容は、オリジナルテーマのスイタイルシートに、カスタムCSSでの設定変更が追加、設定内容によっては上書きされる形で読み込まれます。

1-6
そのため、オリジナルテーマをアップデートしても、カスタムCSSで編集したスタイルシートには影響が出ません。

長くなりましたので、今回はここまで。
次回は、(といっても、連続投稿しますが)、もっと具体的な例をあげて、カスタムCSSと、テーマのスタイルシートの編集との違いを見ていきたいと思います。