2026年7月8日

WordPressのStylesheet（style.css）の基本構造

テーマ・デザイン

はじめに

WordPressのテーマ開発において、スタイルシート（style.css）は非常に重要なファイルです。このファイルには、Webサイトの外観を定義するCSSコードが含まれており、サイト全体の視覚的な要素を管理します。

症状・背景

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

テーマカスタマイズや新規テーマ作成を行う際
現行テーマのデザインに追加のスタイルを適用したいとき
サイトのデザインを一元化し、維持管理性を向上させたい時

手順・設定方法

ステップ1: WordPressテーマのスタイルシートファイルを開く

# ローカル環境にあるWordPressテーマフォルダに移動します。
cd /path/to/wordpress-theme-folder/

# style.cssファイルをエディタで開きます。ここではVisual Studio Codeを使用しています。
code style.css

ステップ2: シェイブヘッダー情報の追加

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme/
Author: John Doe
Author URI: https://johndoe.com/
Description: This is a custom theme for my website.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready, translation-ready, block-styles, editor-styles, custom-background, custom-colors, custom-header, custom-logo
*/

ステップ3: CSSルールの追加

# ヘッダー情報の下にCSSコードを追加します。
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

header {
    background-color: #007bff;
    color: white;
    padding: 20px;
}

ステップ4: テーマのCSSを更新して効果を確認する

# WordPressサイトで変更を適用します。
wp theme activate my-custom-theme

注意事項

バージョン管理: style.cssファイルに常に最新のテーマバージョン情報を追加すること。これにより、ブラウザキャッシュがクリアされ、新規CSSコードが効果的に反映されます。
保守性と可読性: CSSルールを適切なセクションに整理し、クラス名やIDを使用する際は意味のある名称を選ぶこと。これにより後の開発者が理解しやすく、メンテナンスも容易になります。
セキュリティ上の注意: 公開可能なCSSファイルでは敏感な情報（パスワード等）を含めないようにすること。また、外部からのJavaScriptの実行を防ぐためには、add_action('wp_head', 'wp_print_styles') を使用してスタイルシートの出力を制御します。
パフォーマンス/運用上の注意: オーバーカスタマイズや大量のCSSコードはページ読み込み時間を遅らせます。必要なスタイルだけを適用し、必要に応じてCSSの最適化（minification）を行うことを推奨します。

まとめ

1. テーマ情報の記載: シェイブヘッダーには必ずTheme Name, Description, Version, Author, Tagsなど基本的な情報を含めます。

2. CSSの構造化: CSSはセクションごとに整理し、必要なスタイルだけを適用します。これにより効率的で保守性の高いコードが作成できます。

3. 効果確認: 修正後は必ずWordPress管理画面からテーマを更新して最新の変更内容を確認してください。

4. セキュリティとパフォーマンス: バージョン情報の記載やCSS最適化など、サイトの安全性と速度向上に必要な対策を講じます。

5. 保守性と可読性: クリアな命名規則を使用し、コードは可能な限り簡潔に保つことが重要です。

Post Views: 2