2026年10月6日

WordPressテーマのCSSをカスタマイズする方法

テーマ・デザイン

はじめに

WordPressテーマは、ウェブサイト全体の外観とスタイルを決定する重要な要素です。デフォルトでは豊富な機能が用意されていますが、さらなるカスタマイズが必要になることもしばしばです。CSS（Cascading Style Sheets）を使用してテーマをカスタマイズすることで、サイトの見た目を思い通りに調整できます。

症状・背景

このテーマが必要になる主な場面:

ブログ記事やページのレイアウトを独自に設計したい場合
サイト全体のデザインを統一し、ブランドイメージを強調したい場合
特定の要素（ヘッダー、フッター等）だけを取り出してカスタマイズしたい場合

手順・設定方法

ステップ1: カスタムCSSファイルを作成または編集する

# テーマディレクトリ内のスタイルシートを探します。
ls wp-content/themes/your-theme-name/

# 現在のスタイルシートをバックアップします。
cp wp-content/themes/your-theme-name/style.css wp-content/themes/your-theme-name/style-backup.css

# カスタムCSSファイルを作成または編集します。
nano wp-content/themes/your-theme-name/custom-style.css

ステップ2: テーマのfunctions.phpにカスタムスタイルを追加する

# functions.phpファイルを開きます。
nano wp-content/themes/your-theme-name/functions.php

# カスタムCSSファイルをテーマで読み込むように設定します。
function custom_theme_styles() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/custom-style.css' );
}
add_action('wp_enqueue_scripts', 'custom_theme_styles');

ステップ3: CSSセレクタとプロパティを調整する

# カスタムスタイルファイルを開きます。
nano wp-content/themes/your-theme-name/custom-style.css

# 既存のCSSプロパティを上書きします。
body {
    background-color: #f5f5f5;
}

# 新しいセレクタとプロパティを追加します。
header .site-header {
    background-image: url('https://yourdomain.com/images/header-bg.jpg');
    padding-top: 30px;
}

ステップ4: テーマのカスタマイズオプションを使用する

# functions.phpファイルを開きます。
nano wp-content/themes/your-theme-name/functions.php

# カスタマイズオプションを追加します。
function custom_theme_options() {
    $options = array(
        'header_color' => array('default' => '#000', 'type' => 'color'),
        'body_font_size' => array('default' => 16, 'type' => 'number')
    );
    return $options;
}
add_filter( 'custom_theme_options', 'custom_theme_options' );

# カスタムCSSを生成します。
function custom_css() {
    $header_color = get_option('header_color');
    echo ".site-header {background-color: {$header_color};}";
}
add_action('wp_head', 'custom_css');

注意事項

バックアップ: 変更する前に必ずテーマのスタイルシートをバックアップしてください。
CSSの学習: CSSが十分に理解できていない場合、予期しない結果が発生することがあります。CSSの基本的な知識が必要です。
セキュリティ上の注意: カスタムCSSファイルは公開領域に配置する必要がありますが、その内容にはアクセス制限をかけることが重要です。
パフォーマンス/運用上の注意: 大量のCSSルールを使用するとページ読み込み速度が遅くなる可能性があります。必要最小限のCSSのみ使用することをお勧めします。

まとめ

1. バックアップ: テーマファイルを変更する前に必ずバックアップを取ること。

2. カスタムCSSファイル: カスタマイズが必要なスタイルだけを別のファイルにまとめて管理すること。

3. セレクタとプロパティの調整: 既存のCSSルールを上書きしたり、新しいルールを追加したりすることでデザインを変更する。

4. カスタマイズオプション: カスタムCSSをテーマの設定からコントロール可能にするためのコードを追加すること。

5. パフォーマンス最適化: 重複や不要なCSSルールを削除し、読み込み時間を改善する。