はてなブログのソースコード表示にSource Code Proフォントを設定

はてなブログのカスタマイズ記事です。

ブログのソースコード表示に Google Fonts（Webフォント） の Source Code Pro を設定しました。

HTML や CSS がわからない方でもコピペだけで設定できます。

この記事の目次

Source Code Pro を選んだ理由

ソースコード上で見間違えやすい

1　l　I（イチ　エル　アイ）
O　0（オー　ゼロ）

を、見分けやすくできるフォントです。

Source Code Pro で表示してみると・・・

1 l I
O 0

うん、確かにわかりやすい。

では、はてなブログに設定していきましょう。

はてなブログに Source Code Pro を設定

準備

設定 → 詳細設定 → headに要素を追加に以下ソースコードを追記します。

<!-- Webフォント Source Code Pro -->
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

これで、Source Code Pro を使う準備ができました。

CSS で使う場所とデザインを指定

デザイン → カスタマイズ（レンチアイコン） → ヘッダに以下ソースコードを追記します。

<!-- ソースコード -->
<style type="text/css">
  .entry-content pre,.entry-content code{
    font-family: "Source Code Pro", sans-serif;
    font-size: 80%;
    background-color: #333;
    color: #eee;
  }
</style>

私は、ソースコードの背景色は黒色が良いと思っているので、background-color: #333;を指定しています。

背景色を黒色にすると、;が黒色で見えなくなるため、color: #eee;で白色にしています。

背景色は白色が良いという方は、上記両方のコードを消した以下のコードを使用してください。

<!-- ソースコード -->
<style type="text/css">
  .entry-content pre,.entry-content code{
    font-family: "Source Code Pro", sans-serif;
    font-size: 80%;
  }
</style>

あとがき

これでソースコードがキレイに表示されましたね。

個人的にソースコードはこのデザインが好きなので、満足満足。