Webデザインを学ぶにあたって、HTMLやCSS等のコードを記事に載せたいなと思ったので、コードを記事内に何も考えずストレートに書きました。
結果、表示されませんでした。
筆者でいろいろ試した結果、改善するための最善の方法を見つけたので備忘録として記載します。
CSSについては別途コード記載欄があるので、主にHTMLを書いているときにこの事象に遭遇するのではと思います！
検証
検証したWordPressのテーマは「Cocoon」です。
<pre></pre>で括ってみた
何も変化なし。
エディタから文字列が消えました。
上記のように、なぞのボックスが出現するだけでした。
※WordPressのテーマによって出てくるものは異なるとのこと
プラグインを入れてみた
ネットで調べると、「Crayon Syntax Highlighte」というプラグインが有名でした。
いざ、インストールしてみると、エラーが発生しました。
怖かったので即アンインストールしました。
最終更新日が4年以上前です。。
プラグインもあまり入れたくなかったので、特に気にせずスルー。
結局、<pre></pre>で括るが少しお手入れ
<pre></pre>で括ったときに反応がなかったのは、どうやら<>が影響してた模様。
<pre><ああああああああ</pre>
この><です。
改善には、置き換えが必要です。
WordPressの記事内での投稿時は自動的に置き換えてくれていたようです。
全く気づきませんでした・・・
置き換えに便利な手段
記事を書くたび、ひとつひとつ< >を変換するのは手間ですよね。
それを簡単にやってくれるのが、HTML Escapeというツールです。
左側の窓にコードを貼り付けると、右側の窓に変換されたコードが表示されるので、右側の窓のコードをコピーして、記事にペーストしちゃってください。
これで問題解決です。
まとめ
HTML特殊文字コードというものがあり、記号をそのまま書いても表示されないことがたまにあります。
その場合は、ツール等で文字を置き換えて書いてみてください。
ブログの始め方は下記にまとめているので、ぜひご覧ください。
WordPress導入におすすめのレンタルサーバーはこちらをおすすめしています。
ブログを始めるのにおすすめなパソコンの選び方記事もまとめています。
