はてなブログのソースコード表示にSource Code Proフォントを使って読みやすくする方法

Google Web Fontとは

f:id:mczh:20160429011916j:plain Photo by Unsplash | Pixabay / CC BY 0

Google Fonts

いつのころからか、GoogleがWEBフォントを提供していたらしい。

通常、ブログ側でフォントを指定したとしても、表示する側のPCやスマホにそのフォントが入っていないと、指定したフォントでは表示されない。

その問題を解消するために、Webページにアクセスした際に、指定したフォントをGoogleのクラウドからダウンロードしてきて、表示をしてくれる仕組みがGoogle Web Fontsである。

これを使って、はてなブログでソースコードを載せたときのフォントを、プログラミングに適していると言われるフォントに変更するカスタマイズを行ったので、メモしておく。

Source Code Proフォント

ソースコード上で見間違えやすい1 l I（イチエルアイ）、O 0（オーゼロ）が見分けやすい、Source Code Proフォントを使う。

日本語は含まれないが、ソースコードなので問題ない。コメントの日本語部分は、自動的に日本語フォントが使われるので、表示はちゃんとされる。

以下に例でプログラミング時に読み間違えやすい文字を貼ってみる。

1 l I
O 0

たしかにわかりやすい。

はてなブログでの設定

詳細設定の、「headに要素を追加」に以下を追加する

<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

はてなブログのPro契約をしていない場合にはスマホ対応できないので、「headに要素を追加」ではなくて、PC向けデザインのヘッダやフッタに貼り付けたほうが良い。スマホでの無駄な読み込みを回避できる。

cssでimportを使う方法もあるが、なぜかうまくいかなった。

PC向けの場合

デザインのCSSに以下を追加する

.entry-content .code{
     font-family: "Source Code Pro", sans-serif; /* ここでフォントを指定 */
    font-size:70%;/* 本文よりも小さい方がソースコードは読みやすい */
}

スマホ向けの場合

はてなブログProの契約が必要。ヘッダ部分に以下を追加する。

<style type="text/css">
.entry-content .code{
    font-family: "Source Code Pro", sans-serif; /* ここでフォントを指定 */
    font-size:70%;/* 本文よりも小さい方がソースコードは読みやすい */
}
</style>

日本語フォントの場合には？

日本語フォントも存在するが、英語に比べて日本語は文字の種別が多いため、ダウンロードに時間がかかる。多くのサイトがGoogleFontsを利用して十分にキャッシュされ続ける環境になればいいかもしれないが、現状はそうでもないので、少なくとも回線の細いモバイル環境向けに日本語のWEBフォントを使うのはおすすめではない。パソコン向けサイトならアリだと思う。

サンプルコード表示

画像の二値化 | OpenCV.jpのコードを試しに載せておく。

#include <cv.h>
#include <highgui.h>
 
using namespace cv;
 
int
main(int argc, char **argv)
{
  // (1)load a specified file and convert it into grayscale image
  const char *imagename = argc > 1 ? argv[1] : "../image/trains.png";
  Mat src_img = imread(imagename);
  if(!src_img.data)
    return -1;
  Mat gray_img;
  cvtColor(src_img, gray_img, CV_BGR2GRAY);
   
  // (2)apply a fixed-level threshold to each pixel
  Mat bin_img, bininv_img, trunc_img, tozero_img, tozeroinv_img;
  threshold(gray_img, bin_img, 0, 255, THRESH_BINARY|THRESH_OTSU);
  threshold(gray_img, bininv_img, 0, 255, THRESH_BINARY_INV|THRESH_OTSU);
  threshold(gray_img, trunc_img, 0, 255, THRESH_TRUNC|THRESH_OTSU);
  threshold(gray_img, tozero_img, 0, 255, THRESH_TOZERO|THRESH_OTSU);
  threshold(gray_img, tozeroinv_img, 0, 255, THRESH_TOZERO_INV|THRESH_OTSU);
 
  // (3)apply an adaptive threshold to a grayscale image
  Mat adaptive_img;
  adaptiveThreshold(gray_img, adaptive_img, 255, ADAPTIVE_THRESH_GAUSSIAN_C, THRESH_BINARY, 7, 8);
 
  // (4)show source and destination images 
  namedWindow("Source", CV_WINDOW_AUTOSIZE);
  namedWindow("Binary", CV_WINDOW_AUTOSIZE);
  namedWindow("Binary Inv", CV_WINDOW_AUTOSIZE);
  namedWindow("Trunc", CV_WINDOW_AUTOSIZE);
  namedWindow("ToZero", CV_WINDOW_AUTOSIZE);
  namedWindow("ToZero Inv", CV_WINDOW_AUTOSIZE);
  namedWindow("Adaptive", CV_WINDOW_AUTOSIZE);
  imshow("Source", src_img);
  imshow("Binary", bin_img);
  imshow("Binary Inv", bininv_img);
  imshow("Trunc", trunc_img);
  imshow("ToZero", tozero_img);
  imshow("ToZero Inv", tozeroinv_img);
  imshow("Adaptive", adaptive_img);
  waitKey(0);
 
  return 0;
}