WordPressのプラグインでCSSをカスタマイズする2つの方法

CSSをカスタマイズできれば見た目を100%コントロールできます。

Webサイトのデザインをする場合、CSSを利用するのが一般的だと思います。

しかし、素のHTMLで作ったWebサイトと同じ様にWordPressのデザインをCSSで行おうとすると、CSSを記述する場所で迷うことになるのではないでしょうか。

というのも、WordPressではCSSのカスタマイズする場所が複数に分かれている上、テーマのアップデートなどのシステム的な要素も絡むからです。

そこでこの記事では、WordPressでCSSをカスタマイスする方法について解説いたします。

この記事もお役に立つかも知れません

CSSカスタマイズの方法

WordPressで作られたWebサイトでCSSのカスタマイズを行う方法は、大きく次の2種類があります。

どちらの方法を使ってもカスタマイズは可能ですが、注意点もあります。
それぞれについて順に解説していきます。

もっとも基本的なCSSカスタマイズの方法です。

FTPクライアントなどを利用してファイルをカスタマイズ・アップロードしても良いですし、次の手順で管理画面から編集しても良いでしょう。

注意点は2つです。

Jetpack by WordPress.comプラグインが導入されている環境であれば、次の手順でCSSのカスタマイズが行えます。

CSS編集機能を使うと、LESSやSassといったプリプロセッサを使った効率の良いCSS作成できる、プレビューが可能というメリットがあります。

代わりにCSSの保存先がデータベースのため、Webサイトが表示される度に僅かながらデータベースへの問い合わせが発生します。

Webサーバー・データベースサーバー間に速度制限がかかっているようなレンタルサーバーの場合、速度低下を招く可能性がありますので、アクセス負荷が高いサイトでは考慮対象にしても良いかも知れません（ファイルアクセスであればキャッシュなどによる高速化を行いやすいので）。

注意点は、テーマを変えるとカスタマイズした内容が消える点です。
この仕様はとても困ります。。。

ページ毎に記述するにはCSS側でid属性などを使ってページを切り分ける必要があります

Simple Custom CSSプラグインでもJetpackプラグインと同様の機能が実現できます。

シンプルに利用できますが、プレビュー機能がありません。
データベースアクセスに関してJetpackプラグインと同じ注意点を抱えています。

ページ毎に記述するにはCSS側でid属性などを使ってページを切り分ける必要があります

Custom CSS and JSプラグインを利用すると、ページ毎にCSS（とJavaScript）を指定できます。

カスタムフィールドを使った方法で行うので、若干スキルが必要になりますが、個別ページのカスタマイズであればおすすめの方法です。

カスタムフィールドを利用するため、データベースのアクセスは他のプラグインに比べて増えます。
アクセスが多いWebサイトの場合は、サーバー構成についても注意しましょう。

CSSのカスタマイズは、個人サイトなどであれば適当に済ますこともできるのですが、クライアント企業様などだととても気を遣います。

こちらの意図していないページが追加されるなどに柔軟に対応しなければならないからです。

弊社の場合、Webサイト全体のデザインに関わるCSSはプラグインを利用して動作等を確認した上で子テーマのファイルに反映するようにしています。

こうすることで、影響範囲を狭めた状態でテストを行った上で、最終的に速度面などを確保できます。

個別ページのカスタマイズについては、規模の大きなサイトでは優先度に注意しながら設定を行うようにしています。

テーマごと変わるクライアント企業もいるので、個別ページのカスタマイズが入っているとその調整が大変なんですね。

このように注意点はいくつかあるものの、やはりデザインというのはまんま見た目に大きな影響を与えるので楽しいです。
是非皆さんもトライしてみてください。