はてなダイアリーにAdSenseを付ける

AdSenseやアフィリエイトで多少でも収益をというのであれば、はてなダイアリーじゃなくて FC2ブログなり Livedoorブログでやればいいんでしょうが、「はてな」には「はてな」のいいところがたくさんあって、書きなれるとこれはこれで別のところでと簡単に乗り換えられない魅力があるわけです。
そこで、じゃあ、はてなダイアリーに、できればうるさくないような AdSenseを付けたいなぁということでやってみます。

準備

AdSenseを付けるにも自分のAdSenseがないと話にならないので、Google AdSense - Make Money Online through Website Monetization で Googleに申し込みをしておきます。この辺は本編じゃないので省略。はてなでちゃんと日記を書いていればすんなりとれるはずです。
次に、自分の AdSenseを付けるために、はてなの有料オプションを申し込みます。はてなにはずいぶんお世話になっていることですし、月額 180円ですから、1,000円くらい買っておいてもいいんじゃないかなと。1,000円で半年は大丈夫ですし。
あと、Firefox限定ですが、あれば便利なのが ColorZilla for Firefox - Eyedropper, Color Picker and much more というアドオンです。画面に表示されている色のコードが知りたいとき、ブラウザ左下のスポイトアイコンをクリックして、知りたい色のところへマウスを持っていくと色コードを表示してくれます。

AdSenseを付ける場所

AdSenseは1ページに3つまでという制限がありますから、はてなでも AdSenseモジュールは3つまでしか付けられません。ま、それ以上たくさん付いたら気持ち悪いですし。付ける場所は、次の3箇所にしておきます。

日記本文のすぐ下
ヘッダ(一番上)
フッタ(左右どちらかのサイドバー)

日記本文のすぐ下

これは、管理 > 日記の設定 > アフィリエイト設定で設定します。この画面の例では、468x60のバナーが表示されます。欲張ってビッグバナー(728x90)などにするとレイアウトが崩れてしまうので要注意です。管理 > 詳細デザイン設定でプレビューを表示させるなどしてレイアウトを確認してみてください。

ヘッダ

こういう風にトップ画像の下に AdSenseを付けることができます。設定は、管理 > 詳細デザイン設定で行います。
ページのヘッダの「div class="main"」の前に AdSenseモジュールを入れてください。

 <hatena name="adsense" format="728x90" color_link="#40688f" color_url="#5df5ff" color_border="#244769" color_bg="#244769" color_text="#ffffff">
 <div class="main">

AdSenseモジュールで選択できるのは、468x60、120x240、234x60、728x90、125x125、250x250、120x600、160x600、336x280、300x250、180x150 だけです。
テキスト広告の例 - AdSense ヘルプにはもっといろいろなパターンがありますが、はてなの AdSenseモジュールではこれ以外はサポートしていないようです。リンクユニットなどが指定できるとうれしいんですが、ないものねだりしても仕方がないので、この中から横幅いっぱいの 728x90を選択することにします。
ちなみに、テキストオンリーというような指定もできないので、テキスト、イメージ、動画、なにが出てくるかはわかりません。以下、テキストの場合の指定を書きますが、イメージが出てきたときはもちろんそんな指定は無視されます。で、AdSenseモジュールの設定です。

color_link = "#40688f"　：　一番上に表示されるタイトルの色です。
あまりはっきりした色だと目立つので優し目の色にしてあります。
color_url = "#5df5ff"　：　URLの色です。
こちらはフォントも小さいのでアクセントとしてはっきり目の色にしてあります。
color_border= "#244769"　：　枠線の色です。
あまり広告広告しないように背景とあわせてわからないようにしてあります。
color_bg = "#244769"　：　背景の色です。
日記の背景と合わせてあります。
color_text = "#ffffff"　：　テキストの色です。
日記のテキストと合わせてあります。

この色を設定するときに、ColorZilla for Firefox - Eyedropper, Color Picker and much more が役に立つわけです。
ちなみにページのヘッダの「div class="main"」の後に AdSenseモジュールを入れると、こういう風にサイドバーと重なります。

フッタ

フッタの設定はヘッダと同じです。横幅が狭いので、160x600を選んだことが違うくらいです。
カレンダーモジュールや日記検索モジュールの並び順はお好きにどうぞ。ヘッダとサイドバーで鍵括弧(┓)の形に AdSenseが出たほうが効果的だと思われるのであれば、一番先頭に AdSenseモジュールを入れればそうなりますし、それじゃ、あまりにも広告ばっかりでどうかなと思われるのであれば、下の方に入れればいいと思います。こちらもプレビューをみて調整してみてください。

まとめ

とりあえずこうやって付けてみました。テキスト広告が出てるときはそんなに違和感がないのですが、でっかい動画広告やイメージ広告が出るときはちょっと嫌な感じですね。イメージ広告が出る頻度が高いようならヘッダ、サイドバーから AdSenseは外すかもしれません。少し様子見です。