WordPressのCSSを編集するには？よくある失敗や対策法も紹介

WordPressでブログやサイトを作る際、既存のテーマ、つまりデザインテンプレートを使用する方が多いと思います。

しかし、部分的にオリジナルのデザインを適用させたい場合、テーマのCSSを自分で編集する必要があります。

そこで本記事では、WordPressテーマのCSSを編集する方法を、初心者の方にもわかりやすくご紹介したいと思います！ぜひ参考にしてみてください。

WordPressテーマのCSSを編集するとこんなことが可能に！

WordPressテーマとは、サイト全体に適用されるテンプレートです。

無料で使用可能なものもあれば、有料で配布されているテーマもあり、こういった既存テーマを活用してサイトづくりをしていくケースが多いかと思います。

しかし、一部自分の好みのデザインに変えたい、配置を少し変更したいといったケースもありますよね。

そのためには、WordPressテーマのcssを編集する必要があります。

今回ご紹介する方法で、CSSを編集していけば、オリジナリティのあるサイトができ、テンプレートのままのサイトと差別化することができるようになります。

WordPressのCSSを編集する方法

WordPressのCSSを編集する方法はいくつかありますが、本記事では「テーマエディタから編集する方法」「追加cssから編集する方法」、「WordPressにカスタムCSSを追加する方法」をご紹介したいと思います。

テーマエディタから編集する方法

まずはテーマエディタから編集する方法をご紹介します。

WordPressの管理画面を開きましょう。

左側にあるメニュー一覧から、「外観」を選択し、続いて「テーマエディター」をクリックします。

「テーマエディター」が開いたら、右側のテーマファイルの中からスタイルシート(style.css)を選び、ここで編集をしていきます。

編集する前にバックアップをしっかりとっておくようにしましょう。

追加CSSから編集する方法

続いて追加CSSから編集していく方法です。

追加CSSに記入することで、テーマファイルのスタイルシートを直接編集せずとも、デザインの修正を行うことができます。

WordPressの管理画面の左側メニューの中から、「外観」を選択し、「カスタマイズ」をクリックします。

下のようなメニュー一覧が出てくるので、その中から「追加CSS」を選択しましょう。

ここでCSSを追記していくことで、自分のサイトのデザインを実際に確認しながら編集を行うことができます。

追加CSSはWordPressテーマがアップデートされた場合も影響を受けないため、ちょっとした変更であれば、ここで編集を行うのがおすすめです。

WordPressにカスタムCSSを追加する方法

WordPressテーマを直接編集していくのではなく、プラグインを使ってCSSを追加するという方法もあります。

最も人気なプラグインとして「Simple Custom CSS」があります。

まずはこちらのプラグインをインストールしましょう。

インストールが完了したら、有効化をクリックすることで使用可能な状態になります。

WordPressの管理画面の左側メニューの中から、「外観」を選択し、「カスタムCSS」をクリックしましょう。

クリックすると編集画面が開くので、こちらにCSSを記入していきましょう。

WordPressの編集における よくある失敗事例と対策をご紹介

WordPressを扱うにあたって、初心者の方がよく陥りがちな失敗があります。

ここからは、失敗事例とその対策をご紹介していきたいと思います。

では、早速みていきましょう。

編集したCSSが反映されない

上記でご紹介した方法でCSSを編集したはずなのに、Webサイトを見てみるとなぜか反映されていない…といった不具合がたまにあります。

そんな時は以下の方法を試してみましょう。

キャッシュを削除してみる

編集したCSSが反映されていない場合、ブラウザのキャッシュ機能が原因となっている可能性があります。

この場合は、ブラウザのキャッシュを削除してみましょう。

削除の方法はブラウザにより異なりますが、ここでは「Chromeブラウザ」の場合の削除方法をご紹介します。

〈「Chrome」のキャッシュの削除方法〉

1. Chromeを開きます。
2. 右上のその他アイコンをクリックします
3. 履歴をクリックします
4. 履歴が開いたら、閲覧履歴データの削除をクリックします
5. キャッシュされた画像とファイルにチェックを入れ、データを削除のボタンをクリックします。
6. 以上でChromeブラウザのキャッシュを削除することができました。

削除したら、CSSが反映されていないか更新して確認してみましょう。

CSSの優先順位を変更する

適用させたい部分のCSSの優先順位を上にしておきましょう。

CSSは後から書いたものが更新されて適用されるため、編集したい部分はすでに書いてあるものとセレクタを揃えておくことできちんと更新されるようになります。

また、その他に「!important」をスタイルの最後に追記するという方法もあります。

この「!important」を指定したスタイルは他のものよりも優先度が上がります。

なぜか記入したCSSが反映されないという方は、CSSの優先度をチェックしてみるようにしましょう。

テーマアップデート時にカスタム前のデザインに戻ってしまう

WordPressテーマは、デザインの変更やセキュリティへの対応などのためにアップデートされることがあります。

WordPressテーマがアップデートされると、過去に編集したはずのCSSが消えて、元のデザインの状態に戻ってしまうというケースがあります。

せっかく書いたCSSが消えてしまったら、非常に悲しいですよね。

こういった状態にならないよう、以下のポイントに注意するようにしましょう。

子テーマを使ってカスタマイズする

よくあるミスとして、WordPressの親テーマを直接編集してしまうというものがあります。

親テーマは、テーマアップデートがあった場合に編集された部分も更新され、データが消えてしまいます。

こういったことが起こらないよう、子テーマを使って編集していく必要があります。

子テーマで編集したCSSは親テーマよりも優先的に適用され、なおかつテーマアップデートがあった場合もデータが消えることはありません。

バックアップをとっておく

テーマを編集し、更新する前にバックアップをきちんととっておくと安心です。

もしデータが消えたり不具合が生じた際も、バックアップがあれば復元が可能です。

FTPファイルを使った方法、もしくはバックアップ用のプラグインを使った方法があります。

おすすめのwordpressバックアップ方法については下記の記事で解説しています。

まとめ

さて、WordPressのCSSを編集する方法をご紹介してまいりましたがいかがでしたでしょうか？

WordPressはコーディングの知識がそこまでない方、初心者の方でも簡単にサイトをつくることができるツールです。

CSSの編集方法を身につければ、表現の幅も広がり、よりご自身のWebサイトやブログを活用していけるようになるかと思います。

是非、本記事でご紹介した方法を参考に、テーマをカスタマイズしてみてください。