ワードプレスの記事にソースコードを表示する際に自動で改行させる設定方法

ワードプレスで書いた記事にソースコード（指示コードなど）を載せる場合、初期設定の場合、改行されません。
※ソースコードを載せる際に、ソースコード表示用の囲い込み線を使う場合

今まで、特に気にしていなかったのですが、最近、ブログに変化をつけるために、新しい見出しを使ってみようかなと考えました。

その際、CSSを使えば、綺麗な装飾の見出しが作れるのですが・・・

私は、正直いって、なるべくならCSSを使いたくありません。

その理由としては、それほどCSSに詳しくないことが一番の理由なのですが（笑）

もう一つの理由としては、CSSを多用するとブログを読み込む際に時間がかかることです。これは、プラグインを多用している場合にも同じことが言えます。

もちろん、適度に両者を使うなら、ブログの読み込み速度（表示速度）には、大した影響はありませんのでご安心を。

そういうわけで、CSSを使わないHTMLのみの見出しの早見表をブログ（ワードプレス）で作ってみようかなと思いました。

すると、ソースコードを表示した際に、自動改行されないと結構見づらいということがわかりました。

話が少しそれましたが、それで、記事に載せたソースコードを改行させることにしました。

今回の記事では、ソースコード（指示コードなど）を記事に載せたときに、自動で改行させる設定方法について書いてみたいと思います。

初期設定では、ワードプレスの記事に載せたソースコードは、改行されないでスライドバーが表示される。

例えば、以下は、CSSを使わない、HTMLだけの囲い込み線ですが、ワードプレスの初期設定の場合、記事の投稿欄に記載した場合、改行されないで以下のように表示されます。
下の図の「上記の囲い込み線のソースコード」という部分です。

やはり、これだと見づらいかなと思い始めました。

上の図のように、スライドバーを左右に動かさないとソースコード全体が表示されません。

設定方法は、実は、簡単です！

※一応、ここからは、自己責任で行って下さい！

私は、ワードプレスのテーマにsimplicity2を使っていますが、実験的に、違うテーマに変更しても同じ方法でソースコードが改行できるようになりました。

そのため、どのテーマでも設定方法は、同じなのでは？と思います。
※100％保証するものではありません。

ソースコードを改行させる設定方法！

１、ワードプレスの「ダッシュボード」を開きます。

２、左側にあるメニューの「外観」にマウスカーソルを合わせて「カスタマイズ」をクリックします。

３、カスタマイズの画面が表示されたら、左側のメニューから「追加 CSS」をクリックします。私が使用しているテーマでは、一番下にありました。

４、「追加 CSS」の画面が表示されます。

ソースコードを書き込む余白（上記の赤枠部分）に以下のように書き込みます。

pre {
white-space: pre-wrap ;
}

すると以下のようになるはずです。

５、設定を反映させるために、上にある「公開」をクリックします。

後は、左側の「×」をクリックして画面を閉じます。

「公開」の右隣の歯車のようなアイコンをクリックすると違う画面が出てしまうので注意して下さい。もし間違って歯車のようなアイコンをクリックした場合は、もう一度クリックすると元の画面に戻ります。

以上で作業は、終了です。

元に戻したい場合は、書き込んだソースコード（指示コード）を削除して下さい。その後、「公開」ボタンを押せば元の設定に戻ります。

上記の設定を行うと、以下のようにソースコード（指示コードなど）が改行されて表示されるようになりました。
下の図の「上記の囲い込み線のソースコード」の部分です。

やはり、こちらの方が見やすいのではないかと思います。ご覧のように改行されて表示され、スライドバーが表示されなくなりました。