続・はてなブログのデザインCSS

この記事の続きです。

このブログのデザインテーマ Handwritingに自分のデザインCSSを追加して、さらに改良を行いました。

以下が今回追加したコード。

.entry-content p a[href] {
    color: #6ca0a3;
}

pre.code {
    border: none;
    background: #f6f6f6;
    /* border-radius: 2px; */
}

記事内のリンクの色とコード挿入部分の表示を変えました。

.entry-content p a[href]を指定して、記事内のリンクの色を変えました。はてなブログで自動的に作られるリンクの色を変えないために:not(.keyword)が必要かと思ったんですが、必要ありませんでした。
pre.codeを指定して、コード部分の囲み線を消して、背景色を設定しました。ちなみにコメントになっているborder-radiusは囲み線の角を丸くしていい感じにするものですが、コード部分の水平スクロールがかなり重くなったのでコメントアウトしました。(macOSのSafari 11で確認)

簡単に変えられました。嬉しい。

ところでリンクの色がサイト内で統一されていないというのは、デザインとして大丈夫なのでしょうか...

(追記) ゾクゾクする続きを書きました→続続・はてなブログのデザインCSSとtoc

つーさにブログ