[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をちょっといじります。 デベロッパーツールでCSSを確認する Chromeのデベロッパー...

chiilabo.com

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

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

chiilabo.com

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