WordPressで「コードを表示させる」方法【HTML習いたて。文字化けかと思ってた「<」が分かった!】

私は、ドットインストールでプログラミングを勉強中。本記事は、ドットインストール#29で勉強した内容です。

Webページで、コードが表示されているのって見たことがありませんか?こんなやつ ↓ 。

<p>コードを表示させていますよ</p>

このように黒い背景でコードを表示させるには「preタグ」というものを使っています。
↑ のコードを、WordPressのコードエディターで見てみます。

コードエディターを使う

↓ のようになります。

<pre>&lt;p&gt;コードを表示させていますよ&lt;/p&gt;</pre>

左右の「<pre> 〜 </pre>」がpreタグ。コードを囲えば、記事に表示させることができます。

ところで、、中身を見てください。変な英小文字が入っていません?

私は、最初に見たとき、「あれ!?なんか変なふうになった?文字化けかな??」って思いました。

実はこの「<p>」が「&lt;p&gt;」になるのは、HTMLの特殊な書き方。「実体参照」という名前がついています。

コードエディターで書いた<pre>は、ビジュアルエディターでは消えて、黒い背景になります。

また、<pre>タグの中のコード<>は、それぞれ&lt;と&gt;に変わります。

  • &lt;は、ampersand less than semicolonの略
  • &gt;は、ampersand greater than semicolonの略です。

&はampersandという名前の記号で、<(小なり記号)はless thanとなり、>(大なり記号)はgreater thanとなるんです。

「実体参照」によって、表示させる画面と、コードの内容を区別できるんですね。

ちなみにpreタグのpreは「preformatted (text)」の略。「すでに整形されたテキスト」という意味です。

「著作権記号」も、WordPressのコードで表示できます

著作権記号

© idoharu.net

この丸Cマークも、WordPressのコードエディターにて、表示させることができる。

&copy; idoharu.net

このコード「&copy;」でOK。

他の記号については、Wikipediaの文字参照に詳しく載っています。

ドットインストール#29で勉強した内容です。よかったらどうぞ。以上となります、では!

ちなみに、文字起こしして自作のテキストを作りつつ勉強しています。参考までにどうぞ。

無料ドットインストールでHTMLを勉強【基礎文法入門全30回】1/3終了。文字起こししつつ、コード記入で自作テキスト化