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

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

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

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

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

CSSカスタマイズの方法

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

  • テーマのファイルを直接編集する
  • プラグインを使う

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

テーマのファイルを直接編集する

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

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

  1. WordPressの管理画面を開く
  2. 「外観|テーマの編集」メニューを開く
  3. サイドメニューから編集したいファイル(style.cssなど)を選択する
  4. 編集し終わったら「ファイルを更新」ボタンを押す

注意点は2つです。

  • テーマの更新を行うとカスタマイズしたCSSファイルが上書きされてカスタマイズした内容がなくなります。子テーマを用意しましょう。
  • WordPressの管理画面からは、サブディレクトリにあるテーマファイルが編集できません。テーマのディレクトリ構成を考えましょう。
  • ページ毎に記述するにはCSS側でid属性などを使ってページを切り分ける必要があります

プラグインを使う

Jetpackプラグイン

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

  1. WordPressの管理画面を開く
  2. 「外観|CSS 編集」メニューを開く
  3. 「追加CSS」の内容を編集する
  4. 「保存して公開」ボタンを押す

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

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

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

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

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

Simple Custom CSSプラグインを使う

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

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

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

専用のプラグインを使う

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

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

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

まとめ

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

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

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

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

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

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

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