カスタマイズ時に邪魔なサイドバー広告の解決方法を考える
photo credit: Steve Snodgrassブログをカスタマイズする際に、どうしても邪魔になるのがサイドバーの広告です。
広告バナーはCSSをいじれない上に配置位置もサイズも決まってしまっているので、デザインからかなり浮いた感じになってしまい、見た目が台無しになってしまいます。
これはブログにとっても広告にとっても良くない、lose-loseの関係と言えます。
そこで今回のエントリーでは、カスタマイズ時のサイドバー広告に対するアプローチを考えてみようと思います。
ソリューションとしては、大きく分けて２つあります。
1つ目が「消す」
2つ目が「なんとかデザインに組み込む」
です。
それでは、それぞれについて掘り下げてみます。
その１：消してしまう
消す方法は大きく分けて2種類あります。
・課金する
真当な方法ですが、大きな問題があります。
それは・・・値段が高いことです。
正直言って、月980円は高いです。
300円以下で自分のサーバー借りて、メルアドも自由に作って、デザインも思うままに・・・とできたりしますので、PVが一日あたり50万もいかないようなら( 殆どこれに当たると思います )レンタルサーバーを借りる方があらゆる面でお得だと思います。
例えばロリポップは、アクセスが一日10万を超えてくるとちょっと動作が怪しいという話もありますが、そこまでのアクセスがなければ快適に動作しますし、とても安価（200円台）で8ギガという大きなストレージもあるので超オススメです。
ただし、アメブロから出て行く事によるアクセスの低下が怖い場合や、ペタやピグなどの独自のコミュニケーションツールが気に入っている方、初心者でサーバーを扱うのが面倒or不安な方などは課金はアリだと思います。
・CSSやjavascriptでなんとかする
これは簡単でお金もかかりませんが、規約違反になる恐れがあります。
規約違反を犯すと強制退会させられることになりますのでご注意ください。
一応、以下のCSSを追記することによって可能です。
#defaultAd{
position:absolute;
top:-5000px;
}javascriptの場合は、フリープラグインに
<script type="text/javascript">
$("#defaultAd").css("display","none");
</script>
と記述すれば消えてくれます。
しかし前述のとおり規約違反のおそれもあります（アカウント、会員資格剥奪）し、一応アメブロの収入源の一つなので、サービスを利用する側としては将来的なサービスの低下のおそれもあるので避けたいところです。
というわけで個人的には、このCSSをふまえて、広告をなんとかデザインに組み込むのがいいのかなと思います。
その２：なんとかデザインに組み込む
当ブログでは、ヘッダー部分に広告を挿し込んでいます。
この方法を説明させてもらおうかと思います。
・まずはCSSで消す
先程説明した方法で、広告を消し（画面外に飛ばし）ます。
その後、改めて広告を配置するという手順を踏んでいます。
まずもう一度CSSのおさらい。
#defaultAd{
position:absolute;
top:-5000px;
}サイドバー広告は簡略化すると以下のような階層になっています。
親…idがdefaultAdのdivタグ
子…「PR」と書かれた見出し用h4タグ
子…idがattentionBoxのdivタグ この中に広告の中身が記述されています
つまり広告が存在するのはattentionBoxの中ですので、中身のattentionBoxの部分を取り出してどこかに挿し込めば、自由な位置にレイアウトすることが可能というわけです。
見出しの部分は自分でデザインすれば、見た目の整合性もバッチリ取れるはずです。
・javascriptで挿入する
肝心の挿し込む方法ですが、javascriptを使います。
フリープラグインに以下のように記述します。
<script type="text/javascript">
$(function(){
$("#attentionBox").appendTo("#挿し込む場所のタグのID");
});
</script>
挿し込み先は、フリースペースやメッセージボード内に
<div id="好きなid"></div>
などのように記述してそこに挿し込んでもよいですし、既存のタグのどこかでもOKです。
当ブログではヘッダーに差し込んでいるので、
<script type="text/javascript">
$(function(){
$("#attentionBox").appendTo("#header");
});
</script>
と記述しています。
あとの細かいレイアウトはCSSでいじればいい感じです。
ぜひ挑戦してみてください！