>--> Blogger 「HTML の編集」で JavaScript や CSS のコードを貼り付けるときの注意点 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | | | > Blogger 「HTML の編集」で JavaScript や CSS のコードを貼り付けるときの注意点

Blogger 「HTML の編集」で JavaScript や CSS のコードを貼り付けるときの注意点

Blogger ブログのテンプレートに、外部ツールのスクリプトなどを直接貼り付けると、思った通りには動かない場合があります。

ブログのテンプレートに直接コードを書くとGoogle AdSenseは表示されませんでした。

私の環境では、ツイッターボタンがHTML貼り付けだとうまく表示できませんでした・・・。


Blogger のコメントアウトの扱い

なぜこういうことが起こるかというと、配布されているコードに含まれるコメントアウトが、Blogger では特別な扱いを受けるから。

たとえば、Blogger の 「HTML の編集」では

<!-- コード -->

という形のコメントアウトが使えません。正確には、 <----> とで囲まれたこのコードの行は Blogger テンプレート内のコメントとして扱われてしまい、実際のブログのページ生成時には、この部分が削除されてしまいます。

なので JavaScript でよく

<script type="text/javascript">
  <!--
  alert("Hello, World!");
  //-->

</script>

という風にコードを書きますが、これを Blogger のテンプレートに直に書いても、

<script type="text/javascript">
</script>

というデータしか書き出されず、肝心のコードが実行されなくなってしまいます。


対処法

では、どうやってコードを書き出すかというと、

  • コメントアウトの書き換え
    <!-- コード -->
    というコードを
    &lt;!-- コード --&gt;
    と実体参照に書き換えて「HTML の編集」に貼り付けると、
    <!-- コード -->
    という風に HTML 上のコメントアウトとして、意図したとおりにブラウザにデータが届きます。

  • コメントアウトをやめる
    単純に <----> を消して
    コード
    だけにする方法です。当たり前ですが、コードが消えてなくなることを回避できます。

  • ガジェットに入れる
    Blogger の「HTML/JavaScript」ガジェットに貼り付けたコードは、先に示した Blogger 独自のコメントアウトの制約を受けません。
    <!-- コード -->
    と書いても削除されることなく、そのままブラウザに送られます。
といった方法があるかと思います。
ブログのカスタマイズを考えている人は、覚えておくといいんじゃないでしょうか。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:4

  1. 二日間悩んでいたことが解決しました。本当に有難うございました。m(__)m

    ReplyDelete
  2. http://transferefurniture.bcz.com/2016/07/31/%d8%b4%d8%b1%d9%83%d8%a9-%d9%86%d9%82%d9%84-%d8%a7%d8%ab%d8%a7%d8%ab-%d8%a8%d8%ac%d8%af%d8%a9/ شركة نقل عفش بجدة
    http://transferefurniture.bcz.com/2016/08/01/%d8%b4%d8%b1%d9%83%d8%a9-%d9%86%d9%82%d9%84-%d8%b9%d9%81%d8%b4-%d8%a8%d8%a7%d9%84%d9%85%d8%af%d9%8a%d9%86%d8%a9-%d8%a7%d9%84%d9%85%d9%86%d9%88%d8%b1%d8%a9/ شركة نقل عفش بالمدينة المنورة
    http://transferefurniture.bcz.com/2016/08/01/%d8%b4%d8%b1%d9%83%d8%a9-%d9%86%d9%82%d9%84-%d8%b9%d9%81%d8%b4-%d8%a8%d8%a7%d9%84%d8%af%d9%85%d8%a7%d9%85/ شركة نقل عفش بالدمام
    http://transferefurniture.bcz.com/2016/07/31/%d8%b4%d8%b1%d9%83%d8%a9-%d9%86%d9%82%d9%84-%d8%b9%d9%81%d8%b4-%d8%a8%d8%a7%d9%84%d8%b1%d9%8a%d8%a7%d8%b6/ شركة نقل عفش بالرياض
    http://transferefurniture.bcz.com/%d8%b4%d8%b1%d9%83%d8%a9-%d8%aa%d9%86%d8%b8%d9%8a%d9%81-%d8%ae%d8%b2%d8%a7%d9%86%d8%a7%d8%aa-%d8%a8%d8%a7%d9%84%d9%85%d8%af%d9%8a%d9%86%d8%a9-%d8%a7%d9%84%d9%85%d9%86%d9%88%d8%b1%d8%a9/

    ReplyDelete
  3. http://transferefurniture.bcz.com/%d8%b4%d8%b1%d9%83%d8%a9-%d8%aa%d9%86%d8%b8%d9%8a%d9%81-%d8%a8%d8%a7%d9%84%d8%b7%d8%a7%d8%a6%d9%81/
    http://transferefurniture.bcz.com/%d8%b4%d8%b1%d9%83%d8%a7%d8%aa-%d8%a7%d9%84%d9%86%d9%82%d9%84-%d8%a7%d9%84%d8%b9%d9%81%d8%b4-jumperads-com/
    http://transferefurniture.bcz.com/%d8%b4%d8%b1%d9%83%d8%a9-%d9%85%d9%83%d8%a7%d9%81%d8%ad%d8%a9-%d8%ad%d8%b4%d8%b1%d8%a7%d8%aa-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84%d8%a9/
    http://transferefurniture.bcz.com/ شركة نقل عفش | http://transferefurniture.bcz.com/ شركة نقل اثاث بجدة | http://transferefurniture.bcz.com/ شركة نقل عفش بالرياض | http://transferefurniture.bcz.com/ شركة نقل عفش بالمدينة المنورة | http://transferefurniture.bcz.com/ شركة نقل عفش بالدمام
    http://khairyayman.inube.com/blog/5015576// شركة نقل عفش بجدة

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.