2026-02-21

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

概要

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

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

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

ここではQiita風のh2見出しに線を引くCSSを例に、子テーマの作り方からzipアップロードまでの手順を画像付きで紹介していきます！

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

目次

• 適用するCSSの例
• 手順
  • wordpressの記事にCSSのクラスを設定
  • フォルダ構成を作成
  • function.phpを編集
  • style.cssを編集
  • フォルダを圧縮
  • 圧縮したファイルをwordpressに追加
  • テーマを有効化
  • CSSが反映されていることを確認
• EX）CSSを追加・編集したい場合
  • ファイルエディタからCSSを編集
• 締め

適用するCSSの例

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

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

wordpress CSS適用 例

手順

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

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

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

wordpress CSSのクラスを設定

フォルダ構成を作成

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

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

フォルダ構成

[任意のフォルダ名]
 ├ 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
}

コメントアウトされている個所は自分の環境に合わせて変更してください。

• Theme Name
  • CSSが置いてある任意のフォルダ名
• Version
  • 任意のバージョン名。最初は1.1とかでよいと思う
• Template:
  • WordPressのデザイン

「WordPressのデザイン」はwordpressの「管理ページ → 外観 → テーマ」で確認できます。

wordpressのデザインの確認

フォルダを圧縮

CSSとPHPファイルが置かれているフォルダを圧縮します。
フォルダごと圧縮すればOKです。

フォルダの圧縮

下記のようにzipファイルが作成されていればOK！

フォルダの圧縮

圧縮したファイルをwordpressに追加

「管理ページ → 外観 → テーマ」から「テーマの追加ボタン」を押下

wordpress 自作テーマの追加

テーマのアップロードを押下

wordpress 自作テーマのアップロード

ファイルを選択し、今すぐインストールを押下

wordpress 自作テーマのインストール

下記のように「テーマのインストールが完了しました。」と表示されたら完了

wordpress 自作テーマのインストール完了

テーマを有効化

「管理ページ → 外観 → テーマ」から先ほど追加したテーマの有効化ボタンを押下します。

wordpress 自作テーマの有効化

CSSが反映されていることを確認

作成したCSSがサイトの全体に適用されていることを確認します。

自分と同じようなCSSを適用した方は、「head-line」クラスを設定した要素に
下線が引かれていると思います。

wordpress 自作テーマの反映確認

EX）CSSを追加・編集したい場合

ファイルエディタからCSSを編集

「管理ページ → 外観 → テーマファイルエディター」を開き表示されたCSSを編集します。

下記のように先ほど適用したCSSが表示されるので普通に編集すればOKです。

wordpress 自作テーマの反映確認

今回は試しにした線を10pxに変更してみました。
CSSの編集が完了したら、下のほうに「ファイルを更新ボタン」があるので押下しましょう。

wordpress 自作テーマの反映確認

サイトを改めて確認すると変更したCSSが適用されていると思います。

wordpress 自作テーマの反映確認

一度CSSを適用すればあとは簡単に変更できるのでとても便利ですね（^^b

締め

こんな感じで自分のCSSを無事設定できました！

最初は少し面倒ですが一度登録すれば、
ワードプレスの管理画面からファイルエディタを使用して簡単に編集可能です。

毎回すべてのブロックにCSSを適用するよりは断然楽だと思うので、どうせならやっておきましょう！

自分のブログではこんな感じでブログの運用ノウハウやエンジニアとして学んだ知識を発信しております。
是非他の記事も見ていってもらえると嬉しいです。

以上
wordpressでも結局CSSを書くことになりました。やはり学んで正解だった！
お疲れさまでした。

この記事をシェア X B! f

« 前の記事 映画 僕の心のヤバイやつの評価と感想（ネタバレ無し） 次の記事 » WordPressの上部の黒いバー（ツールバー）を消す方法｜ユーザー設定1つ

エンジニアリング

ブログ, エンジニアリング, windows