この記事では、カスタムCSSを追加できる以下の6つのプラグインを比較し、目的別におすすめを紹介します。
- Simple CSS
- Simple Custom CSS
- SiteOrigin CSS
- Simple Custom CSS and JS
- WP Add Custom CSS
- Code Snippets
WordPressのカスタムCSS追加プラグインの選び方
WordPressのカスタムCSS追加プラグインを選ぶ際には、以下の項目を考えるといいでしょう。
- CSSの知識が十分か
- 投稿個別にCSSを適用したいか
- CSS以外にショートコードやJavascriptを使用するか
CSSの知識が十分か
CSSの追加は、デザインやレイアウト変更のために行います。
その変更内容によって、適したCSSを記述する必要があります。
CSSの知識が十分にない方は、希望の変更を行えないかもしれません。
そういった方は、自身でCSSコードの記述を行うことなく、直感的な操作（数値などの入力）のみで自動的にCSSコードを追加してくれるプラグインがおすすめです。
CSSを適用したい範囲
追加したカスタムCSSは、基本的にサイト全体に適用されます。
投稿ページ・固定ページ個別に適用したいCSSがある方は、個別にカスタムCSSを追加できる機能があるプラグインを選びましょう。
CSS以外にHTMLショートコードやJavascriptを使用するか
プラグインによっては、カスタムCSSの追加以外にも、HTMLショートコードやJavascriptの追加に対応しています。
プラグインの管理を楽にしたい方は、まとめて管理できるプラグインがおすすめです。
おすすめのカスタムCSS追加プラグインを目的別に紹介
迷った方向け（シンプルな機能のみ）
Simple Custom CSSは、シンプルなCSSエディターのみを追加するWordPressプラグインです。
設定項目などは一切ありません。
ひとまずカスタムCSSを追加できるプラグインが欲しい方におすすめです。
WordPress初心者向け
SiteOrigin CSSは、シンプルなCSSエディターに加えて、直感的な操作でCSSを追加できるビジュアルエディター機能があります。
ビジュアルエディター機能を利用すれば、CSSに詳しくなくても様々なデザイン変更が可能です。
投稿・固定ページごとにCSSを適用したい方向け
Simple CSSは、サイト全体および投稿個別のカスタムCSSの追加が行えるWordPressプラグインです。
投稿個別に適用できる機能がないプラグインで追加したCSSは、サイト全体に適用がされます。
ほぼ同じ機能を持ったプラグインとしてWP Add Custom CSSがあります。
違いはカスタム投稿タイプの設定項目の有無だけなので、カスタム投稿タイプを使う予定がない方はどちらを選んでもいいでしょう。
ショートコードやJavascriptも追加したい方向け
Code Snippetsは、CSSだけではなく、HTMLショートコードやJavascriptのコードをまとめて管理できるWordPressプラグインです。
記述はアクションフックを使用しているため、WordPress関数およびPHPの知識が少し必要となります。
そのため、WordPress初心者にはあまりおすすめできません。
一方でWordPressやPHPに知識がある方は、HTMLショートコード・CSS・JavascriptをCode Snippetsのみで追加できるため、管理が行いやすいでしょう。
プラグインでカスタムCSSの追加を行うメリット
テーマを変更しても編集内容が保存される
もしプラグインを使用しなかった場合、テーマを変更する前に行ったCSSの編集内容が、移行後のテーマに反映されません。
プラグインを使用せずにCSS編集を行う場合、テーマのスタイルシートを編集するかカスタマイズメニューにある追加CSSを利用することになります。
これらのCSSの編集内容は、テーマに紐づけられるためです。
そのため、テーマを変更しても利用したいCSSは、プラグインを利用して編集を行うことをおすすめします。