WordPressで指定記事のみに対応するCSSの書き方

はじめに

WordPressには、ブログスタイルの記事投稿と、固定ページの２種類があり、それらすべてに固有のIDが振られています。

以下の単位で個別に指定のデザインを適用したい場合のCSSについて解説します。

利用しているテーマの以下のいずれかにCSSを追記。

子テーマのスタイルシート（style.css）

Cocoonの例

外観カスタマイザーの追加CSS

テーマによっては、各ページごとにCSSを追記できるエリアがある場合があり、そのページでしか利用しないデザインは、そこに記述した方が無駄がありません。

大抵は、記事編集画面の下部にあります。表示されていなくても機能があれば表示オプションの中にあるのでチェックをすると表示されます。

Cocoonの例：表示オプション

記事編集画面でCSS記述

Cocoonの例

ルクセリタスの例

Cocoonとルクセリタスの場合の例ですが、テーマによって記述方法も異なるので注意です。

テーマ	記述場所	記述方法
Cocoon	カスタムCSS	style、scriptタグ不要
ルクセリタス	追加ヘッダー	`<style></style>`、`<script></script>`で囲む

固定ページすべてが対象。

.page{}

投稿記事すべてが対象。

.post{}

特定の記事のみの場合は、記事個別のIDで指定します。

固定ページの場合　.page-id-x
投稿記事の場合　.postid-x

x の部分にIDを指定。固定ページの場合 page と id の間にはハイフン（-）がありますが、投稿ページには post と id の間ハイフンなしなので注意！

複数ページの場合は、セミコロン（,）で区切って記述。

.poge-id-x .author-info, .postid-x .author-info

個別IDが不明な場合は以下を参考にして調べてください。
WordPress　ページやカテゴリー・タグの固有IDの調べ方

/*固定ページ*/.page-id-x
/*投稿記事ページ*/.postid-x

[x」部分を記事の固有IDに変更するのをお忘れなく！（例：この記事なら 28820 ）

.home.page

それぞれの使い方サンプルは以下を参考にして下さい。

綾糸: 綾糸　主婦 1990年代、汎用機時代のエンジニア趣味で長くやっていたweb制作は、未だにエディタでの手コーティング現在は自宅でゆるりとweb制作やライターをしています