blogger にアドセンスを貼り付けるとエラーになる

紫色の花と蝶


アドセンスを貼るとエラーが出る


このブログでは、Vaster という日本語テンプレートをつかっています。
このテンプレートは親切で、記事中と記事下にアドセンスのコードを貼り付けるスペースを用意してくれているんですよね。

テンプレートの中の「ここに貼り付けてください」というコメントのところに貼ればいいみたいです。
ちょっとやってみましょう。

うまくいかない


ということでアドセンスのコードを貼ったのですが、なんかエラーが出てしまいました。
blogger では、テンプレートにそのままコードを貼ったら、エラーが出るものらしいです。
そうなんですね。
どうしたらいいかなあ、と検索したら、Vaster の作者さんのブログに答えが書いてありました。

bloggerでアドセンスのレスポンシブユニットを貼り付ける方法

おお、いろいろ書いてあります。

簡単にまとめると、エラーを出さないだけなら、1行目を書き換えるだけで大丈夫です。
ほかの部分は任意ですね。

レスポンシブルユニットで、スマホのときのサイズを変えたり指定したりする方法についても書かれています。
ひとまず1行目を書き換えてみて、うまくいきましたよ。
エラーも出なくなりました。
ちゃんと表示もされていますね。

注意


ということで、テンプレートに貼り付けるときにはコードを書き変えないとエラーが出ます。
でも、HTMLウィジェットにアドセンスコードを貼り付けて表示するときには、そのままでもエラーは出ません。
書き換えなくてもいいみたいです。

ここらへんが、どういう仕組みなのかはわかりません。
まあ気にしなくていいでしょう。
もちろん、収益のメニューから追加したときは、コードを貼り付ける必要すらありません。
ここは blogger のいいところですね。
よくわからないところに広告が表示されたりしますが、面倒くさいときはこの方法が手っ取り早いです。

ウィジェットのカスタマイズ


そうそう、ウィジェットなんですけど、タイトルをちょっとわかりやすく装飾したかったんです。
見出しのカスタマイズをするときのように、CSSを書けばいいんだろうな、というところまではわかったのです。
クラスの要素を指定してCSSをどうにかする雰囲気です。

それで、サイドバーのタイトルについては、CSSが最初からテンプレートに入っているんです。
ちょっとどういう仕組みなのかわかっていないですが、要素にサイドバーを指定して、H2,H3,H4 の見出しを全部CSSで編集できます。

そういうことなら widget を指定すればいいんですねと思ったのです。
でも、そうはうまくいかないんです。
ウィジェットのタイトルの装飾はできたのです。
しかし、トップページの記事一覧の記事タイトルまでCSSで指定したことになってしまいました。

それで、最終的にどうしたのかというと、それぞれのウィジェットのタイトルには title というクラス名がデフォルトで付けられているので、タイトルの装飾をしたいウィジェットのタイトルのクラス名を手動で変えて、そのクラス名を指定してCSSで装飾しました。
これならまあうまくいきます。

手間がかかりますし、ウィジェットが増えたらまた書き直さないといけないし、なんか一発でできる方法がありそうなんですが(実際、テンプレートにもとからあるサイドバーのコードは一発で指定しています)、とりあえずうまくいったのでこれでいいかな、と思います。
まとめると、タイトルのクラス名を手動で変えて、そのクラスを指定してCSSで編集です。

タイトルの微調整


そうそう、あと、デフォルトでテンプレートについてきたウィジェットはタイトルがh4だったんですよね。
後から自分で追加したものはh2です。
ウィジェットのタイトルとか、そんなに重要ではないので、h4のほうがいいかなあと思って、全部h4に書き換えました。
こういうのはコードをじっくり見ないと気がつかないですね。

ウィジェットのデフォルトのタイトルはh2になっています
気になる方は気をつけましょう。
スポンサーリンク

投稿サイト

小説家になろうに、猫のエッセイを投稿しています。
かわいいです。
うちのかわいいかわいい猫
このブログでも、一部を掲載しています。

アルファポリスでは、ファンタジーの連載を初めてみました。
気軽に読んでみてください。

ランキング

スポンサーリンク