最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
WordPressは様々なテンプレートが用意されており、知識がない方でも比較的簡単にサイトがつくれるツールです。しかし、テンプレートそのままだと、オリジナリティのないデザインになってしまいがちですよね。
そこで今回は、部分的にオリジナルのデザインを適用させるためのWordPressでのCSS編集方法を解説していきたいと思います。
目次
WordPressでCSSを編集するには、いくつかの方法がありますが、ここでは
・テーマエディタから編集する方法
・追加CSSから編集する方法
の2つをご紹介したいと思います。
まずはテーマエディタから編集する方法をご紹介します。
WordPressの管理画面を開きましょう。
左側にあるメニュー一覧から、「外観」を選択し、続いて「テーマエディター」をクリックします。
「テーマエディター」が開いたら、右側のテーマファイルの中からスタイルシート(style.css)を選び、ここで編集をしていきます。
編集する前にバックアップをしっかりとっておくようにしましょう。
追加CSSから編集していく方法を解説します。
追加CSSに記入することで、テーマファイルのスタイルシートを直接編集せずとも、デザインの修正を行うことができます。
WordPressの管理画面の左側メニューの中から、「外観」を選択し、「カスタマイズ」をクリックします。
下のようなメニュー一覧が出てくるので、その中から「追加CSS」を選択しましょう。
自分のサイトのデザインを確認しながら、修正を行うことができる点で便利です。 WordPressのテーマアップデートがあった場合でも追加CSSは影響を受けないため、ちょっとした修正であれば、追加CSSで行うと良いでしょう。
WordPressのプラグインを使用してCSSを編集するといった方法もあります。 最も人気なプラグインとして「Simple Custom CSS」があります。
管理画面から「プラグイン」を選択して、「Simple Custom CSS」と検索し、インストールしましょう。インストールが完了したら、有効化をクリックして使用可能な状態になります。
続いて、「外観」>「カスタムCSS」をクリックすることで、編集画面になります。
ここまで、WordPressにおけるCSS編集の方法について解説してきましたが、「テンプレートを使えば良いんじゃないの?」と思う方もいらっしゃるかもしれません。
WordPressには、サイト全体に適用されるテンプレートがあり、無料のものから有料のものまであります。確かにこのテンプレートを使用すればサイト自体はできてしまうのですが、よくあるデザインになり、差別化がしにくくなります。
WordPressでCSS編集ができるようになれば、部分的に自分好みのデザインに変えたり、配置を少し変更したりといったことが可能になります。
具体的にどのような部分の編集ができるようになるかと言うと、
CSSを編集することで、こういった項目をオリジナルデザインにすることができます。
たまに、CSSを編集したのに、なぜか反映されない時があります。そんな時は以下の原因にあてはまっていないか確認してみましょう。
キャッシュとは、ブラウザが表示したWebページの情報を一時的に保存し、表示するといった機能です。WordPressのCSSが反映されない場合、このキャッシュが原因となっている可能性があります。ブラウザのキャッシュを削除してみましょう。
削除の方法はブラウザにより異なりますが、ここでは「Chromeブラウザ」の場合の削除方法をご紹介します。
「Chrome」のキャッシュの削除方法
以上でChromeブラウザのキャッシュを削除することができました。
削除したら、CSSが反映されていないか更新して確認してみましょう。
CSSでは、後に書いたコードが優先して反映されます。優先順位が上になるようにセレクタを揃えてきちんと更新しましょう。
また、「!important」をスタイルの後に追記するといった方法もあります。こうすることで、優先度が上がります。
基本的には、セレクタの優先順位タイプセレクタ < class < id < styleと、
後から書いたコードが優先されるというルールに基づいてCSSをかいていくのが望ましいです。
しかし、これらを踏まえてもCSSが効かない、といった場合の最終手段として「!important」を使いましょう。
以下のように記述します。
.button { background-color: red !important }
このように記述していただくことでCSSを反映させることができます。
WordPressテーマのアップデートがあると、デザインが初期状態に戻ってしまう場合があります。
これは、WordPressの親テーマを直接編集してしまっていることが原因です。
テーマアップデートとともに、編集した部分も更新され、データが消えてしまいます。
こういったことが起こらないように、子テーマを使って編集作業を行いましょう。
子テーマで編集したCSSは親テーマよりも優先的に適用され、なおかつテーマアップデートがあった場合もデータが消えることはありません。
今回はWordPressのCSSを編集する方法について解説してきました。
今、ブログから会社のホームページまで多くの方に利用されているWordPress。
カスタマイズできるようになることで、オリジナリティ溢れるページを作ることができますよね。
ぜひ、今回ご紹介した内容を参考に、テーマをカスタマイズしてみてくださいね。