はるなぴログ

ブログ・WEBサイト作成技術研究

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

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

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

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

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
}

CSS設定内容

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

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

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

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

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

このカスタマイズにより先ほど示したような背景黒のプログラミングコードの表示を行うことができます。