2012-05-27

さりげないAdSenseカラースキーム

AdSenseのカラースキームはWebサイトのカラースキームに合わせるというのが真っ当なやり方だと思うんだけど、Googleのプロダクトで使われているカラースキームをそのまま利用するというのも悪くはない。ということで少し前からGoogle検索でメジャーな言葉を検索した時に出てくる一番上の広告のカラースキームをパクッたものに変更している。

運良くこのWebサイトとは相性が良い感じで、うまくマッチしているんじゃないかと思う。少しだけコントラストを抑えたカラーが採用されているので、派手すぎて困る……ということもなさそう。

.adsense {
  $adsense-border:     rgb(255, 248, 231);
  $adsense-title:      rgb( 14,  28, 179);
  $adsense-background: rgb(255, 248, 231);
  $adsense-text:       rgb( 23,  23,  23);
  $adsense-url:        rgb(  0, 128,  42);

  margin: ($default-margin * 3) 0 0 0;
  padding: 15px;
  border: 1px solid darken($adsense-border, 15%);
  height: 90px;
  clear: both;
  overflow: hidden;
  color: $adsense-text;
  background-color: $adsense-background;
  text-align: center;
}

SCSSでこんな感じにして書いている。背景にテクスチャを貼っているためフラットな背景とは多少相性が悪いので、borderプロパティーでその背景より少し暗い色を指定することにした。高さ調節は面倒なので90pxで固定してはみ出させないようにした。固定サイズの広告との戦うの辛い……。

そろそろレスポンシブな広告とか提供されても良さそうな気がするけど、特にそういう気配はなくて悲しい。複数のサイズの違う広告を切り替えて表示とかで見た目上だけなら今でも実装できる(と思う)けど、表示される広告の制御ができないし、利用規約的にも危うい気がするのでまだ実装したことない。