WordPress|Diverの入力補助「コード」でHTMLソースを反映させる方法

WordPress(ワードプレス)のDiver（ダイバー）の入力補助の「コード」で

HTMLのソースコードを反映させたい！

今回はこのtableのhtmlコードで呼び出したい時に困った方向けの記事です！！

まず、次のような表のhtmlソースで記述する方法をWordPress(ワードプレス)の記事で伝えたいとします。

ブログの種類
日記ブログ
雑多ブログ
雑記ブログ
特化ブログ

Diverの「コード」を使ってみる

テキストエディターのコードを

ビジュアルエディター「Diverのテーマ」にある「入力補助」起動！

「コード」で表示だ！！！

あれ？？？

さっきと同じような表示担ってしまう。

なんだかうまく表示できない（汗）

本当はこんな感じに表示させたいのにー！！！

ブログの種類
日記ブログ
雑多ブログ
雑記ブログ
特化ブログ

ってかたは30秒くらいで原因と解消する方法があるので読んでいって下さい（笑）

htmlがうまく反映しない原因

うまく表示反映されない原因としては

htmlのソースコードを「Diver」の「コード」に

そのまま入力してしまうとhtmlのソースコードとして読み取って変換してしまうからです。

こういった場合はhtmlの「＜」や「＞」を特殊記号に変換しないといけません。

htmlのソースコードを表示させる解決方法

解決方法は

htmlの「＜」や「＞」を特殊記号に変換するツールを利用して変換させる必要があります。

入力したテキスト内の不等号・アンパサンド・クォーテーションを

HTMLの特殊記号に変換するツールを利用しましょう。

変換してくれるサイトはたくさんありますが

今回私が使ったサイトこちらのサイトです。

https://webtools.dounokouno.com/htmlescape/

こちらのサイトは

入力された内容の「&」、「"」、「'」、「<」、「>」を次のように変換してくれます。

• & → &amp;
• " → &quot;
• ' → &#39;
• < → &lt;
• > → &gt;

まとめ

WordPress(ワードプレス)のDiverの入力補助「コード」でHTMLソースでした。

もし、コードをWordPress(ワードプレス)の記事に入れ込みたい方で上手くいかない場合は

HTMLを特殊記号に変換するツールを利用してみて下さい。