テンプレートマニュアル

※クリックすると該当箇所に移動します

 

 

 

 

1．概要

 

無料ブログには同一HTML内でそのような切替をする機能はありませんので
デバイスの画面サイズで切り替えを行う方法となります。

 

 

フリースペースや個別記事に貼る広告ソースを
次のように記述することで次のように切り替えができます。

 

 

 

 

2．記述方法

 

●ソースをダブルクリックしてその状態でコピーしてください

●Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。

 

 

画面サイズ671px以上のデバイスだけで表示　主にPC・タブレット

 

広告ソース

 

 

画面サイズ670px以下のデバイスだけで表示　主にスマホ

 

広告ソース

 

 

※上記の記述をしないときは全ての画面サイズで表示されます。
※CSS側の {display: none;} の指示でブログ紙面のみ非表示になります。
　HTMLには広告データは存在します。

 

 

 

 

3．分岐点の変更方法

 

CSS の ●フリースペース の次の記述を変更してください。

 

/*スマホ広告*/
.ad-sp {display: none;}
@media screen and (max-width: 670px) {
.ad-pc {display: none;}
.ad-sp {display: block;}
}

 

3行目の max-width: 670px の数値を変更してください。

 

 

 

 

4．ご注意
個別記事内のアドセンス広告をスマホだけ非表示にはしないでください

 

上記で説明しているとおり、
広告の切り替えは、CSS側の {display: none;} の指示でブログ紙面だけ非表示にしており
HTMLには広告データは存在します。

 

アドセンス広告でこの方法を応用すると、
アドセンスの規約に違反する可能性もありますので、そういう設定はしないでください。