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

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

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

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

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

WordPressのサイドバーで「外観」「カスタマイズ」を選択する
カスタマイズ画面で「追加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;
}

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

codeタグを見やすくスタイリングした状態

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

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

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

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

見出しの左に青いボーダーを入れた

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

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

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

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

余白の色と記事の背景色が同じケース。どこまでが文章で、どこまでが画像なのかがわかりにくい問題があった。

所感

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

「本ブログのクオリティを上げる! Lv3」への1件のフィードバック

コメントする