« 松本人志のツイッターはリンカーンの企画? | トップページ | フリーソフト AviUtlで逆再生動画を作成する方法(動画あり) »

2013年5月 9日 (木)

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の文字参照を使って、「その部分は文字として表示したい」ということをブラウザ側に伝えてあげればいいということなんですよね。↓こういう感じ。

FC2ブログにHTMLソース貼るにはどうすればいいですか? - 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入門
ブログをもっと楽しく活用する本―カスタマイズのための基礎知識&HTML・CSS入門

|

« 松本人志のツイッターはリンカーンの企画? | トップページ | フリーソフト AviUtlで逆再生動画を作成する方法(動画あり) »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/517450/60884158

この記事へのトラックバック一覧です: FC2ブログに、htmlソースをそのまま表示する方法:

« 松本人志のツイッターはリンカーンの企画? | トップページ | フリーソフト AviUtlで逆再生動画を作成する方法(動画あり) »