CSS（Cascading Style Sheets）は、サイト上の要素の見え方を定義する一連のルールを持つ言語です。
これらのルールは、フォントのサイズや色、サイトの背景色、異なるセクション間のスペースなど、サイトのデザイン要素をコントロールします。
CSSは、あなたのサイトのスタイリング指示書だと考えてください。WordPressテーマはHTML要素を使ってサイトのコンテンツ（見出し、段落、画像、ボタンなど）を構成しますが、CSSはそれらの要素をどのように視覚的に表示するかをブラウザーに指示します。
なぜWordPressでCSSを編集する必要があるのか？
WordPressテーマにはさまざまなデザインオプションが用意されていますが、テーマのビルトイン設定を超えて、サイトの外観に特定の変更を加えたいと思うこともあるでしょう。そこでWordPressユーザーにとって便利なのがCSSの編集です。
例えば、サイトの特定のセクションの背景色を変更したり、読みやすくするためにフォントサイズを少し調整したりすることができます。
また、サイトの外観をパーソナライズして、同じテーマを使用している他のサイトと差別化することもできます。これには、テキストの選択色を変更したり、視差効果を追加したり、WordPressのコメントフォームをスタイリングしたりすることが含まれます。
テーマによっては、ウェブデザインで思い通りに要素が表示されないことがあります。CSSを数行記述するだけで、テキストが中央からずれて表示されたり、画像のパディングやマージンを調整したりといった些細な問題を修正することができます。
WordPressを使うのにCSSの知識は必要？
WordPressでサイトを作るのに、必ずしもCSSの知識は必要ありません。ほとんどのWordPressテーマには様々なデザインオプションがビルトインされており、コードを触ることなくサイトのルック＆フィールをカスタマイズすることができます。
CSSの編集は、一般的に上級者向けの機能と考えられています。初心者の方でもCSSがなくてもWordPressを使うことはできますが、CSSを知ることでサイトのデザインを微調整できる可能性が広がります。
CSSの編集を簡単にするために、CSS HeroのようなWordPressプラグインを使うことができます。CSSプラグインは、CSSの変更を視覚的に行うことができ、多くの人気WordPressテーマと互換性があります。
とはいえ、CSSの仕組みを理解することで、WordPressサイトのカスタマイズをよりコントロールし、柔軟に行うことができるようになります。
WordPressにおけるCSSの基本（例付き）
CSSは、サイト上の要素がどのように見えるかを定義するために特定の構文を使用します。最初は複雑に見えるかもしれませんが、基本的な構造はとてもシンプルです。
最初に知っておくべきことは、 CSSセレクタです。これは、サイト上のどの要素にスタイルを設定するかをCSSに指示するものです。サイトの特定の部分を指すラベルのようなものです。
例えば、bodyタグはサイトのコンテンツエリア全体を指します。そのため、セレクタbodyはページ全体を対象とすることになります。
つ目はプロパティです。これらは、変更したい特定の視覚的側面を定義します。プロパティは、選択した要素をどのように見せるかの指示書のようなものです。よくある例としては、color、font-size、background-color、marginなどがあります。
次に値です。これらは、プロパティが何に設定されるべきかを指定します。例えば、colorの値は赤、青、または特定のカラーコードになります。
次に、HTML要素に割り当てることができる属性の一種であるCSSクラスがあります。HTMLコードで要素にクラスを割り当て、CSSでそのクラスを使って、そのクラスを持つすべての要素に同じスタイルを適用することができます。
例えば、サイト全体の背景色を黒に変更したいとします。そのためのCSSコードがこちらです：
body {
background-color: black;
}
この例では
bodyはセレクタで、サイトのコンテンツエリア全体を対象とする。background-colorはプロパティで、変更したい面を定義する。blackは新しい背景色を指定する値です。
ここで、サイト上の特定のテキストを強調表示したいとします。そのテキストを太字にし、色を黄色に変える.highlightというCSSクラスを作ることができます。CSSでそのクラスを定義する方法は次のとおりです：
.highlight {
font-weight: bold;
color: yellow;
}
そして、これをHTMLの要素に適用する方法を以下に示す：
<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>
この例では
.highlightはクラス・セレクタです。class “highlight “を持つすべての要素を選択します。font-weight: bold;とcolor: yellow;はプロパティです。これらは、選択された要素のどの部分を変更したいかを定義します。太字と黄色は値です。これらはプロパティの新しい値を指定します。
WordPressにカスタムCSSコードを追加するには？
どのようにカスタムCSSを追加できるかは、使用しているWordPressテーマの種類によって異なります。
クラシックテーマを使用している場合は、WordPressカスタマイザーで「Additional CSS」を選択し、そこにコードを追加することができます。
ブロックWordPressテーマを使用している場合、WordPressダッシュボードからテーマカスタマイザーがなくなります。これは初期設定のエディターがフルサイトエディターになったためです。
とはいえ、ドメイン名の末尾に/wp-admin/customize.phpを追加することで、WordPressカスタマイザーにアクセスすることができます：
https://example.com/wp-admin/customize.php
WordPressカスタマイザーでカスタムCSSを追加した場合、その変更は物理的なstyle.cssファイル（テーマのスタイルシート）ではなく、WordPressのデータベースに保存されます。
この方法では、テーマファイルを直接編集することなく変更を加えることができ、より安全な方法です。
とはいえ、この方法では複雑なCSSの変更はできない。そのため、WPCodeのようなコードスニペットプラグインを使用する方法があります。WPCodeは、WordPressテーマにカスタマイザーCSSを安全に挿入することができます。
また、子テーマを作成し、そこにカスタムCSSコードを追加することもできる。こうすれば、親テーマが更新されても、あなたのCSS調整はそのまま残ります。
詳しくは、WordPressサイトにカスタムCSSを追加する方法をステップバイステップで説明しています。
最後に、CSS HeroのようなCSSエディタープラグインを使うこともできます。このプラグインを使えば、コードの書き方を知らなくてもCSSを編集できる。詳しくはCSS Heroのレビューをご覧ください。
WordPressサイトにCSSが表示されないのはなぜですか？
WordPressサイトでCSSが表示されないのは、構文エラーが原因かもしれません。CSSコードにちょっとしたミスがあると、CSSが適用されないことがあります。括弧が抜けていたり、プロパティ名にタイプミスがあったり、値が間違っていたりします。
さらに、最近CSSを追加または変更した場合は、変更を確認するためにキャッシュをクリアする必要があるかもしれません。ブラウザーキャッシュをクリアし、WordPressサイトでキャッシュプラグインを使用している場合は、それもクリアしてください。
他のテーマやプラグインがCSSに干渉することがあります。他のプラグインを一つずつ無効化し、問題が解決するかどうか確認してください。問題が解決した場合は、最後に無効化したプラグインが競合を引き起こしている可能性があります。
子テーマを使用していてCSSが表示されない場合は、子テーマが正しく設定されているか、子テーマのfunctions.phpファイルにCSSファイルが正しくエンキューされているかを確認してください。
ヘルプが必要な場合は、WordPressエラーのトラブルシューティングの初心者向けガイドをご覧ください。
WordPressのCSSについて、この投稿がお役に立てれば幸いです。また、WordPress の便利なヒントやトリック、アイデアに関する関連投稿は、以下の「Additional Reading」リストをご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
