「htmlをブログに表示したいけど、上手くいかない」という方向けの記事です。
結論から言いますと、以下のサイトを利用することで、簡単に解決できます。
では、以下で詳細を説明していきます。
ブログ記事に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コードが作成できます。
難しい方は、以下の画像を参考にしてみてください。
オプションの<code></code>で囲む、<pre></pre>で囲むにチェックを入れることで、これらのコードで囲まれたコードが変換後のコードとして出力されます。
<code></code>で囲む、<pre></pre>で囲むに対応している場合は、これらを選択することで、綺麗にコードをブログに表示させることができます。
参考になった記事・サイト
htmlのエスケープについて学べるページ
エスケープツール
結び
いかがでしたか？
上手くいかないことも、調べたら案外簡単に解決したりします。
このサイトでは、これ以外にもWeb開発に関して様々発信していますので、参考にしてみてください。
コメント