はてなブログでコードブロックをコンソール風（背景色が黒）にするCSSカスタマイズ

はてなブログテーマInnocentでコードブロックの背景を黒にするCSSカスタマイズを紹介します。

はてなブログテーマInnocentのカスタマイズを行うことでコンソール風の表示を狙います。

マークダウン記法で記事を書いていますが、このカスタマイズ方法のお陰でプログラミングコードをすっきりと表示させることができています。

はてなブログテーマInnocentデフォルトのコードブロック表示
外部CSSファイルにCSSカスタマイズを記述
1. CSSカスタマイズ方法

f:id:hal7pi:20191218213221j:plain

はてなブログテーマInnocentデフォルトのコードブロック表示

はるなぴは、はてなブログテーマInnocentを使用しています。

Innocentというテーマはとても良くできていますが、CSSカスタマイズすることを前提に作ってあるようです。装飾は控えめです。

コードブロックもそのひとつです。デフォルト表示では囲み枠の中に記述されるのみです。少し見にくいです。

もっとカッコよく背景を黒、文字色を白にしてコンソール風の表現にしてみます。

外部CSSファイルにCSSカスタマイズを記述

CSSカスタマイズは外部ファイルから行うのが簡単でお勧めです。

外部CSSファイルによるCSS設定はこちらの記事をご参照ください。メリットもたくさんありますので大変お勧めです。

www.halu7.com

CSSカスタマイズ方法

外部CSSファイルに次のCSSを記述します。

pre, .entry-content pre {
  margin: 0 0 20px;
  padding: 0
}

pre > code, .entry-content pre > code {
  font-size: 1.1em;
  margin: 0;
  font-family: monospace;
  padding: 10px 15px;
  box-sizing: border-box;
  display: block;
  background: #1f1f1f;
  color: #fafafa;
  overflow: auto;
  white-space: pre
}