季刊とらいろ

左手でにきかくよ。うそちがうよ。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

fc2ブログスマホ用テンプレートの広告を消したり動かしたり

PC用のテンプレートを昨日弄ったので、今日はスマホ用のテンプレートを弄ってみようかと。

そう思ってスマホでfc2ブログを開くとまぁビックリ、貼ってもいない広告が3つも出ているじゃないですか。

よし全部消そう!

と、思いましたが、PC用テンプレと同様に消してはいけない広告タグ等ルールが色々ありました。


以下、fc2ブログのスマートフォン用テンプレートを編集して、
なるべく広告の表示が邪魔にならない様工夫しよう!の回です。

やること
1:広告の余白を消す
2:画面下に常に出てくる広告を消す
3:広告の位置をずらす
4:javascriptで一番上の広告をヌルッとスルーしちゃう




*この記事は、スマートフォン用テンプレート・basic_blackを基に書いています。
*多少違いはあるかもしれませんが、殆ど同じ手順でいけるかと。

まず、テンプレートの設定⇒スマートフォン用テンプレート管理⇒HTMLを眺める。

<%ad>と<%ad2>は消してはいけないそうな。

且つ、この二つの内一つはヘッダー付近、もう一つはフッター付近に配置する事!!とのルール。

確かに、headerとfooter付近にこの二つがありました。
(Ctrl+Fで検索しましょう)
<div id="ad_header" class="ad_header"><%ad></div>
<div class="ad_footer"><%ad2></div>
↑こんな感じに書いてありました。



広告<%ad>と<%ad2>の余白を消そう



まず、それぞれmarginがついているので、消します。

<%ad>はclassがad_headerで、<%ad2>はad_footerですね。

スタイルシートの中からキーボードのCtrl+Fで「.ad_header」を検索します。

.ad_header{
text-align:center;
margin:10px 0;
}
.ad_footer{
text-align:center;
margin:10px 0;
}
↑こんな感じに書いてありました。


どちらもmargin:10pxとついているので、その行を消します。


.ad_header{
text-align:center;
}
.ad_footer{
text-align:center;
}
↑こうする。

これで、余白を取られることが無くなりました。



画面下に常に出てくる広告を消す



スクロールする度に付いてくる一番邪魔な広告を消しましょう。

さっきのHTML編集画面で<%ad_overlay>を検索します。
</div>
<%ad_overlay>
</body>
</html>

↑</body>のすぐ上にありました。

</div>
</body>
</html>
↑こうする

これで、チラチラ出てくる広告は出ません。

これは消すなって書いてないから消して大丈夫だと思うけど、自己責任でお願いします。


広告の位置をずらす



ここからは好みですが、<%ad>と<%ad2>の位置が中々嫌な位置にあるなと思ったんですね。

まず、ヘッダー側の<%ad>の方ですが、ヘッダーより下に書かれてるから、ブログのタイトルの下に広告が出ちゃうんですね。

これを<body>の直下に動かしました。

<body>
<div id="ad_header" class="ad_header"><%ad></div>
↑<body>のすぐ下ね!

コピペしたらヘッダーの下に有った一行は消します。

これで、ブログタイトルより上に広告が動きました。

一番上に有る方が気になるじゃないか!!って気もしますが、次の項でいい感じにします。


次にフッター側の<%ad2>ですね。

この子は、</body>のすぐ上に動かしました。

<div class="ad_footer"><%ad2></div>
</body>
↑こんな感じね。

これで、コピーライトより下に広告が出るから、そうそう気にならないかなと。

私はこんな感じに動かしましたが、それぞれのブログに合わせて良い位置が有るかと思います。
色々試してみてね。

また、CSSでdisplay:noneにしたり、marginをいっぱい効かせて画面外に飛ばしたりすると、規約違反になるので、
「気にならない位置=見えない」じゃなくて、頻繁に目に入らない程度が丁度良いのかと。


javascriptで一番上の広告をヌルッとスルーしちゃう



最後に、さっき<body>直下に動かした<%ad>について。

フッター側の<%ad2>は、</body>の直ぐ上に動かせば良かったけど

<%ad>の方はブログタイトルより上にあって、ページを開く・移動すると毎回目に入ってしまいます。

そこで、ページを表示した2秒後に広告より下まで自動でスクロールさせる事に。

パッとブログタイトルまで飛ばすと、なんだか規約に引っかかる気がしたので、

一旦一番上を表示させてからヌルヌル下にスクロールさせる事にしました。


って事で、javascript打ってみた(∵`)

<script type="text/javascript">
$(function(){
var flg = 'true';
document.body.ontouchstart = moved;
function moved(){flg = 'false';};
setTimeout(function(){
if(flg=='true'){
$('html, body').animate({
scrollTop:$("#header").offset().top
}, 400);
}
}, 2000);
});
</script>

使い方は、↑これを、HTMLの</head>の直ぐ上にコピペするだけです。

もし、ご自身が利用しているテンプレートのHTMLで、<%ad>の下に有る要素のidが「header」で無い場合は、

①#headerを#id名で書き替えて下さい。

②数字の400は、スクロールし終わるのに要する時間です。
(400ミリ秒)
③数字の2000は、スクロールが始まるまでの時間です。
(2000ミリ秒⇒2秒)

①~③は適宜変更してみて下さい。
但し、③の数字はあまり早すぎると(数字が小さいと)広告を取得する前に移動が始まってしまい、
ヘッダーの高さが0だと思ってスクロールしません。


あと、一応読み込みが完了する前に自分でスクロールし始めるユーザーの為、

既にタッチしてスクロールし始めている場合は、わざわざブログタイトルに移動しないようにしました。



以上、スマートフォンテンプレートを眺めて少し弄ってみた体験談とご紹介でした。


規約が規約がぁ~って過敏になってましたが、

aタグに#つけて移動した場合も一番上の広告はスルーどころかスキップされる訳だし

大丈夫だと思うんですけどね。


けどけど!うーんと♪お決まりなんだけど~ご利用は自己責任でお願いしよーっと♪

あ!あとね~何て言おうと思ったんだっけ。

えーっとね、忘れちゃった♪まっいいや♪

終わりー。

関連記事

テーマ:FC2 BLOG - ジャンル:ブログ

  1. 2012/10/22(月) 22:19:46|
  2. WEB
  3. | トラックバック:1
  4. | コメント:0
<<バーボンってのはどこの子や!! | ホーム | 久しぶりに更新を>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://trairo.blog41.fc2.com/tb.php/133-6e1f2a4d
この記事にトラックバックする(FC2ブログユーザー)

まとめ【fc2ブログスマホ用テ】

PC用のテンプレートを昨日弄ったので、今日はスマホ用のテンプレートを弄ってみようかと。そう思ってスマ
  1. 2012/10/25(木) 00:44:05 |
  2. まっとめBLOG速報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。