こんにちは、奥田です。
今回はWordPressでお客様から以前ご質問いただいた内容を記事にしました。

WordPressの記事でコードをそのまま表示する方法

WordPressで記事を書いているとき、HTMLなどのコードをそのまま載せたいのに、コードが実際のデザインとして反映されてしまう……。

「コードを紹介したいだけなのに、表示が崩れた！」なんて経験、ありませんか？
今回は、WordPressの記事内でHTMLコードを文字としてそのまま表示する方法をご紹介します。

コードをそのまま入力するとどうなる？

例えば、記事内に以下のようなHTMLコードを載せたいとします。

しかし、これをWordPressの通常の編集欄にそのまま入力すると、コードとしてではなくHTMLとして解釈されてしまいます。

実際にやってみます

こんな感じ。
コードを見せたいのに、実際のページデザインになってしまいます。

編集画面

プレビュー

そんなときは「<」「>」を使う

そこで使うのが、HTMLの特殊文字です。

このように置き換えることで、WordPressに「これはHTMLタグではなく、文字として表示するものですよ」と伝えることができます。

例えばこんな感じ

先ほどのコードを、

と記述すると、ページ上ではHTMLタグをコードとしてそのまま表示できます。

覚えておくのはこの2つだけ！

HTMLコードを記事内に表示したいときは、まずこの2つを覚えておけばOKです。

WordPressでHTMLやCSSなどのコードを紹介するときに、とても便利な方法です。
「コードを書いたらデザインになってしまった……」というときは、ぜひ試してみてください！

まとめ

今回の記事は以上です。
いかがだったでしょうか？

ではまた次回。

メルマガ登録