【CSS実装】WordPress特定ページのUIをピンポイントで変更する方法 | web-seisaku.jp

今回の実装目標
特定カテゴリーのサムネイル画像を非表示にする

【CSS実装】WordPress特定ページのUIを
ピンポイントで変更する方法

web-seisaku.jp 専門家チーム

WordPressサイトを運用する中で、特定の条件下でのみUIを調整したいというニーズは頻繁に発生します。

  • 「”お知らせ”カテゴリーのアーカイブページでは、サムネイル画像を非表示にしてテキストリスト形式にしたい」
  • 「サイト全体のデザインは維持しつつ、特定の固定ページだけレイアウトを微調整したい」

これらの要件に対し、プラグインを追加したり、テーマのPHPファイルを直接編集したりする方法は、サイトのパフォーマンス低下やアップデート時の互換性問題といったリスクを伴います。

そこで本記事では、ブラウザの検証ツールとWordPressの「追加CSS」機能のみを利用し、安全かつ軽量に特定のUIをピンポイントで変更する技術を解説します。

今回の実装目標：
特定カテゴリーのサムネイル画像を非表示にする

本稿では、一般的なブログ形式の記事一覧から、特定のカテゴリー（例：「お知らせ」）のアーカイブページにおいて、下図のようにサムネイル画像（アイキャッチ）のみをCSSで非表示にする手順を解説します。

[画像：アイキャッチ画像が表示されている通常の一覧ページ]

↓

[画像：アイキャッチ画像が非表示になっている、スッキリした一覧ページ]

この手法は、他のページや要素のスタイリングにも応用可能です。

実装手順：
CSSセレクタの特定とスタイルの適用

実装は以下の3つのステップで完了します。

  1. 対象ページの特定：bodyタグのクラスを調査
  2. 対象要素の特定：非表示にしたい要素のクラスを調査
  3. 実装：WordPressカスタマイザーでCSSを記述
Step 1. 対象ページの特定：`body`タグのクラスを調査

まず、スタイルを適用したいページを特定するための「識別子」を見つけます。WordPressは、表示しているページの種類に応じて<body>タグにユニークなクラスを自動的に付与するbody_class()という関数を備えています。これを利用します。

  1. PCのWebブラウザ（Google Chrome推奨）で、対象のカテゴリーページ（例：「お知らせ」一覧）を開きます。
  2. ページ上の何もない領域で右クリックし、メニューから「検証」を選択します。画面の右または下に開発者ツール（デベロッパーツール）が開きます。
  3. Elements（要素）パネル内で、上部にある<body class="...">という記述を探します。
  4. class属性の中に、category-{slug}またはcategory-{ID}という形式のクラスが存在することを確認します。例えば、「お知らせ」のスラッグがnewsであればcategory-newsといったクラスが見つかります。これが、このページ専用の識別子となります。このクラス名を控えておきます。
[画像：開発者ツールが開き、bodyタグとユニークなクラス部分がハイライトされているスクリーンショット]
Step 2. 対象要素の特定：非表示にしたい要素のクラスを調査

次に、非表示にしたい要素（今回はサムネイル画像）を特定します。

  1. 開発者ツールを開いたまま、非表示にしたいサムネイル画像の真上で右クリックし、再度「検証」を選択します。
  2. 開発者ツールが、該当する<img>タグの箇所をハイライト表示します。今回は画像単体ではなく、画像を含むコンテナ要素ごと非表示にすることで、レイアウト崩れを防ぎます。
  3. ハイライトされた行の少し上を辿り、<img>タグを内包している<figure>や<div>といった親要素を探します。これらの要素に付与されているクラス名（例: .post-thumbnail, .eyecatchなど）を、先頭のドット（.）を含めて控えます。これがスタイリング対象の要素セレクタとなります。
[画像：開発者ツールで、画像を内包する親要素のクラス名がハイライトされているスクリーンショット]
Step 3. 実装：WordPressカスタマイザーでCSSを記述

特定した2つのセレクタを使い、WordPressにCSSを記述します。

  1. WordPress管理画面から「外観」>「カスタマイズ」を選択します。
  2. カスタマイザーメニューから「追加CSS」をクリックします。
  3. 表示された入力エリアに、以下のテンプレートをコピー＆ペーストして、控えておいたクラス名に書き換えます。

【CSSテンプレート】

/* スタイルの目的をコメントとして記述推奨 */
body.【Step1で控えたクラス名】 【Step2で控えたクラス名】 {
    display: none !important;
}

【記述例】
bodyのクラスがcategory-news、画像のコンテナ要素のクラスが.post-thumbnailだった場合、以下のようになります。

/* お知らせカテゴリーのサムネイルを非表示 */
body.category-news .post-thumbnail {
    display: none !important;
}

このコードは、「category-newsクラスを持つbody要素の子孫要素である.post-thumbnailクラスを持つ要素を非表示にする」という命令です。

正しく記述できると、右側のプレビュー画面でリアルタイムに変更が反映されます。変更を確認後、必ず「公開」ボタンをクリックして設定を保存してください。

スタイルが適用されない場合の
対処法

使用しているテーマによっては、要素のクラス名が異なる場合があります。スタイルが適用されない場合は、以下のコードをコピーし、【Step1で控えたクラス名】の部分のみを書き換えて試してみてください。

/* 各種テーマで一般的に使用されるセレクタの例 */
body.【Step1で控えたクラス名】 .articleList__item--fig,
body.【Step1で控えたクラス名】 .post-thumbnail,
body.【Step1で控えたクラス名】 .eyecatch,
body.【Step1で控えたクラス名】 .c-entry-summary__figure {
    display: none !important;
}

※注: !importantは、テーマ側で定義されているスタイルを強制的に上書きするための宣言です。多用はCSSの管理を複雑化させるため、限定的な使用に留めることが推奨されます。

まとめ

本稿で解説した手法は、以下の点で非常に優れています。

  • 軽量性: プラグインを追加しないため、サイトパフォーマンスへの影響がありません。
  • 安全性: テーマファイルを直接編集しないため、アップデート時に変更が上書きされる心配がありません。
  • 汎用性: サムネイル画像の非表示だけでなく、文字色や余白の調整など、あらゆるUIの微調整に応用できます。

開発者ツールでページの構造を解析し、CSSでスタイルを適用するスキルは、Webサイトの表現力を向上させる上で不可欠です。この基本的なプロセスを習得し、より柔軟で効果的なサイト運用を実現してください。