【はてなブログ】コードブロックを一新！色替えをしてみた。

これまでのデザイン変更の流れ

コードブロックのデザインカスタマイズの種類

コードブロックのデザインカスタマイズは下記のようなことができます。

私は「JavaScript」をなるべく使いたくない＆あまり必要性を感じなかったので色替えだけしました。

色替えした場所

シンタックスハイライトについてはこちらの「はてなブログ ヘルプ」で紹介されています。

はてな記法では、スーパーpre記法でプログラムのソースコードなどを表示する際に、シンタックスハイライト（Syntax highlighting、言語ごとの構文に応じた色付け表示）が利用できます。

ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログ ヘルプ

こちらのサイトを参考にさせていただきながら変更しました。

はてなブログでソースコードの表示をわかりやすくするカスタマイズ - FOXISM

変更方法

下記のコードを「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」に入力します。

/* --- コードブロックの色替え --- */
.entry-content pre {
border: none;
font-size: 15px;		/* 文字サイズ */
line-height: 1.2;		/* 行の高さ */
background: #F7F6F3;
color: #333;
position: relative;
}
.synComment { color: #868d97 }      /*コメント*/
.synIdentifier { color: #669900 }   /*識別子*/
.synType { color: #b34280 }         /*型*/
.synConstant { color: #1e1e1e }     /*定数*/
.synStatement { color: #e6a617 }    /*ステートメント*/
.synPreProc { color: #e27174 }      /*プリプロセッサ*/
.synSpecial { color: #0f7faf }      /*特殊文字・記号*/
/*言語名を表示 */
pre.code::before {
    content: attr(data-lang);
    position: absolute;
    top: 0;
    left: 0;
    background: #58a4b0;
    color: #fff;    
    padding: 0 0.8em;
}
.entry-content pre.lang-html::before {    
    background: #6290bf;    
}
.entry-content pre.lang-css::before {    
    background: #f7b436;
}
pre.code.lang-javascript::before {
    background-color: #e27174;   
}

▼ シンタックスハイライトの色替えの前後の記録。 　　 　　 　 　　 　　 　 　　 　　 　　

Class		前	後	Hex
.synComment	コメント			#868d97
.synIdentifier	識別子			#669900
.synType	型			#b34280
.synConstant	定数			#1e1e1e
.synStatement	ステートメント			#e6a617
.synPreProc	プリプロセッサ			#e27174
.synSpecial	特殊文字・記号			#0f7faf

だいぶシンプルな色替えになったんじゃないかな～。
今回は以上です。