はてなブログのソースコードの見た目（スマホ）を調節する

はてなブログに載せたソースコードをスマホで見ると、行間が広すぎて見にくかったのでCSSで調整する方法を調べました。

元の状態がこちら。
う〜ん、見栄え悪い！

　
いっぽう、CSSを使って見栄えを調節したソースコードがこちら！
かなり見やすくなったんじゃないでしょうか？

やったこととしては

• 行間を狭くした
• 背景に色を付けた
• 行の折り返しをやめた

の3つです。

スマホでのソースコードの調節方法

PC用のCSS設定は「デザイン」→「カスタマイズ」→「デザインCSS」で変更できますが、デザインCSSを変更しただけではスマホでの見栄えは変更できませんでした。

スマホでの見た目の変更は「デザイン」→「スマートフォン」→「記事」→「記事上」で行います。

「記事上」のウインドウをクリックするとCSSを入力するウインドウが表示されるので、そこに次のCSSを入力してください。

<style type="text/css">
    .entry-content pre { 
        font-size: 20px;
        line-height: 16px;
        background: #f9f2f2;
        word-wrap: normal;
    }
    pre{
         white-space: pre;
    }
</style>

line-heightで行間、backgroundで背景色を設定しています。また、word-wrapとwhite-space: preでソースコードの折返しを禁止しています。

CSSが入力できたら「変更を保存する」ボタンで変更を保存して完了です。