スマホでコードブロック横スクロール

はてなブログの体裁の話。

前に、コードブロックの1行が長いときに折り返さずに横スクロールできるようにする設定をした。
が、スマホで見てみると、やっぱり折り返しになってしまっていた。

これに対処して、スマホでもコードブロックの横スクロールできるようにしたので、備忘録。

前にやったこと

はてなブログ管理画面の「デザイン」→「カスタマイズ」→「デザインCSS」で、記述追加。
(どこまでがこのときの対応部分だったか不明)

/* ソースコードの囲み */
pre.code {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #333;
    color: #eee;
    position: relative;
    border-radius: 3px;
    white-space: pre;
    overflow-x: scroll;
    word-wrap: normal;
}

これだと、PCで見るときちんとスクロールバーが出るが、スマホだとだめだった。

↑ PC版

↑ スマホ版

今回やったこと

下記を参考にした。

ソースコードをスマホで見るときに改行しない方法 - 図描きの備忘録

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

結局やったのは、

はてなブログ管理画面の「設定」→「詳細設定」→「要素にメタデータを追加」で、先ほどの「デザインCSS」に入れた記述の一部を追加。

<style>

pre.code {
    white-space: pre;
    overflow-x: scroll;
    word-wrap: normal;
}

</style>

これで、スマホで見たときにもコードブロックを横スクロールできるようになった。

以上

めでたし。