【Cocoon】WordPressのstyle.cssを編集してサイトをカスタマイズしよう

html/css
この記事は約4分で読めます。
スポンサーリンク

はじめに

今回はWordPressのstyle.cssを編集して自分のサイトをカスタマイズするやり方について紹介していきます。

style.cssが編集できるようになると、ご自身のサイトのデザインを好きなように変えることができます。

無料テーマのCocoonを使って説明していきますが、WordPressのカスタマイズ方法は同じです。

気になる方はぜひ参考にしてくださいね。

対象者
  • WordPressのカスタマイズをしたい方
  • style.cssの編集方法を知りたい方

editor-style.cssを編集してビジュアルエディタをカスタマイズする場合はこちら。

それでは説明に移ります。

スポンサーリンク

目指す形

本記事で目指す形を最初に示しておきます。

以下style.cssが未編集の状態です。

style.css未編集

style.cssを編集して背景色を変更させます。

style.css編集後
スポンサーリンク

事前準備

まずは事前準備として以下赤枠のように「外観」から「Cocoon Child」が有効になっていることを確認してください。

Cocoon Childテーマ有効

親テーマの「Cocoon」ではなく子テーマの「Cocoon Child」を有効にしましょう。

親テーマでカスタマイズをするとアップデートされた場合にカスタマイズ内容が全て消えてしまいます。

Cocoon Childを有効に出来たらstyle.cssを編集していきましょう。

スポンサーリンク

カスタマイズ方法

WordPressのstyle.cssを編集する方法は大きく以下の2つのやり方があります。

  • 管理画面から編集する
  • エディタで編集する

どちらもよくやるやり方ですので2つとも説明していきます。

ご自身に合ったやり方でstyle.cssを編集してください。

間違った編集の仕方をしてしまうと最悪の場合サイトの表示が崩れる等のリスクがあります。

style.cssの編集をする場合は必ずバックアップを取ってから行うようにしましょう。

スポンサーリンク

管理画面から編集する

まずは管理画面からstyle.cssを編集するやり方について説明していきます。

テーマエディターを選択

以下赤枠の「テーマエディター」を選択しましょう。

テーマエディター選択

選択完了するとワーニング画面が出てくる場合があります。

内容を読んで「理解しました」を押しましょう。

ワーニング画面

以下赤枠から「Cocoon Child」を選択しましょう。

Cocoon Child選択

続いて「スタイルシート(style.css)」を選択します。

style.css選択

style.cssを編集

以下画面からstyle.cssを編集していきます。

赤矢印のようにコードが書かれている最後の行以降にコードを追加していきます。

最後の行以降にコード追加

以下のコードを追加しましょう。

body{
  background-color: red;
}

コードを追加したら「ファイルを更新」を選択します。

ファイル更新選択

「ファイルの編集に成功しました。」と表示されれば正しく編集できています。

ファイルの編集成功

それではサイト側がどのように変更されたか確認していきましょう。

以下のように全体の背景が赤色になっていればサイトのカスタマイズができています。

サイトの表示確認
スポンサーリンク

エディタで編集する

続いてエディタを使って編集するやり方について説明していきます。

ディレクトリ構成

Cocoon Childのテーマは以下のディレクトリ構成になっています。

cocoon-child-master
├ skins
├ tmp-user
├ amp.css
├ editor-style.css
├ functions.php
├ javascript.js
├ keyframes.css
├ screenshot.jpg
└ style.css

style.cssを編集

以下赤枠のstyle.cssを編集していきます。

style.css選択

赤矢印のようにコードが書かれている最後の行以降にコードを追加していきます。

最後の行以降にコード追加

以下のコードを追加しましょう。

body{
  background-color: green;
}

コードを追加したらstyle.cssを保存します。

style.css保存

それではサイト側がどのように変更されたか確認していきましょう。

以下のように全体の背景が緑色になっていればサイトのカスタマイズができています。

サイトの表示確認
スポンサーリンク

おわりに

以上WordPressのstyle.cssを編集して自分のサイトをカスタマイズするやり方について説明しました。

いかがだったでしょうか。

サイトを自分好みにしたい場合はstyle.cssを編集することが必須になってくるのでぜひ参考にしてください。

コメント

タイトルとURLをコピーしました