Qiita

Qiitaをデザインする~見出しの下線を緑色にしてみた~

More than 1 year has passed since last update.

参考にさせて頂きました

http://qiita.com/krmtyshr/items/17a85c3a743c098416be

見出しの下線の色をタイトル画面の色と統一した方が美しいと思い、

CSSを変更するChrome拡張機能を作りました


見出しの下線を緑色に変える

こんな感じになります

qiita_headline_green_ex.png


CSS

/*記事の見出しの下線を緑色にします*/

article-body-wrapper .markdownContent h1{
border-bottom: solid 3px #79b74a;
}

article-body-wrapper .markdownContent blockquote {
margin-top: 1em;
margin-bottom: 1em;
margin-left: .8em;
padding: .8em;
border-left: solid 6px #79b74a;
color: #000;
font-size: 1em;
}

article-body-wrapper .markdownContent blockquote h1{
border-bottom: solid 3px #fff;

}

article-body-wrapper .markdownContent blockquote h2{
border-bottom: solid 3px #fff;

}

あと引用で左に横線が入るものは、下線を消したほうがオシャレだと思い、白色にしています。


使い方

https://github.com/mayutech/qiita_mhg

1.git cloneします

2.GoogleChrome拡張機能を開き

デベロッパーモードにチェック



「パッケージ化されていない拡張機能を読み込む…」から1.でcloneしたディレクトリを選択

qiita_headline_green_install.png


備考

リンクなどは、対応しておりません


おわりに

見出しが同じ色だと統一感があるレイアウトになって、読んでいても幸せになると感じています。

ぜひ使って頂けると嬉しいです!