本ブログのクオリティを上げる！　Lv3

前回に引き続き、以下の問題に対応していく！

• 画像のキャプションが主張しすぎ問題
• code記法がスタイリングされない問題
• 見出しH2が識別しにくい問題
• 余白が白の画像が視認しにくい問題

画像のキャプションが主張しすぎ問題

画像の下に付く、画像を説明する文章が主張しすぎて、本文の様に見えてしまう問題を解消する。
外観 → カスタマイズ → 追加CSS を選択してCSSを記入していく。

以下の様にキャプションをわかりやすくする様なCSSを追記した。

.wp-block-image figcaption {
	font-size: 75%;
	padding-top: 5px;
	opacity: 0.8;
	text-align: center;
}

キャプションとしてわかりやすくなった。

code記法がスタイリングされない問題

code記法というのは 「`」で囲んだ文字列の事。
こちらもCSSを追加する。

p code {
	display:inline-block;
	padding: 5px;
	border-radius: 3px;
	background-color: #EEE;
	margin-left: 3px;
	margin-right: 3px;
	box-shadow: 0px 0px 1px 0 inset;
	color: #F06500;
}

背景色と文字色を買えた。隠し味としてインナーシャドウを入れている。
以下の様に、見やすくなった！

見出しH2が識別しにくい問題

見出し(H2)が文字サイズが大きくなるだけなので、識別しにくい。目が滑る感覚がある（伝われ）

h2 {
	border-left: 5px solid #0060F0;
	padding-left: 13px
}

見出しの左に青いボーダーを入れる様にした。
見出しだという事がひと目でわかる様になった。

余白が白の画像が視認しにくい問題

画像の余白の色と、記事の背景色が一致していると画像が視認しにくいケースがある。これもまた目が滑る感覚がある（伝わってくれ）

.wp-block-image img {
	border: 1px solid #DDD;
}

画像の枠線をうっすら入れた。

所感

カスタマイズ画面のCSSを追加する機能が便利だなぁ
ライブプレビューできるのもアツい。