kitoko552.memo

kitoko552のメモ

はてなブログ(スマホ)のソースコード表示部分を横スクロール可能にする

要点

  • CSSに以下を追加する。
.entry-content pre {
    word-wrap: normal;
    white-space: pre;
}

はてなブログのデフォルトのスマホ画面だとソースコードは横スクロールできない

はてなブログのデフォルトのスマホ画面では、ソースコードは横スクロールできません。
そのため、ソースコードの見え方がとんでもないことになります。

f:id:kitoko552:20160225001324j:plain:w400

さっぱりです。

まあスマホでソースコード見るかと言われれば怪しいところではありますが、上のような見た目はいくら何でも無視できません。

ソースコードの部分はpreタグ

このソースコードの部分にあたるhtmlタグは<pre>になります。
なのでpreに対してCSSをあてていきます。

Chromeでごにょごにょ調査して僕が実際に加えたCSSは以下です。

.entry-content pre {
    word-wrap: normal;
    white-space: pre;
}

これでソースコード部分は横スクロールが可能になり、変なところで改行されなくなるため以下のように見やすくなります。

f:id:kitoko552:20160225002040j:plain:w400

横スクロール後↓

f:id:kitoko552:20160225001843j:plain:w400