ブログ記事にhtmlコードや特殊文字を簡単に『記載』する方法

ブログに直接、html のコードなどを貼りつけたい(記載したい)時があります。特に自分はこんな感じにカスタマイズしていますよ、という感じで読者にも説明したい時に思ったりします。

アフィリ王子アフィリ王子

『<』や『>』などの特殊文字は変換したり、エスケープしたりする必要があります。

ネット王女ネット王女

回避策として Java で変換する方法などもあるようですが・・・
『お手軽・簡単』ではありません。

実は・・・もっと簡単な方法があります。WPの投稿の編集画面からすぐにできてしまうやり方です。今回はそれをご案内します。

今回の記事では

  • html コードなどを簡単に
  • コピペ感覚で
  • ブログ記事に入力する

というやり方をご案内します。

秋田秀一秋田秀一

元銀行員の秋田です。定年退職後にネット通販で起業しました。
今回はWPの投稿の編集画面が『クラシックエディタ』スタイルを前提にしています。
『ビジュアル』と『テキスト』の表示を切り替えることができる入力スタイルでのやり方です。



コピペでできるhtmlコードの入力

例文として・・・画像を表示する一文を使います。

<p class=”al-c”><img src=”https://www.○○○.com/images/temp.jpg” width=”640″ height=”400″ alt=”バナー画像”><br>文章を入れる</p>

この一文をブログ記事に投稿する場合です。

ビジュアルエディタ画面で普通にコードを入力(テキスト画面で入力するように)・・・【1】

ズバリ下図のような感じです。

html コードの記事投稿

コピペして記事編集画面に入力・・・【2】完成!

『ビジュアルエディタ』から ⇒ 『テキストエディタ』に移ってそこに表示されている『文字列』をコピーして狙いとする記事へコピペしたらOKです。

html コードの記事投稿

※今回は、すでに本記事に表示されるような形にしていますが、通常は別記事編集で『新規追加』してから、そこのページで『変換作業』をしてください。

まとめ

次のような文章を記事に入力する『やり方』、もうバッチリですね。

<p class=”al-c”><img src=”https://www.○○○.com/images/temp.jpg” width=”640″ height=”400″ alt=”バナー画像”><br>文章を入れる</p>

  • 記事投稿の編集画面からコード・特殊文字を変換するには・・・
  • ビジュアルエディタ画面にコードを入力して、それをテキストエディタ画面で確認
  • テキストエディタ画面からコピペすれば簡単に別記事に入力できる

というやり方でした。

面倒くさい特殊文字への変換等を自分でやる必要はありません。ぜひ、お試しください。


ここまでありがとうございました。