キャリカク岡山

WordPressでCSSはどこに書くの？

「CSSは分かった。でも、そのCSSをどこに書くの？」

で止まりやすいんですよね。

最初に結論を言うと、WordPressでCSSを使う方法は大きく3つあります。

方法	初心者向け	用途
WordPressの「追加CSS」	◎	少量のCSSを試す
子テーマの style.css	○	サイト全体を本格的に調整
独自CSSファイルを読み込む	△	CSSを用途別に分割・管理

---

1. 一番簡単なのは「追加CSS」

テーマによって画面は少し違いますが、

WordPressにはCSSを直接追加できる機能があります。

クラシックテーマでは、一般的に、

外観
 ↓
カスタマイズ
 ↓
追加CSS

からCSSを入力できます。

ブロックテーマでは、

外観
 ↓
エディター
 ↓
スタイル

周辺からCSSを設定できる場合があります。

※テーマやWordPressのバージョンによって、

表示される場所や名称が異なることがあります。

たとえば、

.wp-block-heading {
    color: blue;
}

と追加すれば、対象となる見出しの表示を変更できます。

初心者がCSSを試すのであれば、まずこの方法が分かりやすいです。

---

2. style.css に書く方法

WordPressのテーマには、一般的に

style.css

というCSSファイルがあります。

たとえばテーマフォルダの内部構成が、

wp-content/
└─ themes/
   └─ sample-theme/
      ├─ style.css
      ├─ functions.php
      └─ ...

(“sample-theme/” のように、最後に「/」が付いているものはフォルダです。
フォルダは、ファイルを入れておく箱のようなものです。

一方で、style.css や functions.php のように、
最後に「.css」「.php」などが付いているものは単一ファイルです。

拡張子とは、ファイル名の最後に付く目印です。
たとえば .css はCSSファイル、
.php はPHPファイル、
.jpg や .png は画像ファイルを表します。
PCを操作するうえで、拡張子という言葉は頻繁に使用されますので、
この際に、覚えておいた方が、後々、便利です。)

上記のような構造なら、

style.css

にCSSが記述されています。

たとえば、

h3 {
    color: red;
}

と書けば、テーマ内の h3 に影響します。

---

<重要>親テーマの style.css は直接変更しない方が安全

ただし、ここで重要な注意があります。

WordPressのテーマを更新すると、

親テーマ内のファイルが

新しいものに置き換えられることがあります。

つまり、

親テーマのstyle.cssを直接編集
        ↓
テーマをアップデート
        ↓
自分で追加したCSSが消える

ということが起こり得ます。

そのため、本格的にCSSを変更する場合には、

子テーマ

を使う方法が一般的です。

---

3. 子テーマを作ってCSSを書く

子テーマとは、親テーマそのものを書き換えずに、自分で追加した変更を別の場所に保存するためのテーマです。

たとえば親テーマのフォルダ名が sample-theme なら、その横に sample-theme-child というフォルダを作ります。

wp-content/
└─ themes/
   ├─ sample-theme/
   │
   └─ sample-theme-child/
      ├─ style.css
      └─ functions.php

ここでは、子テーマを作るために必要な style.css と functions.php を、全文の形で見てみます。

---

子テーマの style.css 全文

sample-theme-child/style.css を作り、次の内容を記述します。

/*
Theme Name: Sample Theme Child
Template: sample-theme
Version: 1.0.0
*/
/* ここから下に、自分のCSSを書きます */
h3 {
    color: red;
}
.wp-block-table {
    margin-top: 20px;
}

ここで特に重要なのが、

Template: sample-theme

sample-theme の部分は、
実際に使用している親テーマのフォルダ名と
同じ名前に変更してください。

たとえば親テーマのフォルダが
wp-content/themes/my-theme/ なら、
Template: my-theme とします。

---

子テーマの functions.php 全文

次に、sample-theme-child/functions.php を作り、次の内容を記述します。

<?php
function sample_theme_child_enqueue_styles() {
    wp_enqueue_style(
        'sample-theme-parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'sample-theme-child-style',
        get_stylesheet_uri(),
        array('sample-theme-parent-style'),
        wp_get_theme()->get('Version')
    );
}
add_action(
    'wp_enqueue_scripts',
    'sample_theme_child_enqueue_styles'
);

この functions.php は、
WordPressに親テーマと子テーマのCSSを
読み込ませるための基本的な例です。

PHPをまだ勉強していない場合は、
最初から中身を全部理解しようとしなくても大丈夫です。

functions.php
        ↓
WordPressに
「このCSSを読み込んでください」
と伝えるための設定を書く場所

くらいに考えておけば十分です。

なお、PHPファイルでは
先頭に <?php を書きますが、
ファイルの最後に ?> は書かないことが一般的です。

※親テーマによってCSSの読み込み方が異なる場合があります。
テーマ独自の方法でCSSを読み込んでいる場合は、
この例をそのまま使うと親CSSが二重に読み込まれることがあります。
実際のサイトで使用する前に、
必ずバックアップを取って確認してください。

---

4. CSSファイルを別に作る方法

CSSが増えてくると、

style.css

だけでは管理しづらくなります。

そこで、

css/
├─ layout.css
├─ table.css
├─ button.css
└─ image.css

のようにCSSを分割することもできます。

たとえば、

sample-theme-child/
├─ style.css
├─ functions.php
└─ css/
   └─ custom.css

とします。

custom.css に、

.notice-box {
    padding: 20px;
    border: 1px solid #999;
}
.image-row {
    display: flex;
    gap: 20px;
}

などを書きます。

ただし、CSSファイルを作っただけでは

WordPressは自動的に読み込んでくれません。

ここが重要です↓。

---

WordPressにCSSファイルを読み込ませる

WordPressでは通常、

functions.php からCSSファイルを登録します。

たとえば子テーマを次のような構成にしたとします。

sample-theme-child/
├─ style.css
├─ functions.php
└─ css/
   └─ custom.css

css/custom.css も読み込ませたい場合は、
functions.phpの内容 を次の全文にします。

<?php

function sample_theme_child_enqueue_styles() {

    wp_enqueue_style(
        'sample-theme-parent-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'sample-theme-child-style',
        get_stylesheet_uri(),
        array('sample-theme-parent-style'),
        wp_get_theme()->get('Version')
    );

    wp_enqueue_style(
        'sample-theme-custom-style',
        get_stylesheet_directory_uri() . '/css/custom.css',
        array('sample-theme-child-style'),
        '1.0.0'
    );
}

add_action(
    'wp_enqueue_scripts',
    'sample_theme_child_enqueue_styles'
);

上記の内容をメモ帳にコピペして、

保存名を”functions.php”にします。

(保存する時、
“拡張子を変更すると使えなくなることがありますが、変更しますか？”
という案内が出ますが、中身はphpファイルなので、
OKボタンorEnterキーを押して保存します。)

これで、
親テーマのCSS、
子テーマの style.css、
そして css/custom.css
を順番に読み込ませる形になります。

親テーマの style.css
        ↓
子テーマの style.css
        ↓
子テーマの css/custom.css

※親テーマによっては、
すでに親テーマ側でCSSを読み込んでいることがあります。
その場合は調整が必要になることがあります。

---

wp_enqueue_style() とは？

これはWordPressに、

「このCSSファイルも読み込んでください」

と登録するための関数です。

この部分、

wp_enqueue_style()

がCSS登録の指示文です。

---

CSSにつける名前

'my-custom-style',

これはWordPress内部でCSSを識別するための名前です。

ファイル名とは別物です。

---

CSSファイルの場所

get_stylesheet_directory_uri() . '/css/custom.css',

は、

現在使用しているテーマのフォルダにある css/custom.css

を意味します。

子テーマを使用している場合、

get_stylesheet_directory_uri() は

子テーマ側を参照します。

---

CSSのバージョン

'1.0.0'

はCSSファイルのバージョンです。

たとえばCSSを変更したら、

'1.0.1'

と変更することがあります。

ブラウザのキャッシュ対策にも利用できます。

---

HTMLの <link> を直接書かないの？

通常のHTMLなら、

<link rel="stylesheet" href="css/custom.css">

と書けます。

しかしWordPressでは、

テーマやプラグインなど、

多数のCSSやJavaScriptが同時に動いています。

そのため、WordPressでは基本的に、

wp_enqueue_style()

を使ってCSSを登録する方法が推奨されます。

イメージとしては、

通常のHTML
    ↓
<link>

WordPress
    ↓
wp_enqueue_style()

です。

---

CSSを変更したのに表示が変わらない？

WordPressでCSSを触っていると、
これはかなりよく起こります

CSSを変更したのに表示が変わらない場合は、

CSSを書き間違えている
      ↓
別のCSSに上書きされている
      ↓
ブラウザのキャッシュが残っている
      ↓
WordPress側のキャッシュが残っている

などが考えられます。

特に、

h3 {
    color: red;
}

と指定していても、

テーマ側にもっと強い指定があると、

そちらが優先される場合があります。

これがCSSの「Cascading」に関係する部分です。

---

初心者なら、どれを使えばいい？

最初は、こう考えると分かりやすいです。

少しだけ色や余白を変えたい
↓
追加CSS

自分のサイト全体を本格的に変更したい
↓
子テーマ + style.css

CSSが増えて管理しづらくなった

子テーマフォルダ内にcssフォルダを作成して、
その中に分割した".css"ファイルを移動する。
    ↓
css/custom.css
css/layout.css
css/table.css
    ↓
functions.phpから読み込む

と段階的に進めれば大丈夫です。

---

WordPressでのCSSの流れ

Webブラウザで表示されるまでの経路は以下のようになります。

HTML / WordPressブロック
        ↓
「ここは見出し」
「ここは表」
「ここは画像」
        ↓
CSS
        ↓
色・大きさ・余白・配置を指定
        ↓
ブラウザに表示

そしてWordPressの場合は、

テーマのCSS
＋
WordPress本体のCSS
＋
プラグインのCSS
＋
自分で追加したCSS
        ↓
最終的な表示

になります。

とりあえず、CSSファイルを置くだけでは、
反映されない場合が有りますので、
自分が作成した子フォルダに、
functions.phpとstyle.cssがセットに成っていることを
確認するようにお願いします。

---

今回は、かなり難しい内容でした。

ただ、クラウドワークスなどで、企業案件を請け負ったとき、

「自分はこの様にしたはずなんだけど、実際の表示が違う」

とか、「公開してみると表示が崩れた」などの場合、

企業側で設定しているPHPやCSSの影響によって、

自分がデザインしたページが、思い通りにいかない場合があります。

ただ、企業請負の場合、自分なりのCSSやPHPを設定するには、

必ず、企業側の了承を得てから行うようにお願いいたします。

右側の「高度な設定」には、HTMLアンカーや追加CSSクラスを入力できる欄があります。
HTMLアンカーは、ページ内ジャンプの飛び先を作るためのものです。
追加CSSクラスは、そのブロックにCSSを当てるための名前を付ける欄です。
ただし、「追加CSSクラス」にはCSS本体を書くのではなく、クラス名だけを書きます。

また、自分で、レンタルサーバーを借りて、

ブログやHP、ECサイトを立ち上げたいという方は、

レンタルサーバー側の規約に則って、

ある程度は、自由に、CSSやPHP、

ページに動きを付けたい場合にはjavascriptなどを活用して、

ほかのページより、目立つサイトを作ることが可能です。

レンタルサーバーの場合、基本的にPCとサーバーを繋いで、

ファイル転送が可能なソフトを提供しているところが多いので、

そのソフトを使用したほうが設定とかも判りやすいと思うので、

一番無難だと思います。

(申し訳ありませんが、javascriptに関しては、ご自分で勉強してくださいm(__)m)

---

HTMLやCSSに関しては、

できるだけ、わかりやすく書いているので、

ご参照頂けたら幸いです。

・ホームページを表示するには？
・HTMLって、どうやって使うの？
・主なHTMLタグ一覧
・WordPressって、どういうもの？
・WordPressとHTMLの対応は？
・CSSって、なにもの？
・CSSの使い方の詳細

キャリカク岡山：F.K.