サポート » テーマ » CSSのdisplay:noneの使用による広告表示の消し方について

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっております。個人で作成したテーマにおけるstyle.cssについて質問です。

    【質問の主旨】

    1.
    自分が運営しているブログにおいて、スマホ表示のときにサイドバーにある広告(.ad1)の表示をCSSの記述で消すためにはどうすれば良いでしょうか?

    2.
    自分が運営しているブログにおいて、スマホ表示のときに記事コンテンツの下部にある2枚目の広告(.ad3)をCSSの記述で消すためにはどうすれば良いでしょうか?

    【質問の補足】

    1.
    下記のドキュメントシートでPC表示のときとスマホ表示のときのそれぞれにおいて、.ad1(レスポンシブ)、.ad2(レクタングル(中)) .ad3(レクタングル(中)) 、広告ユニットの関係について示したスクリーンショットを添付しております。

    https://docs.google.com/document/d/1DKFtZ8iUS-UgMElZyRk2G2ZYI7k23XBQ-m-mTob4nYg/edit

    2.
    style.cssの中でもGoogle Adsenseに関するコードは以下の通りにです。
    https://github.com/echizenyayota/e-yota/blob/personal_lesson_20171012/wp-content/themes/mytheme/style.css#L1008-L1061

    今回の質問に関して特に分からないコードが2箇所あります。

    – 1023行目〜1027行目(【質問の主旨】の1)

    @media (min-width: 768px) {
      .ad1 {
        display: none
      }
    }

    としてパソコン表示以外の時は、.ad1(レスポンシブ)の表示を、”display: none”で消しているにも関わらず、実際には表示されています。

    – 1050行目から1061行目(【質問の主旨】の2)

    @media (max-width: 768px) {
      .ad2 {
        float:none;
        width:100%;
      }
      .ad2 p {
        text-align: center;
      }
      .ad3 p {
        display: none;
      }
    }

    として、スマホ・タブレットサイズの時では.ad3(レクタングル(中))を”display:none”で表示を消しているにも関わらず、実際には表示されています。

    3.
    single.phpの記述は下記のGitHubにアップしています。
    https://github.com/echizenyayota/e-yota/blob/personal_lesson_20171012/wp-content/themes/mytheme/single.php
     
    以上、ご確認よろしくお願い申し上げます。

    ヘルプの必要なページ: [リンクを見るにはログイン]

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • CSSで非表示にする位ならwp_is_mobile()等を使って広告そのものを読み込まないようにした方が通信速度も向上して非固定回線環境に優しいと思いますが・・・
    関数リファレンス/wp is mobile

    ただ、上手くやらないとタブレットも対象になるので非表示に関してはCSSの方が確実ではありますが。

    どのように考えてますか?
    確実にスマホのみですか?

    こんにちは

    ad1の「パソコン表示以外の時は、.ad1(レスポンシブ)の表示を」消すなら
    @media (max-width: 768px) {
    ではないんでしょうか。

    ad3は私のスマホでは消えています。

    こんにちは、

    テストは行っていないのですが、例えば CSSでdisplay:noneにしておいて、jqueryなんかで読み込みを完了したら show() するって処理は時々行われると思うんですけど、
    読み込み順の関係で、display:noneが効かなくなっている可能性があるかもしれませんね。

    なので、display:none以外の方法

    スクリーンリーダー用の要素などに使う以下のような方法

    
    position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        overflow: hidden;
    

    とか、
    javascriptで、非表示にする方法を試してみるといいかも、

    こんにちは

    .ad1 はコンテンツ上部に配置されている広告で、スクリーンショットで .ad1 と表記されているのはテキストウィジェット(#text-10)に配置されている広告ではないでしょうか?
    消したい広告とは、このテキストウィジェットの広告でしょうか?

    トピック投稿者 echizenya

    (@echizenya)

    @ishitaka さん。
    いつもコメントありがとうございます。

    >テキストウィジェット(#text-10)に配置されている広告ではないでしょうか?
    >消したい広告とは、このテキストウィジェットの広告でしょうか?

    ご指摘の通り、消したい広告というのは、.ad1ではなく#text-10でした。Chrome developerツールで改めて確認すると私のコメントが間違っていました。アドバイスありがとうございます。

    その上で、

    @media (max-width: 768px) {
      #text-10 {
        display: none;
      }
    }

    とすると従前ではスマホにおいて「広告ユニット → テキストウィジェット(#text-10)広告 → 「おすすめ記事」」と表示されていた状態が、「広告ユニット → (表示なし)→「おすすめ記事」」の状態になり、意図通りの表示になりました。

    ただここで「テキストウィジェット(#text-10)広告」の表示を消すという行為は、Google AdsenseのポリシーとしてOKなのかどうか疑問に思うようになってきました。

    とりあえず上記のコードをstyle.cssに追記していますが、コメントアウトにしてスマホにおける「テキストウィジェット(#text-10)広告」はあえて表示させています。

    https://github.com/echizenyayota/e-yota/blob/personal_lesson_20171012/wp-content/themes/mytheme/style.css#L1039-L1044

    Google Adsenseのヘルプフォーラムで、「テキストウィジェット(#text-10)広告」の非表示の可否について質問して、そのアドバイスに従ってを表示・非表示の運用を決めたいと思います。

    的確なアドバイスありがとうございます。今後ともどうぞよろしくお願いします。

    トピック投稿者 echizenya

    (@echizenya)

    @manbo さん。
    コメントありがとうございます。

    >CSSで非表示にする位ならwp_is_mobile()等を使って広告そのものを読み込まないようにした方が

    wp_is_mobile()関数のご紹介ありがとうございます。はじめて知りました。

    >どのように考えてますか?
    >確実にスマホのみですか?

    スマホ表示の時のみ確実に非表示にしたいと考えています。タブレットの時は表示ができるようにしたいと思っていますので、CSSで表示・非表示の調整をするつもりです。

    ただ、先に @ishitaka さんに回答したようにCSSの観点からは解決したものの、Google Adsenseのポリシー的に疑問に思うことがあります。従ってこれから先の質問については、Google Adsenseのヘルプフォーラムで質問をするようにします。

    これからもどうぞよろしくお願いします。

    トピック投稿者 echizenya

    (@echizenya)

    @munyagu さん。
    いつもコメントありがとうございます。順不同ですが、いただいたコメントについて回答いたします。

    – .ad3について
    >ad3は私のスマホでは消えています。
    日中に知人のスマホ(Nexus)と自分のスマホ(ASUS)で確認しました。 @munyagu さんがおっしゃるように.ad3の広告表示は消えていました。

    – .ad1について
    自分が.ad1だと思っていたクラスは @ishitaka さんからご指摘をいただいたように、#text-10のidでした。このidを操作することによって、表示・非表示の操作ができるようになりました。

    ですが、#text-10の表示・非表示については、WordPressフォーラムで質問する域を超えていると思いますので、今回のトピックスは「解決ずみ」とさせていただきます。

    これからもどうぞよろしくお願いします。

    トピック投稿者 echizenya

    (@echizenya)

    @nobita さん。
    いつもアドバイスありがとうございます。

    >スクリーンリーダー用の要素などに使う以下のような方法とか
    >javascriptで、非表示にする方法を試してみるといいかも、

    CSS以外でも要素を消せる方法があることについて教えていただきありがとうございます。「スクリーンリーダー用の要素」という言葉自体を知らなかったので、今後の参考にします。

    とりあえず他のみなさまのアドバイスのおかげで、自分の意図する表示はどうすれば良いか分かりました。Google Adsenseのポリシー的にどうすべきかという問題が残りましたので、Adsenseのヘルプフォーラムで確認するようにします。

    これからもどうぞよろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「CSSのdisplay:noneの使用による広告表示の消し方について」には新たに返信することはできません。