2016年7月1日

bloggerでテンプレートを編集する


ことの発端は Google AdSense でアンカー広告が使えるようになったことです。試しにやってみようと思いました。


bloggerで自分のブログを開きます。

「テンプレート」を開きます。


「ブログで使用中」の 「HTMLの編集」をクリックし、<head>タグ直後にAdSenseで発行したコードを貼り付け、「テンプレートを保存」します。


まずここで問題がありました。コードは以下のようなスクリプトなのですが、そのまま貼りつけると「テンプレートを保存」でエラーになります。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "XXXXXXXXXXXXX",
    enable_page_level_ads: true
  });
</script>

調べるとテンプレートに書かれたテキストはhtmlに変換されるので、特殊文字などは意図としない変換が行われてしまうということです。例えばhtmlで使われるコメント<!-- comment -->はテンプレート上のコメントとして扱われるのでhtmlには出力されない、などです。
そのために特殊文字を変換してからテンプレートに貼り付けます。一文字一文字変換するのは面倒なのでウェブ上の変換ツールを利用すると簡単です。特にリンクはしませんが「HTML 特殊文字 変換ツール」で検索すればいくらでも出てくると思います。
次のように変換されます。

&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: &quot;XXXXXXXXXXXXX&quot;,
    enable_page_level_ads: true
  });
&lt;/script&gt;

これを貼り付けて「テンプレートを保存」したところ正常に保存されました。

ところがここで次の問題が。スマホの画面で見てもアンカー広告が表示されません。ソースを見ると追加したはずのコードが入っていないことが分かりました。PC用のページを表示させるともちろん(スマホ用広告なので)アンカー広告は表示されませんが、ソースを見るとコードが入っています。

「モバイルテンプレート」の方にも「HTMLの編集」ボタンが用意されていれば何の迷いもないのですが、ありません。調べた結果、モバイルテンプレートの種類を「カスタム」にすればよいことが分かりました。元々は「シンプル」になっていました。



「ブログで使用中」テンプレートはPC専用ではないものの、「モバイルテンプレート」が「カスタム」以外では「ブログで使用中」テンプレートに加えた修正は反映してくれないようです。

無事、アンカー広告が表示されるようになりました。ただしこの広告、端末機種を選ぶようで表示されない端末も多いです。嫌いな方もおおいでしょうから様子を見て続けるか判断したいと思います。





0 件のコメント:

コメントを投稿