ソースコードの自動改行を無効にし、スクロールバーを表示する

HTML & CSS

2021.08.29

はじめに

WordPressでソースコードを貼り付けるとき、ソースコードのブロックを設置してその中に貼り付けると思います。

私はCocoonテーマを使っていますが、ソースコードが改行されてしまい見づらくなってしまいます。

デスクトップで表示する分には問題ありませんが、スマホで表示する場合は、1行が長いコードが変なところで改行されてしまいます。

この問題を解決したので共有します。

Cocoonテーマの中には子テーマである「Cocoon Child」というテーマがあります。

この「 Cocoon Child 」の「Style.css」に追加のカスタマイズを書き込んでいけばオリジナルデザインを表示できるようになっています。

ちなみに、ソースコードの自動改行を無効にし、スクロールバーを表示するためのCSSコードは下の通りです。

.wp-block-code code {
	overflow-x :scroll;
	white-space :pre;
}

このコードを「 Cocoon Child 」の「Style.css」に追加してもうまくいきませんでした。

なんかより優先度の高いCSSファイルで「overflow : normal;」のようにしていされているため上書きできなかったみたいです。

これはGoolge Chromeのデベロッパーモードでcssコードが取り消し線で消されていたことから確認しました。

そこでcodeタグのデザインを管理しているCSSファイルをサーバーのファイル管理画面から探しました。

その場所は「public_html」→「wp-includes」→「blocks」→「code」→「style.css」内にありました。

サーバー上のCSSファイルを修正してもいいですが、今回はWordPressの画面で修正しました。

「WordPress」→「外観」→「カスタマイズ」→「追加CSS」

ここに下記のコードを追加して公開を押してください。

.wp-block-code code {
	overflow-x :scroll;
	white-space :pre;
}

スマホなど画面の小さいデバイスで、ソースコードが自動改行せず、スクロールバーが表示されていることを確認してください。