はてなブログテーマ「Blank」のカスタマイズ（フォント/色編）

はてなブログテーマ「Blank」のカスタマイズ方法、フォント/色編です。記事本文や見出しで使用されるフォントの変更や、リンクの色の変更について記載しています。参考になれば幸いです。

フォント

フォントサイズを変更する

body {
    font-size: 16px;
}

body の font-size を変更すると、ブログタイトル（#title）を除く全ての要素のフォントサイズが自動的に調整されます。推奨値は 14px から 17px の間です。

フォントを変更する

/* 全般 */
body {
    font-family: "Open Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans","Hiragino kaku Gothic ProN",Meiryo,sans-serif;
}
/* ブログタイトル */
#title {
    font-family: "Open Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

上記の CSS をカスタムCSS欄に貼り付けた後、font-family の指定を変更すると、記事本文や見出しで使用されるフォントを変更できます。上記のスクリーンショットでは、半角英数字に Google フォント「Montserrat」を、日本語に「Meiryo UI」を指定しています。

見出しの太さを変更する

h1, h2, h3, h4, h5, h6 {
    font-weight: 400; 
}

上記の CSSをカスタムCSS欄に貼り付けた後、font-weight の指定を変更すると、見出しの太さを変更できます。太字にするには 700 または bold を、通常の太さにするには 400 または normal を指定します。(適用イメージ)

色

リンクの色を変更する

.entry-content a,
.comment-content a{
    color: #555;
}

a:hover {
    color: #999;
}

上記の CSS をカスタムCSS欄に貼り付けた後、color の値を変更すると、記事本文・コメントに存在するリンクの色を変更できます。デザインにもよりますが、マウスオーバー時の色は元々の色より薄めにした方が美しいでしょう。(適用イメージ：マウスオーバー時)