• MENU●●●●
  • レスポンシブ構造ではサイドバーのアドセンス配置は指定処理が必要


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    サイドメニュー位置の広告が押しやられるポリシー違反の対処法

    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段階表示のレスポンシブデザインのカスタマイズの解説です
    トップページのみをレイアウト替えした際のカスタマイズ色々
    シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
    レスポンシブサイトの見出しメニューを調整するカスタマイズ
    シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
    レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
    シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
    レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
    SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
    レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
    シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
    レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
    シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
    パソコン スマートフォン画面でどちらも記事列を適合表示する指定
    シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
    iPhone ipadでサイト背景を固定化する仕様設定
    シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
    サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
    シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
    レスポンシブウェブデザイン構造でのフォントサイズ指定
    シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
    レスポンシブウェブデザインに適合する画像サイズ
    シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
    大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
    シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
    端末により記事コンテンツを切り替え表示する
    シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
    スマートフォン PCコンテンツ切り替え時のシリウス機能操作
    SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
    スマートフォン パソコンサイトで画像を切り替え表示指定する
    当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
    スマートフォンサイトではスライダー画像は必要か?
    SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
    トップページ全体をワイドヘッダー画像で表示したい?の勘違い
    SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
    レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
    シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
    スマートフォンでは、固定のグローバルは出現させない
    SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
    iphone設定からレスポンシブデザインへ移行する際の注意事
    SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
    ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
    SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト