追加CSSでWordPressテーマをカスタマイズする方法

CSSがわかる方であればWordPressのデフォルト機能「追加CSS」でテーマのカスタマイズが手軽にできます。こちらはほとんどのテーマで利用できる方法かと思います。
追加したCSSコードはデータベースに保存されるため、子テーマやオリジナルプラグインを使わずにテーマの更新に影響されないカスタムができるのがポイントです。「head」内にインラインでCSSコードが出力され、テーマの外部CSSファイルより優先的に反映されます。なので、テーマのCSSを上書きできます。

Contents

「追加CSS」の設定方法

見出しタグの微調整

WordPressの管理画面にログインし、「外観＞カスタマイズ」と移動します。
CSSの入力欄が表示されるので、そこにCSSコードを入力、「公開」をクリックで完了です。

入力欄には、CSSファイル内に書き込むようにそのままCSSコードを書いていきます。

CSSコード記入例

body {
font-size: 16px; /* 文字サイズ変更 */
background-color: #333; /* 背景色変更 */
color: #fff; /* 文字色変更 */
}

以上です。
各要素に適用されているCSSはブラウザの開発ツール利用が早いかと思います。

「追加CSS」の注意点

追加したCSSはテーマ依存

「追加CSS」で追加したコードはデータベースに保存されますが、追加時に有効だったテーマに紐付いているため、テーマを切り替えると反映されなくなるので注意です。
テーマ切替時に「追加CSS」の入力欄から消えてしまっても、テーマを戻せばまた表示されます。

追加したCSSの保存場所

データベースに保存されると言いましたが、詳しくは「wp_posts」テーブルに「custom_css」というカスタム投稿タイプのデータとして保存されています。
なので、テーマの更新に影響されない代わりにテーマ内のCSSファイルのようにFTPでダウンロードできないので、バックアップのとり方は工夫が必要です。

追加したCSSが反映されない場合

まず最初にブラウザのキャッシュ、キャッシュ系プラグインを使用している場合はプラグインのキャッシュをクリアしてみてください。

次に確認したいのは、「CSSの記述ミス」「セレクタの指定方法」です。
指定方法は、点数加算方式なので、点数が高いセレクタ指定が優先で反映されます。点数は下記表を参考にしてください。

指定方法	例	点数
style属性	style=”margin:0;”	1000
id	#home	100
class	.home	10
属性セレクタ	a[title]	10
要素名	div	1
疑似要素	::before	1
ユニバーサルセレクタ	*	0