WordPressで使用可能なブロックである整形済みテキストで折り返しせずに横スクロールさせる方法を解説します。
はじめに
整形済みテキストですが、デフォルトでは、記述する内容によって、折り返されたり、スクロールされたりします。（使用しているテーマなどにも依存しているのかもしれません）
下記は、PHPのインストールログの一部で、黄色の文字は折り返されていませんが、赤色の文字は中途半端に折り返されてしまっています。
このように、整形済みテキストに記述している内容によって、折り返しやスクロールの挙動が変わってしまっています。
[root@STKWPS001 ~]# dnf install -y http://rpms.famillecollet.com/enterprise/remi-release-8.rpm メタデータの期限切れの最終確認: 3:39:07 時間前の 2022年10月23日 19時00分47秒 に実施しました。 remi-release-8.rpm 11 kB/s | 29 kB 00:02 依存関係が解決しました。 =================================================================================================================================================== パッケージ アーキテクチャー バージョン リポジトリー サイズ =================================================================================================================================================== インストール: remi-release noarch 8.6-1.el8.remi @commandline 29 k トランザクションの概要
本記事では、整形済みテキストに記述している内容を折り返しさせずに、横スクロールさせるようにする方法を説明したいと思います。
ちなみに、下記が今回の対応を施した整形済みテキストとなります。
赤字部分が折り返されずに、1行で表示されるようになりました。
[root@STKWPS001 ~]# dnf install -y http://rpms.famillecollet.com/enterprise/remi-release-8.rpm メタデータの期限切れの最終確認: 3:39:07 時間前の 2022年10月23日 19時00分47秒 に実施しました。 remi-release-8.rpm 11 kB/s | 29 kB 00:02 依存関係が解決しました。 =================================================================================================================================================== パッケージ アーキテクチャー バージョン リポジトリー サイズ =================================================================================================================================================== インストール: remi-release noarch 8.6-1.el8.remi @commandline 29 k トランザクションの概要
折り返しせず、横スクロールさせる方法
では、実際に整形済みテキスト内の記述を折り返しさせずに、横スクロールさせる方法を説明します。
手順は簡単で、以下のCSSソースコードをカスタムCSS入力欄に貼り付けるだけです。
.wp-block-preformatted {
white-space: pre;
}
「カスタムCSS」とは、以下の画像のような記事編集画面の下部にある入力フォームです。
ここに、CSSコードを入力することで、その記事にのみCSSを適用することが出来ます。
カスタムCSSにコードを張り付けた後は、保存し、プレビュー画面で確認してみて下さい。
整形済みテキスト内のテキストが不自然に折り返しされず、横スクロールされるようになっているかと思います。
記事は以上です。
関連記事
整形済みテキストに関する記事です。
リンク
コメント