テンプレートのままじゃつまらない！WordPressのCSSを編集する方法

WordPressは様々なテンプレートが用意されており、知識がない方でも比較的簡単にサイトがつくれるツールです。しかし、テンプレートそのままだと、オリジナリティのないデザインになってしまいがちですよね。
そこで今回は、部分的にオリジナルのデザインを適用させるためのWordPressでのCSS編集方法を解説していきたいと思います。

WordPressでCSSを編集する方法

WordPressでCSSを編集するには、いくつかの方法がありますが、ここでは
・テーマエディタから編集する方法
・追加CSSから編集する方法
の2つをご紹介したいと思います。

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

まずはテーマエディタから編集する方法をご紹介します。
WordPressの管理画面を開きましょう。
左側にあるメニュー一覧から、「外観」を選択し、続いて「テーマエディター」をクリックします。

 

「テーマエディター」が開いたら、右側のテーマファイルの中からスタイルシート(style.css)を選び、ここで編集をしていきます。
編集する前にバックアップをしっかりとっておくようにしましょう。

追加CSSから編集する

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

WordPressの管理画面の左側メニューの中から、「外観」を選択し、「カスタマイズ」をクリックします。
下のようなメニュー一覧が出てくるので、その中から「追加CSS」を選択しましょう。

自分のサイトのデザインを確認しながら、修正を行うことができる点で便利です。
WordPressのテーマアップデートがあった場合でも追加CSSは影響を受けないため、ちょっとした修正であれば、追加CSSで行うと良いでしょう。

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

WordPressのプラグインを使用してCSSを編集するといった方法もあります。 最も人気なプラグインとして「Simple Custom CSS」があります。
管理画面から「プラグイン」を選択して、「Simple Custom CSS」と検索し、インストールしましょう。インストールが完了したら、有効化をクリックして使用可能な状態になります。

続いて、「外観」＞「カスタムCSS」をクリックすることで、編集画面になります。

WordPressでCSSを編集するメリット

ここまで、WordPressにおけるCSS編集の方法について解説してきましたが、「テンプレートを使えば良いんじゃないの？」と思う方もいらっしゃるかもしれません。
WordPressには、サイト全体に適用されるテンプレートがあり、無料のものから有料のものまであります。確かにこのテンプレートを使用すればサイト自体はできてしまうのですが、よくあるデザインになり、差別化がしにくくなります。

WordPressでCSS編集ができるようになれば、部分的に自分好みのデザインに変えたり、配置を少し変更したりといったことが可能になります。
具体的にどのような部分の編集ができるようになるかと言うと、

• ヘッダーのデザイン
• ボタンやアイコンのデザイン
• テーマにない色の設定
• 見出しやリストのデザイン

CSSを編集することで、こういった項目をオリジナルデザインにすることができます。

CSSが反映されない原因と注意点

たまに、CSSを編集したのに、なぜか反映されない時があります。そんな時は以下の原因にあてはまっていないか確認してみましょう。

キャッシュを見ている場合

キャッシュとは、ブラウザが表示したWebページの情報を一時的に保存し、表示するといった機能です。WordPressのCSSが反映されない場合、このキャッシュが原因となっている可能性があります。ブラウザのキャッシュを削除してみましょう。

キャッシュの削除方法

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

• Chromeを開きます。
• 右上のその他アイコンをクリックします。
• 履歴をクリックします。
• 履歴が開いたら、閲覧履歴データの削除をクリックします。
• キャッシュされた画像とファイルにチェックを入れ、データを削除のボタンをクリックします。

以上でChromeブラウザのキャッシュを削除することができました。

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

優先順位が間違っている場合

CSSでは、後に書いたコードが優先して反映されます。優先順位が上になるようにセレクタを揃えてきちんと更新しましょう。
また、「!important」をスタイルの後に追記するといった方法もあります。こうすることで、優先度が上がります。
基本的には、セレクタの優先順位タイプセレクタ < class < id < styleと、
後から書いたコードが優先されるというルールに基づいてCSSをかいていくのが望ましいです。
しかし、これらを踏まえてもCSSが効かない、といった場合の最終手段として「!important」を使いましょう。
以下のように記述します。

.button {
 background-color: red !important
}

このように記述していただくことでCSSを反映させることができます。

テーマアップデートでデザインが戻る場合

WordPressテーマのアップデートがあると、デザインが初期状態に戻ってしまう場合があります。
これは、WordPressの親テーマを直接編集してしまっていることが原因です。
テーマアップデートとともに、編集した部分も更新され、データが消えてしまいます。

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

まとめ

今回はWordPressのCSSを編集する方法について解説してきました。
今、ブログから会社のホームページまで多くの方に利用されているWordPress。
カスタマイズできるようになることで、オリジナリティ溢れるページを作ることができますよね。
ぜひ、今回ご紹介した内容を参考に、テーマをカスタマイズしてみてくださいね。