2012/06/25

[blogger]外部ツールのスクリプトがうまく動かないときは、まずはココを確認してみましょう!

follow us in feedly
follow us in RSS

こんにちは!色んなところで、体調を崩してる人がいるのを見ていたら、自分の体調がどうも悪い事に気付いた、すなふ(@sunafu35)です。多分風邪引いた(・・

bloggerのカスタマイズをする時に、けっこう特有のルールがあったりしてうまくいかなかったりすることが多いですが、その一つに・・・

  • 『外部ツールのスクリプトをテンプレートHTMLに貼っても動かない』

というものがあります。


参考リンク

Blogger 「HTML の編集」で JavaScript や CSS のコードを貼り付けるときの注意点 | クリボウの Blogger Tips
Blogger ブログのテンプレートに、外部ツールのスクリプトなどを直接貼り付けると、思った通りには動かない場合があります。 ...


ここでの外部ツールとは、
  • 「Linkwithin」・・・関連記事を表示する
  • Smart related posts widget」・・・関連記事を表示する
  • 複眼RSS」・・・サムネイル付きでランダム記事表示など
  • Twitterバッジ」・・・画面サイドにフォローミーボタンを設置
など、まぁ様々なものがあるのですが、これらのコードを直接テンプレートHTMLに貼っても、動かない事が多々あります。・・・エラーが出たりね。

これは、@kurikuriboさんに説明されて、やっとちゃんと理解出来た気がするような部分なのですが、bloggerの「コメントアウト」の扱いによるものです。


コメントアウト

コメントアウトとは、
<!--
  本体コード
-->
などのように、『<!-- -->』の部分で挟まれたコードの部分ですが、これをそのままテンプレートHTMLに貼ると、外部から見た時にコメントとして扱われます。
それはそれで本来の目的なのですが、スクリプトコードで使われている場合などには問題があるということです。

外部ツールでは、
<script type="text/javascript">
  <!--
  コード
  -->
</script>
というようなコードを使ってくださいということがよくありますが、このままではダメということですね。


対応方法

これに対応するには、

  • 1つには、『<!-- -->』の部分を変更する。
  • もう1つには、ガジェット『HTML/Javascript』を利用する。

こんな対処が必要になります。

具体的には、

1.) 直接テンプレートHTMLにコードを貼る場合
<script type="text/javascript">
  <!--
  コード
  -->
</script>
↓ ↓ ↓
<script type="text/javascript">
  &lt;!--
  コード
  --&gt;
</script>
このように書き換えて設定する。

2.) ガジェットを使う場合
『管理画面>レイアウト』から、ガジェットの追加で『HTML/Javascript』を選択して、
<script type="text/javascript">
  <!--
  コード
  -->
</script>
そのまま貼る。

こんな対応方法になります。

●書き換える場合の方法は、実体参照コードに変換するという方法ですね。


その他の実体参照変換例

このようなコメントアウトの場合以外でも、bloggerでは、テンプレートHTMLに貼り付ける場合には、実体参照に変換しないとエラーになる物があります。

全てというわけではなく、
<script type="text/javascript">
コード
</script>
のように、内部スクリプトとして書かれている場合に必要になるようです。

変更必要文字

変更前実体参照
&&amp;
"&quot;
<&lt;
>&gt;

ただ、bloggerのテンプレートHTMLに貼り付ける場合に、自動で変更されるものもあり、それが特にややこしくさせています。
この4つは、スクリプト内にあった場合に、変更してからでないとエラーが出てしまった部分(経験上)なので、特に注意しておくといいと思います。

その他

変更前実体参照
'&#39;

こちらは、数値文字参照という状態ですが、変更しなくても、自動で変更されてしまう例です。
頭の片隅に置いて貰えれば、特に普段気にすることはないかと思います。


このあたりの癖も、bloggerはカスタマイズしづらいと言われる所以だと思いますが、カスタマイズをする人は、是非覚えておいて下さい。

クリボウさん、ありがとうございました!


[blogger]ガジェットのコードの挿入位置を確認する - sunabox

標準機能がここまで便利!サイトデザインを変えたい初心者にこそオススメしたい、Chrome「デペロッパーツール」で驚いた! - sunabox

2 件のコメント:

  1. どういたしましてです。
    書いたものがお役にたったようでよかったです!
    ちなみに「クリボー」でなく「クリボウ」だったりします…汗;

    返信削除
  2. うぎゃーーー!申し分かりません~~~(°□°;)

    返信削除

Related Posts Plugin for WordPress, Blogger...