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

こんにちは！色んなところで、体調を崩してる人がいるのを見ていたら、自分の体調がどうも悪い事に気付いた、すなふ(@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>

のように、内部スクリプトとして書かれている場合に必要になるようです。

変更必要文字

変更前	実体参照
&	&
"	"
<	<
>	>

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

その他

変更前	実体参照
'	'

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

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

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