BloggerにHTMLコード等を、そのまま貼り付けて表示させる方法

おすすめ記事ピックアップ

Bloggerの投稿にHTMLコード直接貼り付けると、HTMLコードなので、うまく表示されなくなります。ちょっとHTMLコードについて、説明したいときに不便です。

preタグを使えば、HTMLコードが直接表示されるようになります。手打ちだと、いろいろ面倒くさいことが多いので、こちらサービスがオススメです。

ソースを「そのまま表示する為のHTMLソース」に変換
http://blogtool.flatlabs.net/source.html

こんな複雑なコードもそのまま貼り付けられます。とても便利です。

<!-- ここから-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
</b:if>
<!-- ここまでbif閉じした-->

実際に使ってみましょう。サイトを開きます。

コードをヌタっと貼り付けます。

変換します。

コピペします。

Bloggerに貼り付けます。完成！簡単！

素晴らしいサービスですね。

ソースを「そのまま表示する為のHTMLソース」に変換
http://blogtool.flatlabs.net/source.html