[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の勉強が楽しいです

こちらもどうぞ

ブログの絵文字のサイズを小さくした【CSSのクラス指定】

教室のブログを見ていたら、気になる点が……わかりますか？絵文字の部分が不自然に大きいんです。しかも、灰色の枠までついている。ということで、CSSをちょっといじります。デベロッパーツー...

chiilabo.com

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がし...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。