top3

プラグインを使わずワードプレスなどブログでHTMLタグを表示させる方法

Pocket

wrangler-510.poster
ブログで記事を書く際に、まれにHTMLタグを表示させたい場合があります。

ですが、当たり前ですがそのままブログに載せたとしても表示させることってできませんよね。



例えば、アンカーテキスト(例えばヤフー)のタグを表示させたい場合でも、上手くいきません。



はじめの「<」の後ろにスペースをあけたり、

< a href=”http://www.yahoo.co.jp/” rel=”nofollow” Target=”_blank”>ヤフー



<」を大文字にしてみたり

a href=”http://www.yahoo.co.jp/” rel=”nofollow” Target=”_blank”>ヤフー


こうすれば、表示させることができるのですが、正しいタグじゃないため、なんか気持ち悪い感じがします。



<」を「&lt;」、「>」を「&gt;」にに変換させることで、正しくHTMLが表示されるのですが、正直面倒ですよね。



そのために、便利なのがCrayon Syntax Highlighterなどに代表されるプラグインを使うことによって、表示させる方法です。

たしかに、これは凄く便利ですし、導入するだけで一発で解決してくれます。

こんな感じで…





僕もずっとこのプラグインを利用してたのですが、プラグインを必要とせず、手間もかからず表示させる方法はないかなと思っていたところ、いくつか方法を見つけましたのでご紹介したいと思います。



プラグインを使わずHTMLを表示させる



  1. 画像を使う
  2. ビジュアルモードからテキストモードに変換する
  3. 変換できるサイトを利用する

1,画像を使う


まずは画像を使う。

これはキャプチャソフトなどを利用して、画像を切り取り、貼り付けてしまうという方法ですね。

58525d13bad05bd79863bad0e85a57c3

僕は正直なところ、プラグインを利用するならこの方法のほうが見やすいし、読者にとってもわかりやすいのではないかなと思ってしまいます。

画像を切り取ることにより、画像編集もすることができるので、さらに自分なりに見やすくなるように加工することもできますし。



2,ビジュアルモードからテキストモードに変換する


これはワードプレスを利用されている方用なのですが、はじめにビジュアルモードでHTMLタグを表示させます。

65860bcbbab65f978458a50b0ac11725
そのあとに、テキストモードに変換させると・・

67abd26f79b7a7727caed8f6a32919a0


このように、自動的に「<」と「>」が変換されています。

僕はいつもテキストモードで記事作成しているのですが、ビジュアルモードで使っている方は、記事を投稿するときだけテキストモードにするのがいいかもしれませんね。



3,変換できるサイトを利用する


僕がもっとも使えるなーと思ったのは以下のサイトを利用して変換するということです。

http://amenti.usamimi.info/ltgtamp.html



使い方は簡単で、上に変換したタグを入力して、「エンコード」をクリックするだけ。

これだけで、すぐにブログ上に表示させられる文章に変換させられることができます。

c20feec19b4d3e4dc657f5db927c2108

僕はこの「3」の方法を使うためにブックマークしておくことに決めました!

ブログを始めたばかりの頃は、「なんでちゃんと表示されないんだろ?表示させるためにはどうすればいいんだろ?」なんて本気で悩んでいました(笑)

こういう便利なツールはどんどん使っていくべきですね。とりあえず、このツールを作ってくれた方に感謝です!

コメントを残す

サブコンテンツ