カエテンジョイSeesaa版(旧デザインシステム)

PCとスマホでの広告表示切替

●掲載ソースを追加して正しく表示されないときは次を確認ください。

 

・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。

・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。

 

●画像は説明用のイメージサンプル画像です。

 

実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。

 

●CSS/HTMLソースの行数の番号/色は説明用です。

 

実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。

PCとスマホでの広告表示切替


PCとスマホでの広告切替についての説明です。

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

当テンプレートのデフォルト設定では、
フリースペースや個別記事に貼る広告ソースを、次の説明のように記述することで、
  • 画面の横幅サイズ671px以上のデバイスだけで表示 主にPC・タブレット
  • 画面の横幅サイズ670px以下のデバイスだけで表示 主にスマホ
と切り替えができます。



記述方法

※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。

画面の横幅サイズ671px以上だけで表示 主にPC・タブレット
PCで表示する広告ソース

画面の横幅サイズ670px以下だけで表示 主にスマホ
スマホで表示する広告ソース

※上記の記述をしない場合は、全ての画面サイズで、表示されます。

※CSS側の {display: none;} の指示で ブログ紙面のみ非表示になります。
 HTMLには、広告のデータ はあることになります。



分岐点の変更方法

この説明はアップデート版(2015-07-29以降のリリース分)を元に説明しています。

画面の横幅サイズ 671px以上・670px以下 は
当テンプレートのデフォルト設定の分岐点となります。
分岐点は次の方法で変更ができます。

書き替えした メインCSSの●フリースペース から次の箇所を見つけてください。

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

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



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


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

アドセンス広告で、この方法を応用すると
1ページに記載できる広告数の関係で、アドセンスの規約に違反する可能性がありますので、
そういう設定は、お勧めしません。




ホーム RSS購読 サイトマップ
設置マニュアル SEO対策の設定 カスタマイズ デザイン変更 Seesaa公式マニュアル