投稿ページ（single.php）やカスタム投稿タイプ（single-$slug.php）のCSSを変更する方法と参考コードを紹介します。
サムネイル画像
サムネイルはsingle.php等のテンプレートファイルでは、下記のようにラップするタグにしか任意のclass属性を付けることができません。
<!-- サムネイル表示 -->
<div class="single-thumbnail-wrapper">
<?php the_post_thumbnail(); ?>
</div>では、その子要素のimgタグはどのように指定すれば良いのか？
それは、WordPress関数「the_post_thumbnail();」で読み込まれたimgタグには「wp-post-image」のclass属性が自動的に付与されますので、それに対してCSSセレクターを書けばOKです。
具体的には下の参考コード「.single-thumbnail-wrapper > .wp-post-image」のように書けばCSSセレクターとして機能します。
補足すると、「>」記号がある際には直下の子要素を指定できます。
// ------------------------------------
// サムネイルの設定
// ------------------------------------
.single-thumbnail-wrapper {
margin-top: 50px;
margin-bottom: 50px;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
@include fw.mq("sp") {
margin-top: 30px;
margin-bottom: 30px;
border-radius: 5px;
}
}
.single-thumbnail-wrapper > .wp-post-image {
width: 100%;
height: 100%;
max-width: 700px;
max-height: 394px;
object-fit: cover;
}画像
WordPressの管理画面の投稿ページ・ブロックエディターで挿入した画像に対しては、下記「.single-post .l-main .l-section .wp-block-image」のようにCSSセレクターを書きます。
CSSの変更点はimgタグ上下の余白です。
// ------------------------------------
// 画像
// ------------------------------------
.single-post .l-main .l-section .wp-block-image {
padding-top: 2em;
padding-bottom: 2em;
}- class=”single-post“：single.phpのbodyタグに自動的に付与される
- class=”wp-block-image“：投稿ページのブロックエディターで挿入した画像に自動的に付与される属性
- .l-main .l-section：mainタグとsectionタグに私がつけたclass属性、適宜変更して下さい。私のケースではこれらをCSSセレクターに含めて詳細度を上げないとCSSが効きませんでした。必要なければ省略可。
段落
WordPressの管理画面の投稿ページ・ブロックエディターで挿入した段落に対しては、下記「.single-post .l-main p」のようにCSSセレクターを書きます。
「.single-case .l-main p」は、カスタム投稿タイプのセレクターです。カスタム投稿タイプ（single.-$slug.php）のbodyタグにも同様にclass属性「single.-$slug」、この場合は「.single-case」が自動的に付与されます。
l-mainは私がmainタグにつけたclass属性です。適宜変更するか、必要なければ省略して下さい。
CSSの内容はpタグ前後のmargin（余白）を指定してます。
// ------------------------------------
// 段落
// ------------------------------------
.single-post .l-main p,
.single-case .l-main p {
margin-bottom: 30px;
@include fw.mq("sp") {
margin-bottom: 14px;
}
}aタグ（リンク付きテキスト）
WordPressの管理画面の投稿ページ・ブロックエディターで挿入した段落に対しては、下記「.single-post .l-main a」のようにCSSセレクターを書きます。
CSS変更点はaタグの文字色です。
.single-post .l-main a,
.single-case .l-main a {
color: fw.$blue-main;
}リスト表示
下記のようにリスト表示を変更する場合のCSSを紹介します。
ul olリスト共通
WordPressの管理画面の投稿ページ・ブロックエディターで挿入したリスト（ulおよびol）も上と同様にCSSセレクターを書きます。
下記は参考コードです。
// ------------------------------------
// ul olリスト共通
// ------------------------------------
.single-post .l-main .l-section ul,
.single-post .l-main .l-section ol,
.single-case .l-main .l-section ul,
.single-case .l-main .l-section ol {
padding: 24px 36px 24px 58px;
margin-bottom: 30px;
border-radius: 10px;
background-color: rgba(fw.$blue-base, 50%);
@include fw.mq("tab") {
padding: 24px 36px 24px 58px;
}
@include fw.mq("sp") {
padding: 20px 20px 20px 44px;
margin-bottom: 14px;
}
}
.single-post .l-main .l-section ul li,
.single-post .l-main .l-section ol li,
.single-case .l-main .l-section ul li,
.single-case .l-main .l-section ol li {
line-height: 1.8;
margin-bottom: 10px;
position: relative;
}
.single-post .l-main .l-section ul li:last-of-type,
.single-post .l-main .l-section ol li:last-of-type,
.single-case .l-main .l-section ul li:last-of-type,
.single-case .l-main .l-section ol li:last-of-type {
margin-bottom: 0px;
}
.single-post .l-main .l-section ul li::after,
.single-case .l-main .l-section ul li::after {
content: "";
position: absolute;
display: inline-block;
background-color: fw.$blue-main;
border-radius: 50%;
height: 12px;
width: 12px;
left: -22px;
top: 8px;
}ulリスト
デフォルト表示の無効化
.single-post .l-main .l-section ul,
.single-case .l-main .l-section ul {
list-style-type: none;
}olリスト
シンプルな数字のみ「1. 2. 3. ….」に変更
.single-post .l-main .l-section ol,
.single-case .l-main .l-section ol {
list-style-type: decimal;
}表
下の表のように表示を変更するCSSを紹介します。
CSS変更点は表の幅・前後の余白・左のセル幅・セル内の余白（padding）・表の１行目の背景色と文字の太さ・罫線の色です。
CSSセレクターは上のようにWordPressがsingle.phpで自動的に付与するclass属性を利用しつつ記述していきます。
具体的には、下の例では、下の２つと他の自分でつけたclass属性などを合わせてCSSセレクターを記述しました。
- single-post：WordPressがsingle.phpのbodyタグに自動的に付与するclass属性
- wp-block-table：WordPressがsingle.phpのtableタグに自動的に付与するclass属性
// 表の幅・下余白
.single-post .l-main .l-section .wp-block-table,
.single-case .l-main .l-section .wp-block-table {
table-layout: fixed;
width: 100%;
max-width: 700px;
margin-bottom: 30px;
@include fw.mq("sp") {
margin-bottom: 14px;
}
}
// 左側セルの幅
.single-post .l-main .l-section .wp-block-table td:first-of-type,
.single-case .l-main .l-section .wp-block-table td:first-of-type {
width: 30%;
}
// セルのパディング
.single-post .l-main .l-section .wp-block-table td,
.single-case .l-main .l-section .wp-block-table td {
padding: 10px 20px;
@include fw.mq("sp") {
padding: 10px;
}
}
// 表の１行目の背景色と文字の太さ
.single-post .l-main .l-section .wp-block-table tr:first-of-type,
.single-case .l-main .l-section .wp-block-table tr:first-of-type {
background-color: rgba(fw.$blue-base, 50%);
font-weight: 600;
}
// 罫線の色
.wp-block-table td,
.wp-block-table th {
border-color: fw.$gray-3;
}
