【1分で解決!】WordPressのブログ記事にhtmlを表示させたいけど上手くいかない場合の対応方法

【1分で解決!】WordPressのブログ記事にhtmlを表示させたいけど上手くいかない場合の対応方法 ウェブ開発

「htmlをブログに表示したいけど、上手くいかない」という方向けの記事です。

結論から言いますと、以下のサイトを利用することで、簡単に解決できます。

HTMLエスケープツール

HTMLエスケープツール | Web制作小物ツール - dounokouno.com

では、以下で詳細を説明していきます。

スポンサーリンク

ブログ記事にhtmlがうまく表示されない理由

ブログ運営をしていると、情報共有や自分用の備忘録として、ブログ記事にhtmlを記述して、残したいということがありますよね。

その場合、問題となるのが、記事に上手くhtmlが表示されないという問題です。

この理由は『記述したhtmlがそのままソースコードだと勘違いされて、その処理をしてしまうから』なんです。

例えば、以下のようなhtmlコードをブログに表示したいのに、

<p style="text-align: center;"><a class="btn btn--green btn--cubic btn--shadow"
href="https://zaco-engineers.com" rel="nofollow "><span style="font-size: 15px;">
<i class="fas fa-angle-right"></i> ボタン</span> <span style="font-size: 10px;">テスト用ボタン</span></a></p>

このコードに従って、以下のようなボタンが作成されてしまうという現象が発生することがあります。

ボタン
テスト用ボタン

これは、やりたい処理ではないですよね。

以下でこれの解決方法を説明します。

スポンサーリンク

ブログ記事にhtmlがうまく表示されない時の解決方法

htmlコードが上手く表示されない時の解決方法をご説明します。

htmlコードをソースコードとして、読み込まれないように、『エスケープ』させることで解決します。

方法としては、以下のサイトに表示したいhtmlコードを変換前の欄に、記入して変換をクリックすると、エスケープされたコードを作成することができます。

HTMLエスケープツール | Web制作小物ツール - dounokouno.com

そして、変換後の欄に表示されたコードをコピーして、ページにペーストするだけで、ソースコードして読み込まれないけど、記事にした際に上手く表示されるhtmlコードが作成できます。

難しい方は、以下の画像を参考にしてみてください。

エスケープツールの使い方

オプションの<code></code>で囲む、<pre></pre>で囲むにチェックを入れることで、これらのコードで囲まれたコードが変換後のコードとして出力されます。

<code></code>で囲む、<pre></pre>で囲むに対応している場合は、これらを選択することで、綺麗にコードをブログに表示させることができます。

スポンサーリンク

参考になった記事・サイト

htmlのエスケープについて学べるページ

HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】 | TechAcademyマガジン
初心者向けにHTMLで特殊文字のエスケープ処理を行う方法について解説しています。ブラウザ上では何が起きてるか分からないかもしれないですが、サイトのセキュリティ的にも大事な部分なので、ぜひ実際に書いて慣れていきましょう。

エスケープツール

HTMLエスケープツール | Web制作小物ツール - dounokouno.com
スポンサーリンク

結び

いかがでしたか?

上手くいかないことも、調べたら案外簡単に解決したりします。

このサイトでは、これ以外にもWeb開発に関して様々発信していますので、参考にしてみてください。

コメント

タイトルとURLをコピーしました