記事のデザインをカスタマイズする(引用編)

直したい箇所

引用のデザイン

理由

希望としては、GitHubのような引用の見え方にしたい
理想:
現状:
エンジニアの人ならわかってくれると思うが圧倒的これじゃない感がある。

じゃあ違うテンプレ使えよって思うが、そこまでCSSを触りたいわけじゃない。 (このテンプレが一番スニペットが見やすかったんや。。)

修正していく

プロパティ

現状確認

まずは採用テンプレにおいて、引用にどのプロパティが使われているのか知る必要がある。
Chromeで検証したぞ。

blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

これな気がする。
CSSから逃げてきた人生だったからいまいち確証は持てない。
やっぱり違かった。 これはデフォルトのCSS(user agent stylesheet)でみるべき対象じゃなかった。

.entry blockquote {
    padding: 15px;
    margin: 1em 0;
    border: 1px solid #ddd;
}

こっちだった。

理想確認

blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
}

考えてもわからないのでとりあえず実際に適用してみる。
このテンプレはこのテーマのcssをimportしてて上書きできないかも。。。と懸念を抱きながらやってみる。
importの優先度は最低だとのこと。(参照: 段階化の順序｜前提知識｜CSS2.1)

修正

cssは以下のようになった。

@import "/css/theme/bordeaux/bordeaux.css";

.entry blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

変更が反映され、ちょっとだけGitHubらしくなった。

修正後

user agent styleseetって何なの。公式から引っ張ろうと思ったけど見つけれなかったので、以下から引用 www.webernote.net

これはブラウザごとに定義されたデフォルトのCSS設定。

ネクスト

現状見出しレベルを変えてもあまり違いがわからないから、h2, h3, h4... のプロパティの修正を行う。