roiti46's blog

主に競プロ問題の解説を載せてます

はてなブログ本文とシンタックスハイライトの文字サイズの調節

はてなブログシンタックスハイライト部分はデフォルトだと記事本文の文字より大きく、少し横長のコードを書くとすぐにコードの右部分が隠れてしまいます。せっかくのシンタックスハイライトが台無しだ、これはいかんということで解決方法を探してきました。

どうすればいいか

ググったところ、まず本文については次のようにすればよいようです。

はてなブログ管理画面から デザイン -> カスタム -> デザインCSS のどこかに以下のコードを書き足します。

.entry-content {
    font-size:14px;
}

font-size:のうしろにお好みのpx数を指定できます。

次に、コード部分については、以下のコードを書き足します。

.entry-content code {
   font-size:80%;
}

font-size:のうしろに本文文字に対しての倍率またはお好みのpx数を指定できます。

調節してみて

このページも上記設定にもとづいて表示されています。デフォルトより本文とコード部分の文字サイズがだいぶ小さくなっているのが確認できると思います。これで文字サイズのせいでレイアウトについて思い悩むことはないんではないでしょうか。