WordPressオリジナルテーマの投稿ページ（single.php）で設定しておくと良いCSSを紹介します。
この記事はリセットCSS（destyle.css）を使っている前提の記事になります。
目次
余白
SIM各要素の余白設定はマストです。
余白設定をしなくても見れないこともないのですが、かなり見苦しい見た目になります。
画像の余白
画像ブロックとその前後の要素との余白を設定します。基本的に前後にはpタグが配置されることが多いと思います。
// ------------------------------------
// 画像
// ------------------------------------
.single-post .l-main .l-section .wp-block-image {
padding-top: 2em;
padding-bottom: 2em;
}セレクター解説
- single-post：WordPressの投稿ページのbodyタグに自動的に付くclass属性
- wp-block-image：WordPressの投稿ページの画像ブロックに自動的に付くclass属性
- l-main：mainタグに私個人が付けたclass属性（必要に応じて変更して下さい）
- l-section：sectionタグに私個人が付けたclassクラス属性（必要に応じて変更して下さい）
上下にそれぞれ２文字分（2em）の余白を設けるとちょうど良い見た目になります。
段落の余白
段落と段落の間の余白を設けた方が読みやすくなります。
// ------------------------------------
// 段落
// ------------------------------------
.single-post .l-main p {
margin-bottom: 1em;
}セレクター解説
- single-post：WordPressの投稿ページのbodyタグに自動的に付くclass属性
- l-main：mainタグに私個人が付けたclass属性（必要に応じて変更して下さい）
- p：pタグ
下に１文字分（１em）の余白を設けるとちょうど良い見た目になります。
CodePenブロックの余白
同様にCodePenをブログに貼り付ける場合にも余白を設定しておくと見た目が向上します。
// ------------------------------------
// CodePen余白
// ------------------------------------
.cp_embed_wrapper{
margin-top: 2em;
margin-bottom: 2em;
}セレクター解説
cp_embed_wrapper：CodePen専用のクラス属性（Chomeのデベロッパーツール等で確認できます）
aタグ
SIMリセットCSSによっては、aタグの書式も消えますので対応が必要です。
// ------------------------------------
// aタグ
// ------------------------------------
.single-post .l-main a{
color: fw.$btn-blue;
}セレクター解説
- single-post：WordPressの投稿ページのbodyタグに自動的に付くclass属性
- l-main：mainタグに私個人が付けたclass属性（必要に応じて変更して下さい）
- a：aタグ
上のCSSではaタグの文字色を青系に設定し直しています。
上のCSSはFLOCSSで書いていますので、独自の関数で文字色を指定しています。コピペしても反映しないので、ご自分の環境に合わせて文字色を指定して下さい。
その他の投稿ページのCSS変更
他の記事にも投稿ページ（single.php）で設定しておくべきCSSを個別に紹介しているのでご参照下さい。
あわせて読みたい
【WordPress】投稿ページリスト「ul, ol」タグのCSS変更【オリジナルテーマ】
WordPressオリジナルテーマ投稿ページでul, olタグのCSS変更の方法を紹介します。 方法自体は、Chromeのデベロッパーツールでulおよびolタグのクラス属性を特定して、そ...
あわせて読みたい
【WordPress】投稿ページTableのCSS変更方法【オリジナルテーマ】
WordPressオリジナルテーマで表のCSSを変更して見やすくする方法を紹介します。 方法自体は、Chromeのデベロッパーツールで表のクラス属性を特定して、そこにCSSを当て...
あわせて読みたい
【WordPress】投稿ページサムネイルのPHP・CSS設定【オリジナルテーマ】
WordPressオリジナルテーマでレスポンシプでバグらない投稿ページのPHP・CSS設定を紹介します。 投稿ページのPHP｜single.php 投稿ページのメインコンテンツ部分の抜粋P...
