はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更する

f:id:ibuquicallig:20191214164653p:plain

この記事でははてなブログの埋め込みコードの背景色、およびシンタックスハイライトで色付けされた文字列の色、装飾の変更方法について解説しています。

個人的に好きな配色を自由に反映することができます。私のブログでは以下のようになっています。

<html lang="ja-JP" class="index-html">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./stylesheet/style.css">
    <link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet">
    <!-- link rel="icon" href="/favicon.ico" -->
  </head>
  <body class="index-body">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 index-main">
          <p>TANETATS.COM</p>
        </div>
      </div>
    </div>
  </body>
</html>

package sht;

import java.io.*;

/**
 * <p>シンタックスハイライトテスト</p>
 * @author taneyats
 */
public class Sht {
  int num = 1;
  String str = "some string";
  char chr = '\'';

  public static void main(String args[]) {
    // なんらかの処理です
    System.out.println("テスト");
    boolean bool = true;

    if (true) bool = !bool;
  }
};

/* エスケープ文字、!importなど特別な文字列 */
.entry-content pre > .synSpecial {
  color: #E4572E !important;
}

/* 型など */
.entry-content pre > .synType {
  color: #E4572E;
}

この記事でできること
関連記事
手順

この記事でできること

CSSの設定を追加して、背景色・文字色(前景色)を変えることができる。

フォントや折り返しの設定については以下の記事を参考にしてください。

手順

配色を決める

まずはどんな配色にするか決める必要があります。IDEなどで普段使っているテーマなどがある場合にその公開されているソースを何とかして探し出すが、それっぽい色の色コードを取得しておきます。

特に使いたい配色がない、いつもとは違う配色にしたいという場合は、以下のサイトを使用すると調和のとれた5色をランダムに選択することができるのでおすすめです。

Start the Generator, it's free!という青いボタンを押すと生成ページに飛ばされます。そこでSpaceキーを押すたびにランダムな色が選択されます。

気に入った色があれば、その色にマウスを合わせて下のほうに表示される鍵マークを選択するとロックすることができます。ロックした色はSpaceキーを押しても固定され続けます。ひとつ前の色に戻りたいときは←キーを押します。

これを繰り返していき、好みの5色を選びましょう！色の下に表示されている色コード(#2D2327など)を実際の設定に使用します。 背景色、クラス・型、予約語、固定文字列、コメント、の5つをどれにするのか考えながら選択すると、イメージしやすいかもしれません。

好みの配色が見つかったらURLを必ずコピーしてCSSなど、修正するときに見る場所にコメントアウトしておきましょう。1色だけ変更したいときなどに便利です。

このサイトで使用している配色もこのサイトで生成しました。

背景色を変更する

それでは色を変更していきます。まずは背景色から変更していきます。

CSSを変更するので、はてなブログのダッシュボードからデザイン > カスタマイズ > デザインCSSと選択していきCSS編集画面を開きます。

以下を追記することによって背景色を変更することができます。追記するべき場所がよくわからない場合は、末尾に追記しておきましょう。

/* 埋め込みコード */
pre.code {
  background:     #0A1024;
  color:          white;  /* 背景色が暗い色の場合に必要 */
}

そのままの設定だとシンタックスハイライトされていない文字は黒色のままなので、背景色によっては文字が見えなくなります。その場合にはcolor:white;を足します。背景色が白系の場合はcolor:white;の行は必要ありません。

追加で文字の大きさをなどはfont-sizeプロパティを追加します。このブログで使用しているのは以下のような設定になります。

.entry-content pre.code {
    margin-bottom: 75px;    /* 埋め込みコード真下に余白を設定。(記事が見やすくなります) */
    border-radius: 4px;     /* 埋め込みコードの四隅をちょっと丸くします。かわいい！ */
    background:    #0A1024; /* 背景色 */
    font-size:     16px;    /* 文字の大きさ */
    /* フォント。Inconsolataなどを使用するには別途設定が必要になります。記事頭の関連記事を参照 */
    font-family:   "Inconsolata", "Noto Sans JP", 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
    color:         white;    /* 文字色 */
}

変更が確認できたら次に進みます。

CSSを確認しながら設定するには、非公開ブログを・本ブログとすべて同じ設定で作成して、最新の記事に確認用の埋め込みコードを記載したものを設定、デザイン設定画面の[記事] > [記事ページのプレビュー]を選択すると埋め込みコードを表示することができます。

シンタックスハイライトされた文字の色を変更する

次にシンタックスハイライトされる文字を変更します。設定されているクラスは以下になります。

.synPreProc     # importなど
.synSpecial     # エスケープ文字、!importなど特別な文字列
.synType        # 型など
.synIdentifier  # 識別子や、JSのvar,letなど
.synStatement   # 予約語
.synConstant    # 文字列、数値など
.synComment     # コメント
(.synError)     # 構文解釈エラー(?)

これらのクラスが<span class="synStatement">return</span>という感じで記事を公開したときにはてなブログが勝手にやってくれます。

なのでpre.code内のこれらのクラスに設定を追加していきます。先ほどのpre.code{}のCSSの真下に追加します。内容は私のブログで設定している内容なので色の部分や、斜字・太字の部分は適宜修正してください。

.entry-content pre.code {
  /* 先ほど追加した部分 */
}

/* (Java) importなど */
.entry-content pre > .synPreProc {
  color: #33658A;
  font-style: italic;
}

/* エスケープ文字、!importなど特別な文字列 */
.entry-content pre > .synSpecial {
  color: #E4572E;
}

/* 型など */
.entry-content pre > .synType {
  color: #E4572E;
}

/* (JS) var, constなど */
.entry-content pre > .synIdentifier {
  color: #DB995A;
}

/* if, forなど予約語 */
.entry-content pre > .synStatement {
  color: #E4572E;
}

/* 文字列、数値など */
.entry-content pre > .synConstant {
  color: #20FC8F;
}

/* コメント部分 */
.entry-content pre > .synComment {
  color: #336699;
  font-weight: bold;
}