ワードプレスのBodyタグには、現在表示中のページの種別のCSSクラスが自動で付与されます。このクラスを利用することで様々なスタイルをページの種類によって適応することが可能です。


Body タグのクラスの利用方法

ワードプレスの投稿単体表示ページにはsingleというクラスが自動付与されます。投稿ページの段落の文字サイズだけを変えたい場合、テーマのStyle.cssもしくはカスタマイザの追加CSSの欄に下記のように記載します。

.single p{
    font-size:22px;
}

このほかにも様々なクラスがページの概念によって自動付与されますのでその一覧を見ていきましょう。

ワードプレスのBodyタグに自動付与されるクラス一覧

特別な単ページにつくクラス

.home {}
ホームページ(トップページ)に自動付与されます

.blog {}
ワードプレスの表示設定でブログページに指定したページに自動付与されます

.error404 {}
404ページに自動付与されるクラスです

記事一覧ページにつくクラス

.archive {}
全ての記事一覧につくクラスです

.category {}
カテゴリーページにつくクラスです。 他にも .category-スラグ名 {} という形で、カテゴリーのスラグごとにもクラスが付与されます。

.tag {}
タグページにつくクラスです。 他にも .tag-スラグ名 {} という形で、タグのスラグごとにもクラスが付与されます。

.search-results {}
検索結果につくクラスです。検索結果が無い時は、このクラスと.search-no-results {} というクラスも付与されます。

.paged-ページ数 {}
ページングで送られた記事一覧にページ数とともに付与されます。

単記事の表示ページにつくクラス

.single
全ての投稿ページに付与されます。またpostid-ポストIDという形で投稿のIDのクラスも付与されます。

.page
全ての固定ページに付与されます。またpage-id-ポストIDという形で固定ページのIDのクラスも付与されます。

著者ページ

.author {}
表示中の著者ページ一覧に付与されます。また.author-ユーザーのニックネーム {} という形で個別の著者ページごとにクラスが付与されます。

WordPress ワードプレスの移行、カスタマイズ、制作のご相談・ご依頼はワードプレスドクターまでお気軽にお送りください