ホームページ作成便利ツール

新アメブロで表示されているヘッダー上とサイドバーのＰＲ広告・・・・
邪魔邪魔なので、前々記事と前記事で、何とかする方法について記事にしました。
参考になったでしょうか？


「ソニーのフローク」をブログパーツ表示して、ヘッダー広告をフッター下に移動
する方法などを紹介していますが、別の方法もあるので、それを今回紹介します。


JavaScriptを利用して位置移動させる方法です。
新アメブロではユーザーがJavaScriptを組み込まないと稼働しないので、最初に
javaScriptを使えるように以下のコードをプラグインに書き込んでおきます。

--------------------------------------------------------------------------
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>
--------------------------------------------------------------------------

そうしたら、これに続けて以下のコードを追記します。
--------------------------------------------------------------------------
<script type="text/javascript">
$(function(){
$(".headerBnrArea").insertAfter(".skinFrame2");
$(".subAdBannerArea").insertBefore(".registArea");
});
</script>
--------------------------------------------------------------------------

（解説）

ヘッダー上の広告は、「headerBnrArea」というclassセレクタ名で定義されています。
これを「SkinFrame2」というセレクタの後ろに移動させるという命令になります。
「insertAfter」というのは、その後ろに記述されているセレクタの後ろに移動せよ
という意味です。
「insertBefore」というのは前に移動せよという意味です。


サイドに表示されているバカでかい邪魔ＰＲ広告は「subAdBannerArea」というclass
セレクタ名で定義されています。
これを「registArea」というセレクタの前に移動させています。



このJavaScriptを使って広告移動させて新アメブロの姉妹サイトをサンプル紹介します。
>> ヘッダー上＆サイドPR広告を下方に移動させたサンプルサイトはコチラ

• 
• 
• ツイート