2026-02-21

WordPressで自作CSSを全ページに反映する方法｜子テーマzipアップロード手順

概要

WordPressで自作CSSを全ページに反映する方法について解説していきます。

特定の投稿だけでなくサイト全体に共通のスタイルを当てたいとき、どこにCSSを書けばいいのか迷いますよね（- -;

というのもカスタマイザーの「追加CSS」に直接書く方法もあるんですが、テーマを変えたら消える上に量が増えると管理しづらいんですよね。

ちゃんと残してサイト全体に効かせたいなら子テーマ（functions.php＋style.css）を作ってzipでアップロードするのが王道です。

子テーマにしておけば親テーマの更新でCSSが消えることもなく、管理画面のテーマファイルエディターからいつでも追記・編集できるようになります。

ここではQiita風にh2見出しへ下線を引くCSSを例に、子テーマの作り方からzipアップロード・有効化・反映確認まで、つまずきやすいポイントを画像付きで一通り紹介していきます！

一度設定すれば管理画面から簡単に編集可能になります。
それではやっていきましょう！

全ページに反映するCSSの例（h2見出しに下線）

例があったほうが分かりやすいと思うので、
ここではQiitaみたいにh2要素に下線を引くCSSを全ページに適用したいと思います。

下記の画像の赤線部分に黒い下線を引きます。

WordPress子テーマでCSSを全ページ反映する手順

ここからは実際の作業手順です。
大きく分けて「クラス設定 → 子テーマ作成 → zip化 → アップロード → 有効化」の流れになります。

ひとつずつ画像付きで進めていきますね。

wordpressの記事にCSSのクラスを設定

CSSのクラスを設定します。

要素をクリックし、ブロックタブを選択します。
「追加CSSクラス」という項目があるので「head-line」と指定します。

フォルダ構成を作成

下記のようなフォルダ構成を作成します。

例では任意のフォルダ名を「mycss」という名前にしています。

フォルダ構成

1
2
3

[任意のフォルダ名]
 ├ functions.php
 └ style.css

function.phpを編集

function.phpの中身は下記のように記載します。

function.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

style.cssを編集

style.cssには定義したい例を中身を下記のように記載します。

例では、「wordpressの記事にCSSのクラスを設定」で定義した「head-line」のCSSを記載しています。

function.php

/*
Theme Name: [フォルダ名] (例：mycss)
Version: [任意のバージョン (例：1)]
Template: [WordPressのデザイン (例：Twenty Twenty-Five)]
*/
.head-line{
	border-bottom: 1px solid #cdcdcd
}