WordPressで記事・カテゴリ・タグ一覧・固定ページ毎にデザイン変更するCSS

特定のページだけ・カテゴリ毎・固定ページだけ・記事単位…などでデザインを変えたいとき、WordPressではCSSだけで指定することが可能です。

デフォルトテーマ・Cocoon・Simplicity、ほか有料テーマなどでも、CSSで指定できるid・classがHTML上で準備されてるのを見かけます。

ヘッダー画像・背景・記事内の見出しなどカテゴリ・記事毎に変更したいとき、便利な指定方法なのでチェックして思い通りデザインしてくださいね＾＾

記事・カテゴリ・タグ、新規作成時つけられたIDの確認方法

記事やカテゴリ・タグを作成したとき必ず固有のIDが付き、それを指定し装飾するのでIDの確認方法から説明しますね。

それぞれ2通りの方法が簡単ですので、やりやすい方でチェックしてください。

投稿記事ID、確認方法

管理画面の投稿－投稿一覧より装飾したい該当記事タイトルにマウスを置けばIDの数字が確認できる。

管理画面で該当記事を開きURLをチェックしても記事IDがわかります。

• 投稿記事ID：440

https://domain.com/wp-admin/post.php?post=440&action=edit

固定ページID、確認方法

管理画面の固定ページより該当記事のIDを確認。オンマウスでもIDである数字が表示されます。

管理画面で固定ページを開いても同様、URLでもIDが確認できる感じです。

• 固定ページID：664

https://domain.com/wp-admin/post.php?post=664&action=edit

カテゴリID、確認方法

管理画面の投稿－カテゴリーより該当カテゴリIDは、オンマウスでIDの数字が表示されるし、管理画面上でカテゴリページを開いても同様、URLをみれば確認できます。

• カテゴリID：30

https://domain.com/wp-admin/term.php?taxonomy=category&tag_ID=30&post_type=略

タグID、確認方法

管理画面の投稿－タグよりタグIDをonマウスで確認できるし、該当タグを管理画面上で開きURLを見ても確認できます。

• タグID：93

https://domain.com/wp-admin/term.php?taxonomy=post_tag&tag_ID=93&post_type=略

投稿記事毎にページのスタイル変更するCSS指定方法

投稿記事IDが分かれば、CSSで指定するだけでOK！

指定した記事ID領域内にあるheaderやfooter・side・コンテンツの領域など…テーマにあった指定でstyleを書くだけです。

.postid-440 のように.postid-IDの数字半角スペーステーマにあったセレクタ

.postid-440 .article h2 {
	color: #fff;
	/* こんな感じでスタイルをツラツラ */
}

以下のように記事単位で見出しを変更することも可能です。

固定ページ毎にスタイル変更するCSS

.page-id-440 のように.page-id-IDの数字半角スペーステーマにあったセレクタ

.page-id-** #header a > img {
	/* ここにスタイル */
}

LINK：Cocoon用ヘッダー画像をページ毎に変更する方法：後日作成

すべての固定ページを変更するCSS

.page 半角スペーステーマにあったセレクタ

.page #header a > img {
	/* ここにスタイル */
}

カテゴリ毎にスタイルを変更

.categoryid-57 .article h2:before {/*ここにスタイルを*/}

.categoryid-57 .article h2:before {
	/* ここにスタイルを */
}

すべてのカテゴリ一覧ページを変更

.category 半角スペーステーマにあったセレクタ

.category .article h2:before {
	/* ここにスタイルを */
}

該当カテゴリに属する全ての投稿ページのみ指定

.single.categoryid-****にはカテゴリIDを。半角スペーステーマにあったセレクタ

.single.categoryid-** .article h2:before {
	/* ここにスタイルを */
}

トップページのみスタイルを変更したい

.home半角スペーステーマにあったセレクタ

.home #sidebar {
	/* ここにスタイルを */
}

タグページ一覧毎にスタイルを変更

.tag.tag-***半角スペーステーマにあったセレクタ

***は該当タグのID

.tag.tag-*** #sidebar {
	/* ここにスタイルを */
}

全てのタグページのスタイルを適用したい

.tag半角スペーステーマにあったセレクタ

.tag #sidebar {
	/* ここにスタイルを */
}

ページ内検索したときのスタイル変更

.search半角スペーステーマにあったセレクタ

.search #sidebar {
	/* ここにスタイルを */
}

ページ毎に背景画像を変更する場合

WordPress機能、外観－カスタマイズ－背景画像から設定できる詳細なスタイル指定方法を以下リンクで紹介してます。

上述の指定方法にプラスして、ページ毎・カテゴリを含む記事毎に画像背景の変更方法などチェックしてくださいね。

LINK：WordPress！ページ・カテゴリ毎に背景画像を変更CSSほぼコピペ

さいごに

ページ単位でメッセージを追加したい場合もあるかと思います。

• 検索から流入したユーザーさんに、直接話しかける感覚

PHPを触って出力を変える方法が便利ですので、以下ページを参考にしてください。

LINK複数カテゴリ・記事のPHP条件分岐！WordPress分岐タグif文・条件式の書きかた

検索流入が多いページを運営されてるかたは、工夫しだいで検索ユーザーさんとの距離感が縮められるかもしれませんね＾＾

それでは。かうたっくでした❦