CSS（カスケーディングスタイルシート）は、ウェブサイト上の要素の外観を定義するルールのセットを持つ言語です。
これらのルールは、フォントサイズや色、サイトの背景色、セクション間のスペースなど、ウェブサイトのデザイン要素を制御します。
CSSはウェブサイトのスタイリング指示だと考えてください。WordPressテーマはサイトのコンテンツ（見出し、段落、画像、ボタンなど）を構造化するためにHTML要素を使用しますが、CSSはブラウザにそれらの要素を視覚的にどのように表示するかを指示します。
WordPressでCSSを編集する必要があるのはなぜですか？
WordPressテーマはさまざまなデザインオプションを提供していますが、テーマに組み込まれた設定を超えてウェブサイトの外観を具体的に変更したい場合があります。ここで、WordPressユーザーにとってCSSの編集が役立ちます。
たとえば、ウェブサイトの特定のセクションの背景色を変更したり、読みやすくするためにフォントサイズを少し調整したりしたい場合があります。
また、同じテーマを使用している他のサイトとは異なる、ウェブサイトの外観をパーソナライズすることもできます。これには、テキスト選択の色を変更したり、パララックス効果を追加したり、WordPressコメントフォームをスタイリングしたりすることが含まれます。
テーマによっては、ウェブデザインで要素が意図したとおりに表示されない場合があります。数行のCSSで、中央揃えになっていないテキストを中央揃えにしたり、画像の周りのパディングやマージンを調整したりするなどの軽微な問題を修正できます。
WordPressを使用するためにCSSを知る必要がありますか？
いいえ、WordPressウェブサイトを構築するために必ずしもCSSを知っている必要はありません。ほとんどのWordPressテーマには、コードに触れることなくサイトの外観をカスタマイズできるさまざまな組み込みデザインオプションが用意されています。
CSSの編集は通常、高度な機能と見なされます。初心者でもWordPressをそれなしで使用できますが、CSSを知っていると、ウェブサイトのデザインを微調整するためのより多くの可能性が開かれます。
CSSの編集を容易にするために、CSS HeroのようなWordPressプラグインを使用できます。CSSプラグインは、CSSの変更を視覚的に行うためのアプローチを提供し、多くの人気のWordPressテーマと互換性があります。
とはいえ、CSSの仕組みを理解することで、WordPressサイトのカスタマイズにおいてより多くの制御と柔軟性を得ることができます。
WordPressにおけるCSSの基本（例付き）
CSSは、ウェブサイト上の要素の外観を定義するために特定の構文を使用します。最初は複雑に見えるかもしれませんが、基本的な構造は非常にシンプルです。
まず知っておくべきことはCSSセレクターです。これは、ウェブサイトのどの要素にスタイルを適用するかをCSSに指示します。ウェブサイトの特定の部分を指し示すラベルのようなものです。
例えば、body タグはウェブサイトのコンテンツ全体を表します。したがって、セレクター body はページ全体を対象とします。
2つ目はプロパティです。これは、変更したい特定の視覚的側面を定義します。プロパティは、選択した要素がどのように見えるべきかという指示のようなものです。一般的な例としては、color、font-size、background-color、marginなどがあります。
次に値です。これはプロパティを設定する値を指定します。たとえば、colorの値をred、blue、または特定のカラーコードにすることができます。
次に、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はクラスセレクターです。“highlight”というクラスを持つすべての要素を選択します。font-weight: bold;およびcolor: yellow;はプロパティです。これらは、選択した要素のどの側面を変更したいかを定義します。boldとyellowは値です。これらはプロパティの新しい値を指定します。
WordPressにカスタムCSSコードを追加するにはどうすればよいですか？
カスタムCSSを追加する方法は、使用しているWordPressテーマの種類によって異なります。
クラシックテーマを使用している場合は、WordPressカスタムizerに移動し、「追加CSS」を選択してコードを追加できます。
ブロックWordPressテーマを使用している場合、テーマカスタムizerはWordPressダッシュボードから欠落しています。これは、デフォルトのエディタがフルサイトエディタになったためです。
それでも、ドメイン名の末尾に /wp-admin/customize.php を追加することで、WordPress カスタマイザーにアクセスできます。例：
https://example.com/wp-admin/customize.php
WordPressカスタム機能でカスタムCSSを追加すると、変更はWordPressのデータベースに保存され、物理的なstyle.cssファイル（テーマのスタイルシート）には保存されません。
このアプローチにより、テーマファイルを直接編集することなく変更を加えることができます。これははるかに安全な方法です。
ただし、この方法では複雑なCSSの変更はできません。そのため、WPCodeのようなコードスニペットプラグインを使用するという選択肢があります。これにより、カスタムCSSをWordPressテーマに安全に挿入できます。
また、子テーマを作成して、カスタムCSSコードをそこに追加することもできます。これにより、親テーマが更新されてもCSSの調整はそのまま残ります。
詳細については、WordPressサイトにカスタムCSSを追加する方法に関するステップバイステップガイドをお読みください。
最後に、CSS HeroのようなCSSエディタプラグインを使用することもできます。このプラグインを使用すると、コーディング方法を知らなくてもCSSを編集できます。詳細については、CSS Heroのレビューをご覧ください。
WordPressサイトでCSSが表示されないのはなぜですか？
WordPressサイトでCSSが表示されないのは、構文エラーが原因である可能性があります。CSSコードの小さな間違いは、適用されない原因となることがあります。これには、括弧の欠落、プロパティ名のタイプミス、または不正な値が含まれる場合があります。
さらに、最近CSSを追加または変更した場合は、変更を確認するためにキャッシュをクリアする必要がある場合があります。ブラウザのキャッシュをクリアし、WordPressサイトでキャッシュプラグインを使用している場合は、それもクリアする必要があります。
他のテーマやプラグインがCSSに干渉することがあります。問題を解決するかどうかを確認するために、他のプラグインを1つずつ無効化してみてください。問題が解決した場合、最後に無効化したプラグインが競合の原因である可能性が高いです。
子テーマを使用しており、CSSが表示されない場合は、子テーマが正しく設定されており、子テーマのfunctions.phpファイルにCSSファイルが正しくエンキューされていることを確認してください。
ヘルプが必要な場合は、WordPressのエラートラブルシューティング初心者ガイドをご覧ください。
この記事がWordPressのCSSについて学ぶのに役立ったことを願っています。また、役立つWordPressのヒント、トリック、アイデアに関する関連ブログ記事については、以下の追加資料リストも参照してください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
