デザインを完成させる：WordPress特有のCSSスタイリング術

投稿日 2025年12月26日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーホームページ

骨組みができたら、最後は見た目を整えるCSSです。WordPressの自作テーマでは、単にデザインを当てるだけでなく、**「WordPressが出力する独自のクラス名」**を理解してCSSを書くのが、プロらしい仕上がりにするコツです。

それでは、**「WordPress特有のCSSの当て方と作法」**をまとめます。

WordPressでは、HTMLタグに自動的に多くのクラス名（class="..."）が付与されます。これらを利用することで、CSSファイルを1つ作るだけで「トップページだけ」「特定のカテゴリーだけ」といった細かいデザイン制御が可能になります。

1. 全体の司令塔：style.css の冒頭（テーマ情報）

自作テーマの style.css の一番上には、必ず以下のコメント（テーマヘッダー）を記述します。これがないとWordPressはテーマとして認識してくれません。

CSS

/*
Theme Name: My Original Theme
Author: Your Name
Version: 1.0
Description: 私の初めての自作テーマです。
*/

/* ここから下にCSSを書いていく */

2. body_class() を活用したページ別スタイリング

header.php で body_class(); を記述したのを覚えていますか？これにより、ページごとに異なるクラスが <body> に自動付与されます。

ページの種類	付与されるクラスの例	CSSでの指定例
トップページ	`.home`	`.home .main-title { ... }`
記事詳細	`.single`	`.single .entry-body { ... }`
固定ページ	`.page`	`.page .content { ... }`
ログイン中	`.logged-in`	`.logged-in .header { top: 32px; }`

ポイント: これにより、「トップページだけ背景を画像にする」「記事詳細だけ文字を大きくする」といった調整が、CSSファイル1つで完結します。

3. エディタが出力する標準クラスへの対応

WordPressの投稿画面（ブロックエディタ）で画像を配置したり、配置を「中央揃え」にしたりした際、テーマ側に専用のCSSがないと正しく表示されません。最低限、以下のクラスにはCSSを当てておきましょう。

CSS

/* 画像の配置（中央・左・右） */
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }

/* アイキャッチ画像や本文内の画像 */
img {
    max-width: 100%;
    height: auto;
}

/* ウィジェットのタイトルなど */
.widget-title {
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}

4. 管理バー（Admin Bar）への配慮

ログイン中に画面上部に表示される「管理バー」。これがあるせいで、ヘッダーを position: fixed; で固定していると重なって隠れてしまうことがあります。

そんな時は、.admin-bar クラスを使って調整します。

CSS

/* 管理バーが表示されている時だけ、ヘッダーの位置を下げる */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px; /* スマホではバーが少し太くなるため */
    }
}

5. functions.php での読み込み（再確認）

CSSを作成したら、前述の通り functions.php で正しく読み込ませましょう。

PHP

function my_theme_enqueue_styles() {
    // style.cssを読み込む
    wp_enqueue_style('main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');