THE THOR でpreタグの改行が反映されない問題と解決策

WordPressテーマ『THE THOR』で、「preタグの改行が効かない」という現象が発生していました。
その解決策をご紹介します。

最初に結論を。

詳しくみていきましょう。

preタグとは？

まずpreタグについて。

preタグはHTMLタグの１つ。
「pre」は「preformatted text（整形済みテキスト）」の頭文字で、<pre>～</pre>で囲んだ部分をそのまま表示するためのタグです。

HTMLタグや空欄・改行などがそのまま表示されるので、HTMLやCSS・プログラミングのソースコードなどを表示するときに便利なタグです。

THE THORの場合だと、「整形済みテキスト」がそれに当たります。

ビジュアルエディターだと「段落」のプルダウンメニューから選択できます。

これを選択すると・・

デフォルトではこういう見た目で表示されます。

preタグなのに改行が効いてない

THE THORの場合、preタグにこのように入力したら、

こういうふうに改行や空欄を含めて表示してほしいわけなんですが・・・

なぜかこのように1行になってしまっていました。
横スクロールはできるんですけど、読みづらくてしかたがない💦

preタグなのに改行がなくなってしまっていて、preタグの意味をなしていないです。

CSSで修正してみた

検索して調べてみると

pre {
white-space: pre-wrap ; 
}

というCSSを追加すると良いという記事が多数ヒットしたので、CSSに追加してみましたが・・・

こんなふうに「はみ出ている部分を折り返して改行」されました。
ちがう、そうじゃない。

そもそも1行にしたくないんだ。

解決：「HTML圧縮」の設定を解除

いろいろ調べた結果、わかりました。

THE THORにあるSEO設定の「HTML圧縮」が効いていると1行になってしまうみたいです。

なのでこの設定を解除してください。

（N）外観＞カスタマイズ＞SEO設定＞HTML圧縮設定＞「HTMLを圧縮する」のチェックを外す

これで思ったとおりに出力されました。

まとめ

THE THORでpreタグに入力した内容が改行されず、1行になって表示されてしまう現象は、
「HTMLを圧縮する」のチェックを解除することで解決します。

この設定はそもそも、HTMLを圧縮することによってページの読み込み速度を短縮し、SEO上有利になるための設定です。

設定を解除することによってSEOの有利点が減るのはもどかしいところですが
そもそも読みづらい・わかりづらい記事ではユーザビリティが落ちて本末転倒なので
設定は解除したほうがよいと思います。

とくに技術系ブログとかでコードを記載している人は、解除しないとよくわからないサイトになってしまいますね。
（プラグインとかで解決できるかもしれませんが）

＼応援クリックお願いします／