はてなブログproに申し込んで、Google AdSense関連でやったこと、見直したこと

f:id:nqumen:20150308161348j:plain

ついにはてなブログproにしました。ともなって、いろいろサイトのデザイン(主にGoogle AdSense関連)を変えたので、備忘的にメモ。

1.AdSense広告が自動で入るように修正

まず、前提ですが、1つのページにはgoogle AdSenseの広告は3つまで。一部特殊な契約はあるようですが、基本原則は3つまで。

無料のはてなブログでは、記事の下に一つ、AdSense広告が入ります。よって、強制的にユーザのAdSense広告の数は規制されるわけですが、proにすると、広告を消すことが出来るので、3つMAXまでユーザの契約している広告を張ることが出来るようになるわけです。

それはさておき、筆者の場合、あまり調べていなかったりしていたので・・・毎度記事を書いた最後にHTML編集で広告コードを入れるという、めちゃめちゃめんどくさいことをしていました。(たまに忘れて後で直す、ということも)

今回のpro契約を機会に、まずは記事の下部分に自動で広告が入るようにデザインの修正をしました。

やり方は、デザイン設定の「カスタマイズ」(レンチのアイコン)から、「記事」内の「記事上下のカスタマイズ」から「記事下」にAdSenseコードを追加するだけです。

ただし、これをやると、広告が「ソーシャルパーツ」の下に出てしまうのです。
筆者の前のやり方で直接HTMLコードを書いていると、記事とソーシャルパーツの間に入っていたのですが、(これはこれで実はGoogleの規約違反だったのかも、とは調べた後に思いましたが)見た目が変わっちゃうのもなぁ、と思ってgoogle先生に聞いたところ、思ったように表示するやり方を考えてくれていた方がおり、参考にさせていただきました。


Google AdSenseの広告をはてなブログ記事本文の「すぐ下」に配置する方法 - エンジニアが株式投資と副業で年収2000万を目指すブログ

リンクのコードをそれぞれのユーザの広告のコードに直して、「記事下」に入れることで、元のとおりのデザインにすることが出来ます。
※リンク元の筆者の方も書いているとおり、はてなの仕様変更で動かなくなったり、AdSenseの規約違反になる可能性は0では無いと思います。設定する際はご留意ください。

スマートフォン用のデザインにも同じように記事下に自動で入るよう設定するところがあるので、そちらにも入れます。そうしないと、スマホから見たときに広告が出なくなります。

リンクさせていただいた記事にもあるように、ブログといえどもHTMLの世界なので、CSSやJavaScriptを知っていると思ったことが出来る良い事例かと思います。もうちょっとCSSやJavaScript覚えたいなぁ・・・

2.全ての記事に「続きを読む」をいれる

これが一番めんどくさかった・・・

PCからブログのトップページを見ると、1ページの中に記事が3件出ています。広告はサイドバーとフッタに入れているので、各ページに入れた広告が表示されてしまうと、サイドバー+フッタの2個+記事3件に対して広告1件の3個で5個になってしまいます。これを回避するためには、「続きを読む」にすることで、広告まで表示されなくなり、トップページはサイドバー+フッタの2個だけ。各記事のページに行くと記事の1個で最大の3個になります。

ただ、普段の記事で「続きを読む」を入れたり入れなかったりしていたので、過去全ての記事に「続きを読む」を入れたのですが、ただただ単純作業で、記事の管理から一つずつ選んで編集、更に、1.に書いたとおり、各記事に手で入れていた広告が不要になったので、それも削除。いやー単純作業は辛い・・・というか嫌いな筆者。しかも、ある程度の記事数は記事の管理メニューから選べるのですが、ちょっと古い記事は「次のページ」を押して表示しなければいけないので、

記事の管理 をクリック
次のページ をクリック
編集する記事まで移動
編集する記事をクリック
良い場所に「続きを読む」を追加したり、AdSense広告を削除
「更新をクリック」

をループしました。
まだあまり記事がないとはいえ、約2か月分あったので、途中ちょっと嫌になったのですが、何とか全ての記事をチェックできたはず・・・

 

あとがき

単純作業は筆者は苦手だと再認識した作業でしたが、やっぱり調べてやってみたことが成功するのは楽しいし、自分で何かをやることの醍醐味だと思います。リンクさせていただいた方やその他いろいろ調べたのですが、本当に先駆者の方々には感謝申し上げます。また、上にも書いたとおり、もう少しCSSやJavaScriptが使えるようになると良いなと思いました。参考にさせていただいたサイト様のコードを調べて、"どうしてこうなるのか"は復習しておきたいと思います。

スポンサーリンク