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

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

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

Google AdsenseをBloggerに自在に設置するためのノウハウ +Plus One World

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

簡単に設置出来る。Twitterタブボタンをbloggerに設置してみた。 | sunabox

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 独自のコメントアウトの制約を受けません。
  <!-- コード -->
  と書いても削除されることなく、そのままブラウザに送られます。

といった方法があるかと思います。
ブログのカスタマイズを考えている人は、覚えておくといいんじゃないでしょうか。

「クリボウ式 Blogger カレンダー」ガジェット更新

ずっと昔に公開した、Blogger サイドバーにつけられる「クリボウ式 Blogger カレンダー」ガジェット

• クリボウの Blogger Tips: Blogger beta にもカレンダー

というものがあるんですが、

日付をクリックしても記事が変わりません。

…と、またしても動かなくなっていたようなので、スクリプトを更新しました。「動かない！」と外してしまった方も、もう一度試してもらえるとうれしいです。導入は上記リンク先からどうぞ。すでに貼り付けている人は、そのままで新しいコードが適用されます。

この更新に関する技術的な話は、別ブログにまとめています。関心のある人は、参考にしてみてください。

参考：

• クリボウのプログラミングひとりごと: Blogger のガジェット更新用 API と「クリボウ式 Blogger カレンダー」の話

関連：

• クリボウの Blogger Tips: カレンダーウィジェット更新

Blogger ブログに公式「翻訳ガジェット」が登場

Blogger に新しい「翻訳ガジェット」が追加されています。

• Translate, and two more new gadgets for your dynamic blogs | Blogger Buzz

ガジェットの追加は、Blogger 管理画面「レイアウト」から。「ガジェットを追加」リンクをクリックして、ガジェット一覧から「翻訳」を選びます。


うまく動かないときの対処法

…これだけで導入はいいはずなんですが、このブログにつけてみたところ、正しく動いてくれませんでした。問題点は、次の 3 つです。

• 翻訳できない
  最初に気づいたのは、翻訳したい言語の選択肢に「英語」が出てこないことです。うちの場合、ブログ各部の表記を「英語」にしているせいか、ブログのコンテンツの言語も英語だと判断されているようです。そのため「英語から他の言語へ」の翻訳という扱いになり、どの言語への翻訳もうまくいきませんでした。
• 表示形式を変更できない
  ガジェットの追加画面で、翻訳ツールの表示方法を「縦」「横」「プルダウンのみ」の中から選択することが可能なんですが、どう指定しても「縦」に戻ってしまいました。これはブラウザによるものかもしれません。
• ツールバーが常時表示される
  最後は、好みの問題の気もしますが…。このガジェットを付けると、「Google 翻訳」ツールバーがページ上部に常に表示されてしまいます。Blogger には、そもそも Navbar があるので、その上にさらにツールバーが表示されると、不恰好な印象を読者に与えかねません。

で、行ったのが、次のカスタマイズ。「翻訳ガジェット」追加してもうまくいかない場合にのみ、参考にしてみてください。

１．Blogger 管理画面「テンプレート」ページで「HTML の編集」ボタン、「続行」ボタンを押し、出てきた画面から「ウィジェットのテンプレートを展開」にチェックを入れます。

２．「Translate1」という ID のウィジェットを探します。ブラウザの検索機能を使うと便利です。

３．次のコードを見つけ、

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: &#39;<data:pageLanguage/>&#39;,
    autoDisplay: &#39;true&#39;,
    layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
  }, &#39;google_translate_element&#39;);
}

赤字部分を ja に、青字部分は翻訳ツール「横」表示なら HORIZONTAL に、「プルダウンのみ」表示なら SIMPLE に変更します。緑字部分は、最初から「Google 翻訳」ツールバーを表示するかどうかです。false にしておくと、翻訳が行われたときだけツールバーが出るようになります。この行ごと削除しても false 指定と同じになるみたいです。

悪戦苦闘して、ようやく付けられた翻訳ガジェット。サイドバーに掲載しているので、動作を確かめてみてください。一度「英語」などで翻訳を行うと、その手続きを覚えているようで、再度ブログを表示したときにも自動的に「英語」で表示されるようです。


他の 2 つのガジェットも動的ビュー（ダイナミックビュー）対応に

「翻訳ガジェット」登場に伴い、従来からあった「ブログリスト」と「リスト」のガジェットも動的ビュー対応になりました。

これで、動的ビュー対応のガジェットは

• +1 ボタン
• Google+ バッジ
• 翻訳
• 読者
• ブログリスト
• リンクリスト
• リスト
• ラベル
• リンク登録
• 基本情報
• ブログアーカイブ

の 11 種類になりました。


関連：

• クリボウの Blogger Tips: ダイナミックビュー（動的ビュー）でもガジェットが使用可能に