サイドメニュー位置の広告が押しやられるポリシー違反の対処法
SIRIUS シリウス2カラム、3カラムをレスポンシブ構造のウェブデザイン
テンプレートへとカスタマイズした際....
サイドバー(左右いずれか)の位置にアドセンス広告を配置するレイアウト
を指します...
モバイル、スマートフォンの画面サイズではサイドスペースがページ巻末へ
フリースペースもろとも押しやられる仕組みとなっています...
結果..アドセンスの広告配置のポリシーに適合しないとして違反配置と
なる...とか?...言われていますが実際はどうなのか..?未検証..
でも...念のため対処するならやりようはございます..
パソコン画面ではサイドに表示される広告をモバイルデバイスに
切り替っても...
隠してしまう指定をすれば、サイドバー位置が巻末へ押しやられても
そこにはアドセンスの広告は非表示で認識すらできない...
となるので違反の範囲から省かれます...
以下へ..
スポンサーリンク
では、アドセンス広告を隠す対処法です...
この解説はシリウスの操作画面で到達するフリースペース
およびhtml内で有効ですが
PC用サイトで一ページの記事内に同コンテンツ広告を3つ置いた場合
モバイルデバイスではでは二つまでの配置ポリシーにやはり払拭しますが
以下説明を含めれば 記事内の広告を一つ隠すことが可能です
注釈
現在の広告数は今回の記事追加時点より増えてます...を念頭に置いて
ご理解ください
PC画面ではサイドバーに広告表示を指定したとしましょう...
その際、スマートフォンでの閲覧の際は広告を隠してしまう
非表示とする方法です
当サイトがその例です
サイドメニュー右上のアドセンス広告はPCでは
確認できますが
スマートフォンで閲覧の際は表示されませんので
ポリシーの違反対象から外れるのです
サイト巻末で表示される広告などはっきり言って
リンクもされないだろうし必要ありませんね...それが理由でしょうか?
その代りに記事内では広告を増やせるとなるのです
ではどのようにして隠すかですね
グーグルさんに解説はございます...
とりあえず以下リンクでご確認してください
下段位置です
グーグルヘルプ
グーグルさん記載の記述コード参照
CSS3 メディアクエリを使用して スマートフォンサイズでは
広告を隠すように広告コードが改行されております
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
意味がお分かりですか?
ウェブ慣れした方なら然程の難易度はございませんが
初心者の方にはきつい
なんなのこれは?ですね
では
事詳細は省きますが記載...改行をご確認してください
参考例
通常に所得下アドセンスコードです
提携記述は書き換えてございます
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-提携記述"
data-ad-slot="提携記述"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
上記コードを当サイト仕様に
以下のように改行しました
<style type="text/css">
.adslot_1 { display:inline-block; width: 336px; height: 280px; }
@media (max-width: 800px) { .adslot_1 { display: none; } }
@media (min-width:800px) { .adslot_1 { width: 336px; height: 280px; } }
@media (min-width:320px) { .adslot_1 { width: 336px; height: 280px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-提携記述"
data-ad-slot="提携記述"
data-ad-slot="auto"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
という訳ですが全然わからんという方へ
最初に書き換え手順 次に記載の意味を説明します
最初に書き換え手順を難易と感じないでください
最初に書き換えてある以下記載と所得コードをシリウス記事内で
段違いに並べます
ここではあなたの所得コードを用意してください
上コードの赤印をコピーして 下のコードの赤印の位置へ
はりつけます
貴方のコードとして解釈します
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-提携記述"
data-ad-slot="提携記述"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style type="text/css">
.adslot_1 { display:inline-block; width: 336px; height: 280px; }
@media (max-width: 800px) { .adslot_1 { display: none; } }
@media (min-width:800px) { .adslot_1 { width: 336px; height: 280px; } }
@media (min-width:320px) { .adslot_1 { width: 336px; height: 280px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-提携記述"
data-ad-slot="提携記述"
data-ad-slot="auto"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script&
上記コードはテキストイメージ広告ですが、改行コードで
大事なの貴方のアカウントナンバーで..ここだけを変えれば
貴方のアカウントとして認識されます
data-ad-client="ca-pub-提携記述"
data-ad-slot="提携記述"
data-ad-format="auto"></ins>
記述の意味を説明します
.adslot_1 { display:inline-block; width: 336px; height: 280px; }
@media (max-width: 800px) { .adslot_1 { display: none; } }
@media (min-width:800px) { .adslot_1 { width: 336px; height: 280px; } }
@media (min-width:320px) { .adslot_1 { width: 336px; height: 280px; } }
800pXは 画面サイズ800px以下でアドセンス広告が
隠されるよう指定
ここでの指定は当サイトのレスポンシブ可変サイズに合わせています
当サイトは現時点...パソコン以外のアイフォン
タブレットで閲覧するとワイドの横サイズ800以下ですと
レスポンシブ可変構造で表示されるようにしておりますが
600PXあたりから可変させたい方は数値を
書き換えてください
336pxは...pc画面で表示される際の広告の横幅
280px;は...pc画面で表示される際の広告の縦幅
ここでお断りがあります
数値は..いろいろ書き換えて当サイトのサイド位置に
調度良いサイズで表示されるようにしていますが
数値をあれこれ書き換えた結果です
数値書き換えを間違うと広告がはみ出たり
色々ありますね
サイドの幅より...広告の横幅が少なめですが
既定サイズの336PXより大きくしますと 広告自体も
横幅が延長されサイドメニューの幅に合わせることが
出来るのですが
しかし既定、サイズ以上のサイズにすると...なにやら
ポリシー違反と判断されるかもしれないという不安から
既定サイズに収めています...
レスポンシブ構造ではサイドバーのアドセンス配置は指定処理が必要
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
- サイトをレスポンシブウェブ化カスタマイズする今事情
- SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
- レスポンシブウェブデザイン設定事情を理解しよう
- シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
- レスポンシブウェブデザイン変更前の説明
- SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
- レスポンシブウェブデザインカスタマイズのレイアウト変更値
- シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
- ヘッダー画像をレスポンシブウェブ構造で作動させる方法
- シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
- ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
- シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
- デフォルト一カラムレスポンシブウェブデザイン設定
- シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
- 2カラムテンプレート レスポンシブデザイン設定方法
- SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
- 3カラムテンプレート レスポンシブウェブデザイン追加方法
- SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
- 2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
- SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
- トップページのみをレイアウト替えした際のカスタマイズ色々
- シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
- レスポンシブサイトの見出しメニューを調整するカスタマイズ
- シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます