今まで幾度となく調べてみよう！と思っていてけどなかなか実行に移していなかった
「ブログの記事でHTMLコードを表示する方法」
ですが、ようやく重い腰を上げて調べた結果見つけました！
今回はその方法を紹介します。
ブログでHTMLコードを表示する？
そもそも記事にHTMLコードを表示するのに何か問題あるの？
という方に簡単に紹介しますが、、
記事の本文中にHTMLコードを入力すると、それはコードとして認識されるためコード自体の文字列は記事に表示されません。
例えば、本文の一部にラインを引きたい時に記事中に挿入するHTMLコードがあるのですが、それを下の行で表示してみると…
お試し
「お試し」のところに水色のラインが引かれていますよね？
今回の場合は水色のラインを表示させたいのではなく、この水色のラインを呼び出すためのHTMLコードの文字列そのものを表示させたいのですが、普通に入力するだけだとコードとして認識されてしまうため文字列として表示されません。
それでは実際にHTMLコードを単なる文字列として認識させる方法を紹介します。
ブログでHTMLコードを文字列として認識させる3つの方法
今回紹介する方法は3つあります。
下記条件でこの3パターンの動作確認を行っています。
・はてなブログPro
・独自ドメイン取得
・ブログテーマ：Minimalism Brooklyn
HTMLコードを表示させるためのコード①code
<code>表記させたいHTMLコード</code>
codeで表示させたいコードを囲ってあげるイメージとなります。
一番簡便な表示になるかと思いますが、表示させたいコードが2行以上になる際は少し見栄えが悪くなるかもしれません。
2行以上の例↓
<div class="box26"> <span class="box-title">タイトル</span>
<p>文章</p></div>
HTMLコードを表示させるためのコード②pre
<pre>表記したいHTMLコード</pre>
このpreを使用しているブログをよく目にします。
おそらく①で紹介したcodeよりも使用している方が多い印象です。
個人的には2行以上のコードになると四角で囲ってあげた方が見栄えが良いのかな？と思っています。
2行以上の例↓
<div class="box26"> <span class="box-title">タイトル</span>
<p>文章</p></div>
HTMLコードを表示させるためのコード③pre+code
<pre><code>表記したいHTMLコード</code></pre>preとcodeの合わせ技です(笑)
正直合わせ技にして良いのかは不明ですが、少なくてもPC環境で記事を見るとpre単独よりもpre+codeの方が字体が見やすいかなと感じています。
2行以上の例↓
<div class="box26"> <span class="box-title">タイトル</span>
<p>文章</p></div>ちなみに、ここまで「2行以上の列↓」で紹介してきたコードを当ブログで入力すると、下記のようになります。
文章
このカスタマイズはデザインCSSにコードを入力しておき、上記のコードでデザインを呼び出すようなカスタマイズとなっています。
このカスタマイズを知りたい方は
はてなブログのテーマ「Minimalism」のカスタマイズについて - 薬剤師とザリガニの奮闘記
で簡単に触れていますので、参考にしてみて下さい。
※「本文中のボックス」という見出しのところで紹介しています。
HTMLコードの表示がうまくいかない時の対処方法
上の方法で入力してみてもうまくいかない…
ということも多々あるかと思います。
その原因の一つは「特殊文字」にあるかもしれません。
有名どころとしては「<」「>」「&」あたりが特殊文字に当たります。
これらの文字を表示させるためには下記のように書き換える必要があります。
「<」→「<」
「>」→「>」
「&」→「&」
上記のように書き換えることで恐らく大部分の方が問題なく表示できたかと思いますので、ご参考まで！
