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

ハイブちゃん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はプラグインを利用して動作等を確認した上で子テーマのファイルに反映するようにしています。

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

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

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

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

ITを活用したいのに専任者がいなくて困っている企業向けの相談と実務サポートを行う「ITコンシェルジュ」というサービスと、WordPressの相談と実務に特化した個人事業主向けのサービス「WordPress安心サポートサービス」を提供しています。
美味しい料理とお酒、デジタルガジェット、ジョジョ・ガンダム・マクロス、不動産投資が趣味で、よく寝る奥さんとよく寝る娘2人、よく寝るネコが家族です。
詳しいプロフィールはこちら

ここまでお読みいただきありがとうございます。

ところであなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。

Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で

『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』

について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

  • ワードプレスを使いこなせるコツを知りたい!
  • 自分にピッタリのサーバーを撰びたい!
  • 無料ブログとの違いを知りたい!
  • あとで悔しくならない初期設定をしておきたい!
  • プラグイン選びの方法を知っておきたい!
  • SEO対策をワードプレスで行うポイントを知りたい!
  • 自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

普段お使いのメールアドレスを入力し、ボタンをクリックしてお申し込みください。

『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』メール講座
メールアドレス:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です