WordPressでコードを書いた時のスマホ表示の崩れを改善する方法

このブログは WordPress を使用して書いている。ときどき、ごく簡単な CSS 等のコードを入れた記事を書くことがあるが、ひとつ悩みがあった。

それは、コードを見やすく表示するため、pre タグを使ったりシンタックスハイライター使って書くと、スマホ表示がおかしくなるということ。

かれこれ半年くらい悩んでいた気がするが、今日、とても簡単な方法で、あっけなく解決してしまった。同じことで悩んでいる方、悩むことないですよ。

スポンサーリンク

ブログの両端が見切れる問題

コード表記をするとスマホ表示がどうおかしくなるかと言うと、幅が合わない。ブログの左右両端が見切れてしまう。

Google Chrome でスマホエミュレートしてみると、こんな感じ。

コードが含まれている記事でスマホ表示すると、上記のように記事が正常に見れない。

上の画像の例では WordPress のシンタックスハイライト用プラグインを使っているが、プレーンな pre タグを使っても同様の問題が起きる。

私はスマホでもきれいに画面幅に収めて表示したい派なので、この事態は我慢がならない。ストレスが溜まる・・・

他方、「コードが画面幅に対してごく短いとき」はこのような変な表示にはならないようだ。

なので、問題は「コードが長い時に折り返しがされない」ところにあるということはなんとなく想像がついた。が、うまく直すことができずにいた。

仕方が無いので一時期 pre タグ等ではなく blockquote タグに入れてみたりもした(blockquote なら折り返しが効く)。でも、それも変だしね…

解決方法

悩んでいたが次の方法で解決した。

1. プラグイン Crayon Syntax Highlighter を導入する

Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, or post text.

2. 設定の Wrap lines by default にチェックを入れて保存する

以上。簡単♪

結果は次の通り。

きれいに画面幅におさまった。実機でも確認済。

根本原因を特定して解決したわけではないが、キレイに表示できれば良い。

なお、この設定をすると、画面幅に収まるかわりに、折り返しは発生する(たとえPC表示であっても、長ければ折り返す)。

折り返しが起きるほうがイヤという人もいると思うが、そういう人には採用できない方法ではある。

謝辞

次の記事を参考にさせていただきました。ありがとうございます。