はてなブログのスマホ表示で記事中のソースコードを折り返さないようにする

はてなブログでソースコードをpre記法などで書くと、PCなら横に伸びた分はスクロールできますが、スマホだと折り返しされて下に伸びることに気がつきました。

PCでの表示

スマホ(iPhone 6)での表示

横へスクロールさせるためにoverflow-xを設定しても変わりなし。検索してみると以下の記事にそのままズバリ原因と対応が。

kanonji.info

「デザインCSS」に追加してもCSSの読み込み順の都合で適用されないので、設定→詳細設定→「headに要素を追加」に以下のCSSを設定しました。styleタグは省略しています。

pre{
  white-space: pre;
}

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

word-wrap: normal;だけでなく、white-space: pre;も必要でした。

変更後

スクロールバーは表示されていませんが、横にスクロールできます。

スクロールする方が面倒だという人もいるでしょうけど、画面の横幅に合わせて折り返しされるとぐちゃぐちゃになりますし、自分はこちらの方が見やすいです。使用しているデザインテーマによっては設定不要かもしれません。