スポンサーリンク

note風スタイル第5弾!引用とコード

note風デザインもそろそろ簡単な微調整です。

今回は引用文(blockquote)とコード(pre)のデザイン。

スポンサーリンク

ビフォア・アフター

元のデザインに比べて、小さくグレー基調にしました。

以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。

ただ、文字は少し小さいかもしれません。

こんな感じの引用。

こんな引用元
code is here {
   something.
}

引用ブロック

引用ブロックは、かなりスッキリしました。

.entry-content blockquote {
  padding: 5px 0.6em;
}

.entry-content blockquote p {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.entry-content blockquote {
  border: none;
  background: #f7f9f9;
  font-size: 85%;
  padding: 10px 20px;
}

.entry-content blockquote cite {
  line-height: 1em;
}

コードブロック

コードブロックもグレー基調にしました。あと文字サイズも少し小さくしています。

/* コード */
pre.wp-block-code {
	font-size: 80%;
	background: #f7f9f9;
	border: transparent;
	line-height: 1em;
}
タイトルとURLをコピーしました