HTML

【超簡易版】コマンドが右端で折り返されないように水平スクロールバーをピンポイントで入れる方法（WordPress）

前書き

コマンドプロンプトやTeraTermなどで入力したコマンドや、返ってくる戻り値は大きな横幅を必要とする。

そんなコマンドやその戻り値を、ブログに貼り付けたいことは多々あるが、普通にコピペしただけでは画面の右端で折り返されてしまい、見づらくなってしまう。

ここでは、Wordpressでコマンドを使用した記事を投稿する際、右端で改行されないように水平スクロールバーを入れて、右にスクロールすることができるようにする方法を書く。

ちなみに、スマホでは水平スクロールバーは表示されないが、左に指でスクロールしてコマンドを一行で見ることができる。

水平スクロールバーを入れる方法は、ネット上に有識者がたくさん記事を投稿しているが、俺が見た限りではCSSを使ったコーディングを使用していることが多い。

はっきり言うが、僕はCSSなんてまったくわからない。（Wordpress始めたんだから勉強しようとは思っているが）

ここでは、CSSを使用しないで、HTMLのみで水平スクロールバーを入れる方法を書こうと思う。

もうひとつ言っておくが、HTMLも俺はよくわかっていない。

水平スクロールバーを入れたい場所にだけピンポイントで入れる方法に、試行錯誤の末たどり着けたので、ここに書き記しておこうと思ったわけだ。

また、水平スクロールバーを入れるためのHTMLタグをこれから書いていくが、俺はそのHTMLタグの意味さえよくわかっていない。

だからこの記事は、下のような人に読んでほしい。

・Wordpressを使用している
・HTMLやCSSの知識がほとんど無い。
・TeraTermなどで入力するコマンドを記事に盛り込みたい。
・貼り付けたときコマンドや戻り値が画面の右で折り返されてイライラしている。
・手っ取り早く右スクロールを入れたい場所にだけ右スクロールを入れたい。
・CSSなんて勉強するのは後にしたい。

それではやり方をできるだけシンプルに書いていこうと思う。

ちなみに、俺のWordpressのテーマは「Hummingbird」である。それからエディタープラグインは「TinyMCE Advanced」を使用している。

 

右スクロールをピンポイントで入れる方法

まず、大まかな流れは下記だ。

  1. ビジュアル編集画面にて「整形済みテキスト」を挿入し、コピーする横長のテキストを貼り付ける場所を作る。
  2. 「整形済みテキスト」となっている場所に横長のテキストをコピーする。
  3. 「整形済みテキスト」が消えるので（消えない場合もある）、貼り付けたテキストを全選択して、再度「整形済みテキスト」をプルダウンから選ぶ。
  4. 貼り付けたコマンドが「整形済みテキスト」に入るので、その中の最初と最後の文字列を覚える（メモする）。
  5. テキスト編集モードに移行し、始まりの文言の前と、終わりの文言の後に、とあるHTLMタグを挿入する。

ではいこう。

手順

横長ならなんでもいい。ここではLinuxの[ifconfig]コマンドの結果を例にとろうと思う。

以下のテキストをWordpressに貼り付けることを想定する。

横長だ。右端で折り返されるだろう。

まずコマンド結果を貼り付けたい個所に、[整形済みテキスト]を挿入する。

 

次に、黒くなった個所に、コピーしたコマンド結果を貼り付ける。

 

そうするといったん整形済みテキストが消えてしまったように見えるが、貼り付けたテキストを全選択して再度「整形済みテキスト」をプルダウンから選ぶ。
※整形済みテキストが消えなかった場合（黒いのが消えなかった場合）は次の手順に進んでくれ。

 

そうすると、行頭のスペースも保たれたまま、黒地に白の実際のコマンド結果のようになってくれるはずだ。

 

こいつをこのまま投稿しようとすると、右端で折り返されてしまう。
矢印のところがそうだ。

 

さて、このコマンド結果に水平スクロールバーを入れるには、まずテキスト編集モードに入る必要がある。

 

テキスト編集モードに入ったら、水平スクロールバーを入れたいテキストの、最初と最後の文言を特定する。

今回の場合、始まりが「[root@CentOS7_Test1 conf.d]# ifconfig」で、終わりが「TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0」だ。

そうすると、テキスト編集モードで下のように始まりと終わりを特定できる。

 

始まりの場所と終わりの場所が特定できたら、下に書くHTMLタグを何も考えずにコピペしてほしい。

始まりのHTMLタグはこれだ。

<div style="overflow-x: scroll;">
<table>
<tbody>
<tr>
<td style="white-space: nowrap;">
<pre style="white-space: pre;">

 

そして終わりに入れるHTMLタグはこれだ。

</td>
</tr>
</tbody>
</table>
</div>

 

始まりのHTMLタグのコピペにだけ、少し注意が必要だ。

始まりにはすでに<pre>タグが入っていると思う。

 

この<pre>タグを、始まりのHTMLタグの最後の行で上書きしてほしい。
下の矢印のタグで上書きしてほしいという意味だ。

 

つまり、タグを挿入してみると下の図のようになる。

 

終わりのHTMLタグは簡単だ。ただコピペで挿入すればいい。

今回の場合は以下のようになる。

 

そしたらプレビュー画面で見てみてくれ。水平スクロールバーが付き、右にスクロールできるようになっているはずだ。

 

上のは画像だが、下が実際に水平スクロールできるようにしたテキストだ。

[root@CentOS7_Test1 conf.d]# ifconfig
eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.100.201  netmask 255.255.255.0  broadcast 192.168.100.255
        inet6 fe80::215:5dff:fe00:217  prefixlen 64  scopeid 0x20<link>
        inet6 2001:268:c0e3:67e3:215:5dff:fe00:217  prefixlen 64  scopeid 0x0<global>
        ether 00:15:5d:00:02:17  txqueuelen 1000  (Ethernet)
        RX packets 1489  bytes 211416 (206.4 KiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 480  bytes 54438 (53.1 KiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        inet6 ::1  prefixlen 128  scopeid 0x10<host>
        loop  txqueuelen 1  (Local Loopback)
        RX packets 0  bytes 0 (0.0 B)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 0  bytes 0 (0.0 B)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

 

後書き

最後まで読んでいただきありがとうございます。

WordPressにもっと詳しい人はたくさんいる。CSSというやつでコーディング？するのがスマートなんだろう。そしてもしかしたら、CSSの方が見た目もよく、手順も簡単なのかもしれない。

だがせっかちな俺には（直そうと思ってるんだが）、CSSを勉強する心の余裕がなかった。そしてこの方法にたどりついたわけだ。

この方法を自力で作りだすのにもかなりの工数がかかっているので、いっそのこと腰を据えてCSSを勉強すべきだったのかな。まあ結果オーライでいいじゃないか。

本記事がお役に立てれば幸いだ。

RECOMMENDこちらの記事も人気です。