WordPressを始める　第１０回「WordPressでCSSをカスタマイズする」

「礼」の~IT人材を目指して~
作成：2025/06/17
更新：————-

はじめに

現在、WordPressでWEBサイト構築の勉強をしています。

このサイト自体をWordPressで作成し、勉強の実験台にしています。

そして、勉強の進捗があればその都度、このサイトで、報告しているところです。

前回までWordPressを構成しているPHPファイルの編集等を行ってまいりました。

WEBサイトのデザインを編集するには、CSSも重要になってきます。

WordPressのデザインをカスタマイズするために、CSSの編集をしようと思います。

しかし、どこをどのようにすればよいのかわかりません。

そこで今回は、WordPressでCSSをカスタマイズする方法を調べてみました。

WordPressを構成するファイルの中にstyle.cssという名前のCSSファイルがあり、そのファイルを編集すればよいようです。

style.cssの置き場所は「/wp-content/themes/テーマディレクトリ/style.css」となります。

しかし、普通にCSSファイルを編集しても、テーマをアップデートしたら、変更した内容が失われてしまいます。

そこで、WordPressでCSSをカスタマイズするときは子テーマを使います。

子テーマは親テーマに上書きして読み込まれるテーマで、CSSやPHPの変更を反映させることが可能です。子テーマは親テーマのようにアップデートされないため、変更が失われることもありません。

私はテーマにcocoonを使用しているのですが、このテーマの場合、はじめから子テーマが用意されており、

/wp-content/themes/cocoon-child-master

のディレクトリの中にstyle.cssがありました。

子テーマが無い場合は、子テーマ作成プラグイン「Child Theme Configurator」で作成できます。子テーマを作って有効化してから、style.cssをカスタマイズしましょう。

では、実際に、コードを書いて試してみたいと思います。コードを記述する場所は２箇所あります。

①style.cssの最下段

②投稿記事内

この２箇所にそれぞれ次のコードを記述します。

▼style.cssの最下段に記述するコード

/* CSS */
.sample{
    color: red;
    font-size:36px;
}

/* CSS */

.sample{

color: red;

font-size:36px;

}

▼投稿記事に記述するコード

<p class="sample">赤色で大きな文字！</p>

1	<p class="sample">赤色で大きな文字！</p>

結果を表示すると、下のようになりました。

▼結果

赤色で大きな文字！

今回は、WordPressのデザインをカスタマイズするために、CSSの編集をしてみました。

これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。

参考