WordPressでCSSをカスタマイズする

WEBサイトのデザインを編集するには、CSSの利用が重要不可欠です。

WordPressのデザインをカスタマイズするために、CSSの編集をしようと思いますが、初めての場合、どこをどのように編集すればよいのかわかりません。

そこでこの記事では、WordPressでCSSをカスタマイズする方法を紹介します。

 

今回実施すること

 

style.cssを編集する

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

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

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

子テーマを使う

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

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

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

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

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

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

コードを書いてみる

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

①style.cssの最下段

②投稿記事内

この２箇所にそれぞれ次のコードを記述します。（テーマファイルエディターでコードの記述ができます→関連記事）

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

 

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

 

結果を表示する

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

▼結果

赤色で大きな文字！

 

まとめ

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

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

参考