HOME >
WordPress >
ワードプレスでCSSを編集する方法【初心者にもわかりやすく解...

WordPress

ワードプレスでCSSを編集する方法【初心者にもわかりやすく解説】

投稿日:2021年02月15日（最終更新日:2022年02月15日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

はじめに

ワードプレスはHTMLなどの専門知識を持たない人でも、テーマというテンプレートを使用することでデザインされたWEBサイトを簡単に作ることが可能です。

しかし残念ながらテーマだけでは決まったパターンのデザインしか実現できません。

より自由なデザインでWEBサイトを作るためにはCSSが必要になります。

このページでは、ワードプレスでCSSを編集してデザインを調整したりテーマの一部分のデザインを変更する方法を説明します。

CSSとは？

CSSはCascading Style Sheet（カスケーディング・スタイル・シート）の略であり、HTMLを表示する際のスタイル（＝見た目、見栄え）を指定するために用いられる言語です。

HTMLだけでは文字サイズや色などといった見栄えに関する変更はできないので、普段目にしているWEBサイトは全てCSSによってデザインが作られていることになります。

基本的な記述の方法

CSSの記述にはいくつかの方法が存在しますが、最もスタンダードなものはセレクタを指定して書く方法です。

セレクタとはCSSでスタイルを調整する対象のHTMLのことで、HTMLタグそのものであったりHTMLに割り振った名前であったりします。

セレクタごとにプロパティと呼ばれる項目と値を指定することで見栄えを調整します。

セレクタ｛プロパティ:値； }

具体的には以下のように記述していきます。

CSS

 
h2{セレクタ（HTMLタグ）
  font-size:16px;プロパティ：値
  color:red;プロパティ：値
}
.sample{セレクタ（クラス名）
  width:100px;プロパティ：値
  background:#f9f9f9;プロパティ：値
}

HTML

<h2>見出し</h2>
<p class="sample">これがクラス名の記述の仕方です。</p>

プロパティなどCSSに関する詳しい説明は、「CSSについて」をご覧ください。

ワードプレスにはもともとテーマのCSSが反映されている

ワードプレスはテーマというテンプレートを使用してWEBサイトを作成しますが、テーマごとに様々なデザインが作られているのはCSSが記述されているからです。

一部分だけテーマのデザインを変えたい場合には、あらかじめテーマに設定されたCSSを上書きすることで変更します。

CSSを記述する場所

ワードプレスでCSSを使用して装飾を調整したい場合は、カスタマイズの「追加CSS」に記述する方法とコードエディタを使って「ページ内に書く」方法、「テーマのstyle.cssに書く」方法の３つが挙げられます。

ここではページ作成時に見出しのデザインを調整したい状況を例にワードプレスでCSSを編集する方法を説明します。

なお説明内の文章や画像は、WordPress-5.6を使用しているものになります。

追加CSSに書く

ワードプレスにはカスタマイズ用のCSSを記述するための機能が用意されており、それが「追加CSS」です。

プレビューを見ながら編集できる

追加CSSは編集したものがリアルタイムでプレビューに反映されるので、それを確認しながら作業を行うことができます。

テーマのアップデートの影響を受けない

ワードプレスのデザインは本来テーマのstyle.cssを編集して行うのですが、テーマがバージョンアップされた場合style.cssの内容も新しいものに上書きされてしまいせっかく書いたものが消えてしまいます。

しかし、この追加CSSに書いたものはバージョンアップしても上書きされることがないので安心です。

デザインを調整したい対象にクラスを付与する。

まずはセレクタを指定するためにエディターでクラス名の追記を行います。

以下のように見出しブロックを挿入します。

ブロックメニューの「・・・」をクリックし、「HTMLに変換」を押します。

見出しブロックのHTMLソースコードが表示されました。

ここにCSSを指定するためのクラス名を追記します。

h2の脇に半角スペースをあけて、「class="sample-title"」と入力して下さい。

クラス名は自由に決める事ができます。（英数字とハイフンとアンダーバーが使用できます）

続いて「追加CSS」にスタイルを記述していきます。

プレビューをクリックします。

ページのプレビュー画面が開いたら、上部のメニューにある「カスタマイズ」を押します。

左側にカスタマイズメニューが表示されるので、「追加CSS」をクリックします。

はじめて追加CSSを使用する場合、注意書きが表示されていますので閉じておきます。

テキストエリアにCSSを書いていきます。

先程付与したクラス名を記述します。クラス名の前に「.」（ドット）を付け、クラス名の後ろ付けた「｛」と「｝」の間にスタイルを指定していきます。

今回は、文字色や線などを以下のように指定しました。

CSS

.sample-title{
  color:white;
  background:#0ff;
  border-left:solid 3px #f00;
  padding-left:5px;
}

プレビュー内にCSSが反映されたことを確認します。

プレビュー

最後に「公開」ボタンを押して内容を保存します。（ページ編集の方の保存もお忘れなく）

テーマを変更した時は引き継がれないので注意

異なるテーマでは追加CSSは白紙の状態になっています。

各ページに独自に設けたセレクタに対する指定も書き直す必要があるので注意して下さい

なお再度テーマを有効化しなおせば、そのテーマで記述した追加CSSが復活します。

エディターを使ってページ内に書く

CSSはHTMLの中に組み込んで記述することもできるので、コードエディターを使ってページ内に書くことも可能です。

書いたページにしか反映されない

この方法の場合、違うページには書いたCSSは適用されません。

そのため見出しなどサイト全体でデザインを統一させた方が良いものに関しては追加CSSなどに記述すべきです。

反対に特定のページでのみデザインを変えたい場合はこの方法が利用できます。

style属性を使う

タグ内にstyle属性を記述してタグひとつひとつに指定する方法です。

ページ内だけでなく記述したタグのみにしか反映されません。

HTML

<h2 style="color:white;background:#0ff;border-left:solid 3px #f00;padding-left:5px;">見出しサンプル</h2>

styleタグを使う

styleタグの中には追加CSSと同じように記述できます。

HTML

<style>
    .sample-title{
        color:white;
        background:#0ff;
        border-left:solid 3px #f00;
        padding-left:5px;
    }
</style>
<h2 class="sample-title">見出しサンプル</h2>

テーマのstyle.cssに書く

前述の通り、style.cssはテーマのバージョンアップによって上書きされてしまいます。

子テーマを作成して編集する

style.cssの上書きを回避する方法が「子テーマ」の利用です。

元のテーマをいじらずに上書き編集するために用意するテーマのことを子テーマと言います。

style.cssに限らずテーマをカスタマイズする際には子テーマを作成して編集するのが一般的です。

テーマによってはあらかじめ子テーマが用意されていたりしますが、基本的には元のテーマから自身で作成します。

子テーマは「Child Theme Configurator」プラグインを使用すれば簡単に作成できます。

子テーマについて詳しくはこちら

ワードプレスでの子テーマの作り方

テーマをカスタマイズする際には元のテーマ（親テーマ）の中身を受け継いだカスタマイズ用のテーマ（子テーマ）を作成して、その子テーマに対してカスタマイズを進めていきます。万が一のエラーの時でも復旧しやすく、親テーマが更新されても子テーマで行ったカスタマイズは上書きされることなく引き継がれます。 ...【もっと読む】

子テーマを作成したら、通常の手順で子テーマを有効化させてください。

テーマファイルの編集は、「外観」の「テーマエディター」で行います。

テーマエディターを開いたら、右側の有効化中のテーマの構成ファイル一覧からstyle.cssをクリックします。

あとは既存のスタイルを変更したり、新たに追記してください。