FC2ブログに、htmlソースをそのまま表示する方法

↓このエントリを書いたときに、

iframeを使って、gooとYahooとgoogleの検索ワードランキングをいっぺんにチェックする - 急上昇ワードな理由

意外に苦労した点なのですが、サンプルのhtmlソースを載せようとすると、それがhtmlとして解釈されてしまって、ソースが表示できなかったんですよね。例えば、iframeタグのサンプルを載せたら、ソースじゃなくて、iframeのフレーム窓そのものが表示されてしまうような感じです。

つまり、

↓こう表示させたいのに・・・
<iframe src="http://ranking.goo.ne.jp/keyword#incontents" name="キーワードランキング - goo ランキング" width="340" height="355" scrolling="no"></iframe>

↓こうなってしまう

原因＆解決法はすぐに分かって、要はHTMLの文字参照を使って、「その部分は文字として表示したい」ということをブラウザ側に伝えてあげればいいということなんですよね。↓こういう感じ。

FC２ブログにＨＴＭＬソース貼るにはどうすればいいですか？ - Yahoo!知恵袋

ベストアンサーに選ばれた回答
limelight_707さん

文字参照を使いましょう。
タグインデックス「文字参照」・・http://www.tagindex.com/html_tag/basic/character.html

使用例
<a href="http://www.yahoo.co.jp/">Yahoo</a>
↓文字参照を使用するとこうなります。
&lt;a href=&quot;http://www.yahoo.co.jp/&quot;&gt;Yahoo&lt;/a&gt;

ふむふむ。でも、この
　　<　→　&lt;
　　"　→　&quot;
みたいな置き換えを自分でやるの？と、めんどくさくて途方に暮れそうになったのですが、必要なものは誰かが作ってくれているもんですね、↓こういうページがありました。

-ブラウザ表示用ソース自動生成プログラム-

上記ページに、貼り付けたいhtmlソースを入力して、「ソース生成」ボタンを押せば、一括で変換してくれます。

他にも同じようなツールがありますね↓

【ブログツール】ソースを「そのまま表示する為のHTMLソース」に変換

便利な世の中です。

ちなみに、この文字参照を使ってhtml解釈を回避する方法が使えるのは、FC2ブログに限ったことではないんですが、このエントリのタイトルに「FC2ブログに」とつけたのには理由があって、それは例えば、ニフティのココログだったら普通にできる、からなんですね。

ココログの場合だと、編集モードを「記事の作成」タブと「HTMLの編集」タブで切り替えるんですが、そのまま表示させたいときには「記事の作成」モード、htmlとして解釈してほしいときには「HTMLの編集」モードで入力すればいいだけなんです。

ブログサービスによっては、こういうような機能もあるので、気にしたことない人も多いんじゃないでしょうか。

少なくともFC2ブログユーザは、この壁にぶつかる可能性があるということで、このタイトルにしてみました。

ブログをもっと楽しく活用する本―カスタマイズのための基礎知識&HTML・CSS入門