ブログのカスタマイズ関連の記事を作成していると、
「HTML コードを表示させたい」
と思うことが多々ありますが、ただ闇雲に記事の文章にHTMLコードを入力してもコードとして認識されるためうまく表示できません。
そんな悩みをお持ちのブロガーの皆さん！
今回は一番すっきりした形でコードを表示させる方法を紹介します。
ブログでHTML を表示させるためのコードはこれ
まずは結論からお伝えします！
今回は3パターンのコードを紹介します。
どのコードを使用するかは皆様次第ですが、下記のブログ環境での動作確認は済となっているのでご参考まで。
・はてなブログPro
・独自ドメイン未取得
・はてな記法で記事作成
・使用テーマ：Brooklyn
HTMLを表示させるためのコード①code
<code>表記したいHTMLコード</code>
これが一番スッキリしたコードかと思います。
しかし、2行以上のコードを紹介する際には少し見栄えが悪いかもしれません(あくまで個人的感想ですが)。
2行以上の例↓
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}
HTMLを表示させるためのコード②pre
<pre>表記したいHTMLコード</pre>
①のcodeよりもこちらのコードで入力されているブログが多いように感じます。
複数行になっても該当コードが四角で囲まれるため、見やすいと思います。
2行以上の例↓
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}
HTMLを表示させるためのコード③pre+code
<pre><code>表記したいHTMLコード</code></pre>正直に言うと、preとcodeを重ねて入力して良いのかは分かりません。
しかし当ブログに限ってはデザイン的には一番良いと思っています。
そのため、他の記事ではこちらのコードを使用して紹介したいコードを表記しています。
2行以上の例↓
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}HTML を表示させるための注意点
上記手順のみでコードを紹介出来るようになるのですが、
「あれ？実際にやってみたけどおかしいな？」
という方もいらっしゃるかもしれません。
もしかしたら、その表示させたコードに「<」「>」「&」などの文字が入っていないでしょうか？
これらの文字(<.>.&)は特殊文字として扱われます。
そのため、preやcodeで囲んであげたHTMLコードの中に特殊文字がある場合は書き換えてあげる必要があります。
「<」
→「<」
「>」
→「>」
「&」
→「&」
となります。
おそらくこれで解決されたのではないでしょうか？
これでも解消しない場合は他の特殊文字も入っているのかもしれませんので、「特殊文字 一覧」等でググってみて下さい。
たくさんの文字や記号が特殊文字とされていますよ。
