【スポンサーリンク】

[Cocoon] 引用ブロックをすっきりさせた

ニッチな話題ホームページ運用

引用ブロックのデザインをすっきりさせました。

【スポンサーリンク】

前後のデザインの比較

もとはこんな感じで

こうしました。

引用符を枠線の外に出すことで、ちょっとすっきりしてませんか?

CSSコードはこちら

/**
 * 引用をすっきりさせた
 * */

.entry-content blockquote:before, .entry-content blockquote:after {
  position: absolute;
  width: 0.5em;
  color: #a08010;
  background: white;
}

.entry-content blockquote:before {
  height: 0.5em;
  left: -.1em;
  top: -0.2em;
}

.entry-content blockquote:after {
  right: -.1em;
  bottom: -0.6em;
  line-height: 1em;
}

.entry-content blockquote {
  border-color: #a08010;
  background: white;
  padding-top: 0;
  padding-bottom: 0;
}

ブロック要素に幅・高さがないと背景色をつけられない

ポイントとしては、block:before, block:afterの要素に幅と高さ(line-height, height)を設定して、塗りつぶし(background)をしました。

これに気づかず、なんども背景色を変更しては、うまくいきませんでした。

最近、CSSの勉強が楽しいです

こちらもどうぞ

QRコードを読み込むと、関連記事を確認できます。
[Cocoon] 引用ブロックをすっきりさせた
【スポンサーリンク】
タイトルとURLをコピーしました