読者です 読者をやめる 読者になる 読者になる

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

はてなブログ CSS

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

PCでの表示

f:id:splicom:20150801083650j:plain

スマホ(iPhone 6)での表示

f:id:splicom:20150801083709j:plain

横へスクロールさせるために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;も必要でした。

変更後

f:id:splicom:20150801083719j:plain

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

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