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

  • 4
    Like
  • 0
    Comment

参考にさせて頂きました
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

備考

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

おわりに

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

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