はるなぴログ

WEBサイト作成技術研究

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

はてなブログテーマInnocentでコードブロックの背景を黒にするCSSカスタマイズを紹介します。背景を黒、文字色を白にすることによってコンソール風の表現を狙います。

はるなぴはコンソール表示がいちばんプログラミングしている感じが出ていて好きです。

f:id:hal7pi:20180620183811j:plain

Innocentデフォルトのコードブロック表示

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

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

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

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

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

CSSカスタマイズは外部ファイルから行います。

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

hal7pi.hatenablog.com

外部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
}

最初の記述は既存のテーマInnocentのCSSによるpreタグの効果を打ち消すための設定です。下側にマージンを20px取ります。

それ以降のpre > codeの部分が本命の設定です。

背景色をbackground: #1f1f1fとして黒より少し弱めています。文字色もcolor: #fafafaとして完全な白ではなくしています。相対的なコントラストが弱まるため、目に優しい色設定となります。

こうしたちょっとした気配りができることが自分でカスタマイズを行えることのメリットですね。

また、コードが長い場合はスライダーが働くようにCSSを記述(overflow: auto)しています。