[WordPress] 記事一覧(トップページ)、投稿記事、固定ページでCSSを分ける方法

WordPress
投稿日:
カテゴリー WordPress HTML/CSS

WordPressで、記事一覧(トップページ)と投稿記事と固定ページでCSSを分ける方法を紹介します。

bodyタグにページを判別できるクラスがついているので、それを使ってCSSを分けることができます。

HTML

<!-- 記事一覧 トップページ -->
<body class="home blog (省略)">
<!-- 記事一覧 2ページ目 -->
<body class="home blog paged paged-2 (省略)">
<!-- 投稿記事 -->
<body class="post-template-default single single-post postid-3767 single-format-standard (省略)">
<!-- カテゴリ -->
<body class="archive category category-android category-13 (省略)">
<!-- 月別 -->
<body class="archive date (省略)">
<!-- 固定ページ -->
<body class="page-template-default page page-id-5890 (省略)">

CSS

/* 記事一覧 */
.home{    
}
/* 投稿記事 */
.single .post-thumbnail img{
    width: 100%;
    height: auto;
}
/* 固定ページ */
.page .post-thumbnail{
    display: none;
}

広告