サイドバー広告をなんとかする…その２

これまでと違って、サイドバー広告の無いスキンがカスタマイズ不可となってしまいました。
と、いうわけで、ますますデザインが難しくなってしまいました。南無。
サイドバー広告はサイドバーの幅に全然合ってないので、カスタマイズする時にやたらと邪魔なんですよね・・・。
正直言って、これはワザと嫌がらせなのかと思うくらい邪魔です。
アメブロさんもクリックさせる気があるならもっとオシャレにつくってもらいたいですよね！まったく。

というわけで、あの中途半端なサイズの広告を消さずにデザインに組み込むにはどうすればいいか、改めて考えてみました。

「木を隠すなら森の中」作戦

別に広告を隠したいわけではないんですが、どうすれば違和感なく設置できるかを考えたときに、やはり広告は広告コーナーに置くのが一番いいだろう、との結論に達しました。
と、いうわけで、当ブログでは広告コーナーを新たに設け、そこにサイドバー広告を移動しています。

3カラム右メニューで広告コーナーを作ってみる

広告ありきの中身のないアフィブログにならないように、まずは記事ありきでデザインしないといけません。
左のカラムが一番目立ちますので、中央メインの3カラムは勿体無いです。
左がメイン、中央がいつものサイドバー、右に広告コーナーを作りましょう！
これで、広告が本文の邪魔をする心配が無くなります。
サイドバー広告も自動的に右のカラムに挿入されますし、とても都合がいいですね！

サイドバー広告は幅が120px、高さが240pxです。
広告用カラムはこれより広めの幅を取って作りたいと思います。
それにはまず広告素材を探して、気に入ったものがあればその素材の幅に合わせるように設定すればOKです。
このブログを見ていただければわかると思うのですが、サイドバー広告は幅が合わなくなるので、右側に違うサイズの広告を入れて幅を統一させるようにしています。
その隣に幅を合わせやすい広告素材を探すことも重要になります。

というわけで、広告素材を探してみましょう。

A8.netに登録してみる

A8.netは国内最大手のアフィリエイト・サービス、つまり、ブログに掲載する広告を紹介してくれる業者さんです。非常に安心して利用できますよ。

広告探しのコツは、まず自分自身が興味を持つ商品を選ぶということです。
自分が興味のある商品を選ぶと必然的に読者にも興味を持ってもらいやすいですから、これはかなり重要なファクターです。
サイトの見た目にも合いますし、収益が上がる可能性が上がります。

次に、怪しげな商品は絶対に選ばない、ということも大事です。
怪しげな商品の広告はブログやサイトのイメージを台無しにしてしまいます。

A8.netは広告のサイズからも検索ができますので、ガンガン検索していい感じな広告を探しましょう！
オススメは「フリーサイズ」で300pxの幅のものです。
これも自分のブログにあったものにすればよいのではないでしょうか？

CSSで調整しよう

まず、広告スペースにするサイドバーの幅を調整します。

#sub_b{
width:300px;/*ここをお好みの値に調整*/
}

次に、サイドバー広告に手を加えて見やすくします。

#defaultAd > h4{
position:absolute;
top:-9999px;
}
#sub_b div#defaultAd.defaultAd2 .menu_frame {
overflow: visible;
width: 120px;
height:240px;
}
#sub_b div#defaultAd div,#sub_b div#defaultAd{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

上記のCSSでサイドバーの上方左端に移動できたかな、と思います。
次に、フリースペースを右サイドバーに設置し、その中にサイドバー広告の右側に置く広告タグを書きます。
<div id="yokonokoukoku">ここに広告タグをコピペ</div>
で、CSSに手を加えます。

#sub_b{
position:relative;
}
#yokonokoukoku{
position:absolute;
top:0px;/*縦位置調整*/
right:0px;/*横位置調整*/
}

最後に、フリースペースの続きに好きな広告タグ（カラムの幅に合うもの）を好きなだけ書きましょう。
この時、改行を入れないで書いてしまうのがポイントです。

さぁ、これで完成です！
完成すると当ブログのような感じになります。

広告素材によってはちょっとうるさく感じたりしてしまいますので、素材選びが大事だと思います。
是非トライしてみてください！