サイト上でエクセルマクロのコードやJavaScriptのコードを掲載する場合がありますが、以前、ご紹介したように、WordPressのCocoonというテーマを使っていると、下のようにコードをハイライトして表示することができます。
<?php
echo "Hello World！";
?>
しかし、そのソースコードの中に長い行が含まれている場合は、下のようにスクロールしないと表示されません。
<?php
echo "１行が長いコードってこんな感じでながーーーーーーーーーーーーーーーーーーーーーーーーーーくなっているのだ！";
?>Cocoonの場合、以前は折り返し表示されるようになっていましたが、バージョンアップにより、スクロール表示がデフォルトとなってしまいました。
しかし、設定をいじることで、折り返し表示に戻すことができます。
ということで、このページではCocoonサイトで掲載したソースコードで、長い行を折り返して表示する方法についてご紹介します。
スグにためセル！ – ここを読めばすぐ使える
Cocoonサイトで掲載したソースコードで、長い行を折り返して表示するには、CSSファイルにwhite-space: pre-wrap;を記述してあげればいいのです。
※ より詳しい解説はここから下に続きます。
以前は折り返されなかった？
冒頭にも書いていますが、Cocoonのソースコードエリアは、以前は折り返し表示になっていました。
しかし、2023年9月に更新されたCocoon2.6.5からスクロール表示に変わったようでした。
Cocoon公式サイトによると、「コードブロックを使用した時にソースコードが折り返しになってしまう不具合修正」とありますので、折り返し表示は不具合だったようです。
不具合とありますが、実は、折り返し表示にすると少々問題が生じてしまっていました。
これについては、このページの下の方でご紹介したいと思います。
とはいえ、スクロール表示だと、スクロールをしないと全体が見えなくなるので、わたしとしては使い勝手が悪いと思っています。
一方で、折り返し表示の場合は、どこまでが１行なのかわかりづらいということもあります。しかし、この点については、解決する方法がありますので、ご安心ください。
それでは、改めて折り返し表示に変更する方法についてご紹介していきましょう。
Cocoon設定を確認する
ちなみに、WordPress管理画面にある「Cocoon設定」の中の「コード」タブに、折り返し表示の設定があるか確認してみました。
しかし、そのような設定項目はありませんでした。
スクロール表示がデフォルトであり、かつ、唯一の表示方法ということなのでしょう。
ということで、設定画面から変更することはできませんので、別の方法で変更していきたいと思います。
折り返し表示にする方法
Cocoonの設定画面から折り返し表示に変更することはできませんので、スタイルシート（CSSファイル）を直接変更する方法で対応していきましょう。
折り返し表示するコードはこちらです。このコードを子テーマフォルダのstyle.cssファイルに記述しましょう。
.wp-block-code code {
white-space: pre-wrap;
}スタイルシートを変更するだけで、下のように折り返し表示になっているはずです。
<?php
echo "１行が長いコードってこんな感じでながーーーーーーーーーーーーーーーーーーーーーーーーーーくなっているのだ！";
?>WordPressでは、管理メニューの「外観」の中にある「テーマファイルエディター」で、直接テーマファイルやHTMLファイルを編集できます。
また、「WP Editor」というプラグインを導入することで、テーマファイルエディターを使いやすくすることができます。
「WP Editor」プラグインについては、下のページで詳しく解説していますので、こちらをご覧いただき、プラグインを導入してみてください。
折り返し表示の問題点
これで、めでたく折り返し表示には変更できましたが、上でも書いたとおり、折り返し表示の場合は次のような問題点があります。
それぞれ解説していきましょう。
ためセル！では、上の問題点を解消して折り返し表示を行っているため、ここより上に掲載しているソースコードでは、上のような問題は発生していません。
ここから下の説明では、その問題点を解消する前の状態で説明していきますので、どうぞご覧ください。
どこまでが１行かわかりづらい
まず、どこまでが１行なのかわからないという点です。
下の図をご覧ください。
このコードは実は全体で１行なのですが、折り返し表示のため、３行のコードのように見えます。
特に、１行目の後ろにスペースがあるため、ここで改行されているようにも見えますね。
英単語は途中では改行されない設定になっているため、長い単語がある場合は次の行に送られてしまいます。そのため、行の最後にスペースができてしまい、ここで改行したのかなと勘違いしてしまうのです。
行番号がズレてしまう
Cocoonの設定では、ソースコードに行番号を表示させることができます。
しかし、行番号を表示させると、行番号がズレるという問題が発生します。
その現象を見ていきましょう。
上のコードでは、行番号を表示していませんでしたが、これを表示すると下のようになります。
あれ？ますます、このコードが１行ではないように見えてしまいましたね。
本来１行目であるはずの行番号が、折り返された行にまで番号が振られることで、２、３行となってしまうのです。
これは致命的な問題で、例えば、次のようなコードがあったとします。
（ここでは、あえてスクロール表示にしています。）
<?php
echo "１行が長いコードってこんな感じでながーーーーーーーーーーーーーーーーーーーーーーーーーーくなっているのだ！";
?>これを見てわかるとおり、「?>」は３行目にあります。
しかし折り返し表示にすると、下の図のように２行目が、２、３と数えられるため、「?>」が４行目になってしまっています。
こうなると、例えば「３行の記述を忘れるとエラーになります。」とコードの説明したとしても、それがズレてしまっているのです。
では、「４行目」と説明すればいいかというと、そういうわけにもいきません。
というのも、行番号のズレ方は、ウィンドウのサイズによっても変わってきます。
つまり、スマホのように横幅の短い画面で見ているときは、下の図のようにさらに行が増えてしまうのです。
このように、見ている人の環境によって行番号にズレが生じてしまうため、折り返し表示にしたときは行番号を表示することができなくなるのです。
解決策
行番号がズレることについては、行番号を表示しなければ解消します。
しかし、それではコードの説明をするときに「○行目」と書けなくなることから、サイトの使い勝手としてはあまり良くないでしょう。
ということで、行番号を表示しつつ問題点を解消する方法について考えてみました。
結論を言うと、行番号表示を行いつつ、折り返してもその行を１行と数えるようにすればいいのです。
しかし、通常のCocoon設定では対応できませんので、カスタマイズが必要です。
その方法については、改めて別のページでご紹介したいと思います。
まとめ
サイトにソースコードを掲載するときに長い１行があると、スクロールしないと見えなくなるため、コード全体が見づらくなります。
そこで、折り返し表示に変更したいのですが、Cocoon設定にはその項目はありませんでした。
しかし、CSSファイルを直接編集することで折り返し表示にできるということをご紹介しました。
これで、折り返し表示はできたのですが、まだ、少し課題もあるようです。
次回はこの課題の解消についてご説明したいと思います。
以上、このページでは、Cocoonサイトで掲載したソースコードで、長い行を折り返して表示する方法についてご紹介しました。
