特典機能について

モバイル時のAdSenseの全幅表示 | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

対象のページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
共有:
通知
すべてクリア

[解決済] モバイル時のAdSenseの全幅表示


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

以下のトピックの関連です。

[解決済] モバイル時のAdSenseで、左右が切れる件
https://wp-cocoon.com/community/postid/51378/

上記トピックでは、対策として「data-full-width-responsive="false"」とすることで、モバイル時には全幅表示をせずに、はみ出すことを回避しました。

 

そこで、少し思ったのですが。

AdSense側はネガティブmarginを指定してまでも、全幅表示をしようとしているのまでは、前回確認していました。

ということは、何故全幅にならないのだろう。。。と思っていたのです。

 

すると、以下のトピックを拝見して、それがヒントになりました。

[解決済] AdSense広告表示状態での画面幅変更時のレスポンシブ動作不調を解決したい
https://wp-cocoon.com/community/postid/50324/

「.ad-area」に「overflow: hidden;」が指定されているんですね。

もし、全幅表示をしたい場合は、ここを変更すればできるということですね。
(実際にやってみました。)

 

ただ、それで良いのか。。。というのが、良く分かりませんけど。
全幅は、どうしても誤クリックというのか誤タップを誘発しそうな気はします。


投票2020 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 
投稿者:: @mk2_mk2

もし、全幅表示をしたい場合は、ここを変更すればできるということですね。
(実際にやってみました。)

これは、結果はどうだったでしょう?
うまくいきましたか。

投稿者:: @mk2_mk2

全幅は、どうしても誤クリックというのか誤タップを誘発しそうな気はします。

僕も今回のことで全幅表示は、無理にする必要がないなと思っています。
「.ad-area」に「overflow: hidden;」を取り除くのが必要だとしたら、今度はまた別のはみ出す不具合とかありそうですし。


投票2020 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  
投稿者:: @yhira

これは、結果はどうだったでしょう?
うまくいきましたか。

"rectangle"で試してみたところ、問題ないように思いました。
広告エリアのみで、他の場所の確認まではしていないのですけど。

そして、"horizontal","vertical"は未確認です。

と言いますのも、やはり「無理に全幅にする必要はないのかな」と私も思ってしまいました。

ただ、せっかくの機会ですし、明日にでも試してみようかと思います。
またご報告いたします。


投票2020わいひら 件のいいね!
投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 9か月前
投稿: 109
 

いつもお世話になります。横から失礼します。

私も結構同様のことで試行錯誤しました。似たような現象を記事にしました。色々と見ていると左右見切れてしまっている人を見かけます。

実際の設定そのままを記事にしましたので実際にページで確認できます。
また、新しくCocoonを利用し始めGoogle AdSenseをどのように扱ったらよいかという人まで、できる限り全員がわかるように記載しましたので参考にして頂ければと思います。

https://tohyo2020.org/google_adsense_true_falce_size/
【番外】 第2回 【WordPress】 Google AdSense ①「全幅・左右見切れ対策」と、②「サイズの種類」について


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

投票2020さん

ありがとうございます。

左右の見切れ対策については、以下のトピックで既に会話済です。

[解決済] モバイル時のAdSenseで、左右が切れる件
https://wp-cocoon.com/community/postid/51378/

 

Cocoonでは、2.3.1で対応されています。
親テーマを2.3.1にバージョンアップしていただければ、左右の見切れはなくなります。
(自動的に、data-full-width-responsive="false"に、Cocoonがしてくれます。コードを"true"で設定してあっても。ただし「コードをそのまま」の場合は別ですが。)

 

本トピックは、上記の「見切れ」に関することではなく、全幅表示をするには。。。という主旨で私は書いているつもりです。

個人的には、積極的に全幅にしようとは思いませんが、ここまで来たら試してみようという感じです。

ただ、全幅表示は誤タップを誘発しそうな雰囲気もあり、分かる人には分かる程度にしか書くつもりはありません。
(全幅を勧めるつもりもありませんし、誤タップを誘発して皆様に何かあると困りますので。)


投票2020 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

全幅表示の確認をしてみました。

まずは、現状「data-full-width-responsive="false"」としているAdSense広告がいくつかある状態で、「.ad-area」に「overflow: visible;」にして確認しました。

"rectangle","horizontal","vertical"のいずれも、PC・モバイルの表示には問題ないようでした。

 

続いて、上記ページに、広告ウィジェットで「コードをそのまま」にして「data-full-width-responsive="true"」のものを追加しました。

結果的にはPCであれば問題ないと思います。
"rectangle","horizontal","vertical"のいずれも問題ないです。

「data-full-width-responsive="true"」とは言え、PCでは全幅になる訳ではないです。
特に"false"の時から変化はないようでした。

 

問題は、モバイルです。

"rectangle"は問題なく全幅表示されました。
メインコンテンツの幅をもはみ出して、画面幅いっぱいにAdSense広告が広がります。

ただ、"horizontal","vertical"ですね。
全幅表示にはなりますが、上記の2つとも正方形に近い形で、"rectangle"との違いが分かりませんでした。

横長や縦長の表示にはなりませんでした。
(PCでは問題なく、横長・縦長表示されます。)

以下のトピックと同じ状態です。

[解決済] バナー広告の設置について
https://wp-cocoon.com/community/postid/50872/

 

おそらくAdSenseの仕様なのではないでしょうか。

 

結論としては、モバイルでの全幅表示はやろうと思えばできるけれど、"rectangle"のみ。
他への影響も私が見たところはなさそうでした。
やるなら、誤タップを誘発の可能性をご理解の上で、ご利用になった方が良いのかなと思いました。

なんだかまとまりませんが、全幅表示にする必要はなく、今のままで良いのかな。。。という印象を持ちました。
(書き出しっぺなのに、本当にまとまらなくてすみません💧)


わいひら投票2020 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

ちなみに、全幅表示とは。

添付画像のとおり、メインカラム幅をもはみ出して、画面幅いっぱいに表示される状態を指します。
(画像はメインカラム幅が分かりにくいかもしれませんが。。。)

 
 
もしかすると、伝わっていない方もいらっしゃるかもしれませんので、補足しておきます。

わいひら投票2020 件のいいね!
投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 9か月前
投稿: 109
 

いつもお世話になります。

投稿者:: @mk2_mk2

本トピックは、上記の「見切れ」に関することではなく、全幅表示をするには。。。という主旨で私は書いているつもりです。

どうも申し訳ありませんでした。趣旨とは違ったようです。

ところで、

mk2さん、わいひらさん、

投稿者:: @mk2_mk2

[解決済] モバイル時のAdSenseで、左右が切れる件
https://wp-cocoon.com/community/postid/51378/

私がご提示させて頂いたURLでは「左右が切れる件」が解決されていないようです。
https://tohyo2020.org/google_adsense_true_falce_size/

サイドバーに「true」、「広告ウィジェット」と「カスタムhtml」の両方を掲示しました。
具体的な部分は、

①投稿本文下「広告ウィジェット」

上:カスタムhtml「true」→全幅
下:広告ウィジェット「true」→見切れる

②サイドバーのタイトル「検証用AdSense広告」

上:カスタムhtml「true」→全幅
下:広告ウィジェット「true」→見切れる

テーマ:ver.2.3.1.へバージョンアップ済みです。

おそらくで申し訳ありませんが、mk2さんと私のアプローチは異なるのではないかと思われます。特に「Cocoon設定>広告>アドセンス設定」の箇所ではないでしょうか。

これだけ書かせてもらって悪いのですが、
私にとっては「true」「false」「広告ウィジェット」「カスタムhtml」で、「全幅」と「カラム幅」で指定できる今のままですと助かります。

理由は意図して「全幅」と「カラム幅」のそれぞれを分けて扱うことができるからです。
急ぎではありませんので、ご確認頂いた後に綺麗なレイアウトに変更します。
まずは、開発者であるわいひらさんに、現状をお伝えすることが一番の優先順位かと思います。

ご確認頂いた後には、私の方も修正したいのでこのトピックでお知らせくださると有り難いです。
今後とも宜しくお願い致します。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

投票2020さん

テーマ作者は、わいひらさんですので、わいひらさんのご判断が必要かと思います。

ただ、カスタムHTMLについては、ご自分でコントロールするのが筋かな…と思います。
ウィジェットに書いた通りに、HTMLソースを吐き出すものと思っています。

広告ウィジェットについては、ある程度テーマ側でのコントロールが必要かと。
広告のフォーマットもプルダウンで変更できるようになっていますし。

そのままのコードを出力しようと思えば、それも可能かな…と。

多くの方々がご利用くださるものですので、事故なく使用できるのかということは必要なのではないかと、個人的には思います。

ある程度のコントロールは、ウィジェットの使い分けや、AdSenseコードの修正、CSSの対応で可能かと思ってはいます。

それをどれだけテーマ側でできるようにするかは、わいひらさんのご判断かなと思います。

 

そして。。。

投票2020さんのご提示いただいたURLでは、1箇所見切れている場所がありました。
(ページのどこかをご提示いただくと、簡単に確認できるのですが。)

ただ、高速化が有効になっているため、HTMLソースなどの確認はしておりません。

この1箇所以外は、全幅・全幅以外共に、正常に表示されているように思います。

 
 
そして、個人的には、別トピックでご連絡いただくことかな。。。と思いました。
既にこのトピックで話が進んでいますので、このままで結構です。

投票2020 件のいいね!
投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 9か月前
投稿: 109
 

お世話になります。
横道にそらせるような形にしてしまい申し訳ありません。

投稿者:: @mk2_mk2

ただ、カスタムHTMLについては、ご自分でコントロールするのが筋かな…と思います。
ウィジェットに書いた通りに、HTMLソースを吐き出すものと思っています。

広告ウィジェットについては、ある程度テーマ側でのコントロールが必要かと。
広告のフォーマットもプルダウンで変更できるようになっていますし。

そのままのコードを出力しようと思えば、それも可能かな…と。

多くの方々がご利用くださるものですので、事故なく使用できるのかということは必要なのではないかと、個人的には思います。

完全同意です。

 

投稿者:: @mk2_mk2

投票2020さんのご提示いただいたURLでは、1箇所見切れている場所がありました。
(ページのどこかをご提示いただくと、簡単に確認できるのですが。)

ただ、高速化が有効になっているため、HTMLソースなどの確認はしておりません。

見切れている部分があるとのこと、また、上記で完全同意できる部分がありますので、もとに戻させて頂きました。Googleのそれなりのスペックのサーバー価格で、政治的なことも扱っているので、高速化を外したくないがために、このような中途半端な形になってしまいました。

何かとお騒がせ致しました。今後とも宜しくお願い致します。

 

 


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

投票2020さん

高速化が有効になっていましたので、はっきりと確認できておりませんが。

モバイル時に見切れていた1箇所は、サイドバーだったように思います。

どうも「data-full-width-responsive="true"」で出力されていたように思いますので、見切れたのかな…とは思いました。

ただ、それ以上は調べておりません。
(どういう条件でそうなったのか。。。など)

 

しかし、どこまでテーマ側でコントロールすべきなんでしょうね。
考えれば考えるほど、分からなくなります。

わいひらさんのご判断なさることですが。

今回の場所は、少し検証させていただくなり、どういう条件でそうなったのかをご提示いただかないと、判断つかない気がします。

「広告コードをそのまま表示」だとすると、どうしたものか。。。と。
そのままでないと、管理者さんのコントロールが効かなくなってしまいますし。
(その場合は、カスタムHTMLを使っていただくか。。。)

難しいです。


わいひら 件のいいね!
投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 9か月前
投稿: 109
 

お世話になります。

投稿者:: @mk2_mk2

どうも「」で出力されていたように思いますので、見切れたのかな…とは思いました。

ただ、それ以上は調べておりません。
(どういう条件でそうなったのか。。。など)

失礼しました。横道すぎるかな...と思い記載しませんでした。

「true」or「false」です。

ご覧頂いた時のコードです。(カスタムhtmlでの記載)

<div style="margincenter">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-自分のコード"
     data-ad-slot="自分のコード"
     data-ad-format="rectangle"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

 

現在元に戻したコードです。(広告ウィジェット & カスタムhtmlでの記載)

<div style="margincenter">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tohyo2020.org -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-自分のコード"
     data-ad-slot="自分のコード"
     data-ad-format="rectangle"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

 

見切れてしまった部分は、いずれかの部分で「true」が反映した部分です。複数の部分で「true」にさせて頂きました。

 ややこしくしてしまいました。申し訳ありません。
今後とも宜しくお願い致します。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

投票2020さん

  • カスタムHTML
  • data-full-width-responsive="true"

であるならば、やはりはみ出すのは仕方ないかな…。。。思います。

カスタムHTMLは、そのままHTMLソースを出力すべきなのではないかと、個人的には思います。

 

私が見たかったのは、AdSenseのコード自身ではなく。
(もちろん"true"・"false"は確認したいですが。)

どのエリアに、どのように(ウィジェットor広告設定)、またその設定はどのようになっているか、でした。

とりあえずカスタムHTMLであれば、致し方なしと個人的には思います。


わいひら投票2020 件のいいね!
投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 9か月前
投稿: 109
 

お世話になります。

投稿者:: @mk2_mk2
  • カスタムHTML
  •  

であるならば、やはりはみ出すのは仕方ないかな…。。。思います。

カスタムHTMLは、そのままhTMLソースを出力すべきなのではないかと、個人的には思います。

その通りだと思います。

 

投稿者:: @mk2_mk2

私が見たかったのは、AdSenseのコード自信ではなく。
(もちろん"true"・"false"は確認したいですが。)

どのエリアに、どのように(ウィジェットor広告設定)、またその設定はどのようになっているか、でした。

個人的な確認で申し訳ありませんが、記載させて頂きます。
いずれもモバイルでのご報告です。

ウィジェットエリア

 

 - サイドバー
①広告ウィジェット:true(はみ出さない)
②広告ウィジェット:false(はみ出さない)

 - サイドバー
①カスタムhtml:true(はみ出す)
②カスタムhtml:false(はみ出さない)

 

 - 投稿本文下
①カスタムhtml:true(はみ出す)
②カスタムhtml:false(はみ出さない)

 

このような記載をさせて頂きました。
私の方で確認できたものを、確認して頂きました。mk2さんの仰られる通りの動作かと思われます。

 

投稿者:: @mk2_mk2

本トピックは、上記の「見切れ」に関することではなく、全幅表示をするには。。。という主旨で私は書いているつもりです。

こちらを趣旨と致しますと、メインカラムや、ウィジェットに関係なく、

A.「カスタムhtml」で「true」指定しますと全幅表示が確認できます。
B.「カスタムhtml」で「false」指定しますとカラム幅におさまります。

他にもご確認されたい場合がありましたら確認してみます。
今後とも宜しくお願い致します。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

投票2020さん

ありがとうございます。

 

「data-full-width-responsive」は、モバイルデバイス画面の全幅サイズに拡大されて表示されるかどうかを指定するパラメータのようです。

ですので、「data-full-width-responsive="true"」の場合、モバイルについては、AdSense側で画面幅いっぱいに広告を表示しようとします。
(画面幅いっぱいの幅を指定してきます、ネガティブmarginも指定してきます。)

"true"の場合の広告の画像幅は、画面幅です。
("false"の場合は、そのコードを設置したエリア内に収まるようにAdSenseが調整してくれます。)

 

「data-full-width-responsive」はAdsenseのパラメータであり、テーマやウィジェット、表示エリアなどは、無関係の認識です。
"true"であれば、AdSenseは、全幅を表示しようとします。

 

広告エリア(Cocoon設定・ウィジェット共)は、「overflow: hidden;」が指定してありますから、広告エリア幅を超える画像は、はみ出したところが非表示となります。

それが「見切れる」ということかと思います。

 

しかし、Cocoonの2.3.1では、「Cocoon設定」-「広告」並びに「広告ウィジェット」に関しては、強制的に「data-full-width-responsive="false"」に置き換えます。

そのため、広告の画像は、画面幅ではなく、広告エリア幅に収まって表示されます。

 

つまり、最新バージョンでは、Cocoon設定もしくは広告ウィジェットを使う限りは、AdSense広告が見切れることはないはずです。

ただし、「広告コードをそのまま表示」の場合は、"true"で書いていれば、そのまま"true"で出力しますので、広告エリアをはみ出した部分が見切れます。

 

カスタムHTMLは、広告エリアではなく汎用的なものですので、そのままのコードを出力して、そのまま表示されるという事かと思います。

ですので、カラム幅(表示エリア幅)を超えるような広告については、おそらく個別に調整が必要かな。。。と思います。
(広告エリアも個別に調整すれば全幅表示は可能。。。というのが、今回私が試したことです。)

メインカラムにしろ、サイドバーにしろ、はみ出し可能にしておくと、他の要素などもはみ出しが可能になってしまい、問題になってしまうかと。

 

このトピックや、先に「見切れる」と会話していたトピックは、原則広告エリアの話です。
(カスタムHTMLについては、特に検証などしておりません。)

分かりにくかったですね、すみません。


投票2020わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  
投稿者:: @mk2_mk2

(広告エリアも個別に調整すれば全幅表示は可能。。。というのが、今回私が試したことです。)

上記を訂正します。

(広告エリアも個別に調整すれば見切れることなく全幅表示は可能。。。というのが、今回私が試したことです。)

 

おそらく「全幅」という言葉も、使い方が何通りかあって、混乱しているような感じはしますね、自分自身も。

ただ、現状の表示状態の認識に相違はないと、感じますが。。。
(つまり、現状で特に問題はない。違っていればすみません。)


投票2020わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

カスタム広告で利用する場合、AdSenseがデフォルトで吐き出すコードを利用すると思います。
デフォルトのコードは、「data-full-width-responsive="true"」ですよね。
だとしたら「overflow: hidden;」も無効にしておいた方が良いのかもしれませんね。
そうなると、今度は以下のような問題も出てくるので、どちらを取るかになり難しいですね。
https://wp-cocoon.com/community/postid/50324/


mk2投票2020 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

mk2さん、何度もすいません。
今回当サイトを以下の条件にしてみました。

  • AdSenseコードを「data-full-width-responsive="true"」
  • .ad-areaの「overflow: hidden;」を無効

この状態で当サイトを見ても異常はないでしょうか。
僕のChrome環境はあてにならないので、Firefoxで確認しましたが、Firefoxでは問題なく表示されているようです。


mk2投票2020 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

これで問題なければ、Cocoon設定の「広告」設定の部分で「モバイルで広告幅を広げる」みたいな設定項目も作ろうかと思います。


mk2投票2020 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

わいひらさん

遅くなりました。

投稿者:: @yhira

これで問題なければ、Cocoon設定の「広告」設定の部分で「モバイルで広告幅を広げる」みたいな設定項目も作ろうかと思います。

なるほどです。
ユーザー側で選択出来るのは、良いですね。

 

投稿者:: @yhira

今回当サイトを以下の条件にしてみました。

  • AdSenseコードを「」
  • .ad-areaの「overflow: hidden;」を無効

この状態で当サイトを見ても異常はないでしょうか。

諸々、確認させていただきました。

Chromeのデベロッパーツール上でも。

 
スマホ実機でも。
 
 
問題なく表示されています。
Firefox、Edgeでも、問題ありませんでした。

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

ご確認いただきありがとうございます。
Cocoon設定の「広告」タブに「バイル広告の幅を広くする」機能を追加しました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

機能が有効になっている場合は画面幅いっぱいに表示されます(Firefox)。


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

機能が無効になっている場合はカラム幅内に収まるように表示されます(Firefox)。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

わいひらさん

確認させていただきました。

基本的には問題ないと思います。

 

ただし、モバイル時の"horizontal","vertical"は、考えないといけないかもしれません。

この両者は、モバイル時に「data-full-width-responsive="true"」にしていると、"rectangle"と同じ正方形に近い表示になってしまいます。

どうもこれはAdSenseの仕様のようです。
(コードで"horizontal","vertical"を指定しても、表示は"rectangle"のようになってしまいます。)

 

"vertical"の場合は、モバイルで全幅を考えた場合、画面いっぱいが広告になってしまいそうですから、"rectangle"の表示になっても良いと思うのです。

 

ただ、"horizontal"は、"rectangle"のような正方形になってしまうと、ちょっと違和感がある気がします。
「data-full-width-responsive="true"」の場合、実質的に"horizontal"は選択できないことと同じになってしまいます。

 

それでふと思ったのですが。
欲張りかもしれませんが。

一律に「data-full-width-responsive="true"」になってしまうのではなく、表示エリア毎(ウィジェト毎)に、"true"・"false"を選択できるのが良いのかもしれません。
(対応が大変かと思いますが。)

 

それができないにしても、バナー"horizontal"を選択した場合は、"false"にする対応が必要な気はします。

 

ここまできて、更に思ってしまいました。

私はモバイルで、縦長の画面を前提で書いていますから、上記のように思ったのですが。。。

モバイル端末を横長にした場合のことを考えると、"horizontal","vertical"両方とも、AdSenseが自動調整してしまうように、"rectangle"にしておかないといけないのかもしれません。
(だから、AdSenseはそういう仕様な気がしてました。)

 

表示設定で"horizontal","vertical"を選択する場合は、自動的に"false"にするのが良いのかもしれません。
(ただ、説明しておかないと、お問い合わせが。。。という気もしますね。)

非常に悩ましいです。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

少し自分の頭を整理しました。

やるなら、以下の2通りかな。。。という気がしてきました。

  • data-full-width-responsive="true"の場合は、
    "horizontal","vertical"を選択できなくする
     
  • "horizontal","vertical"を選択した場合は、
    data-full-width-responsive="false"にしてしまう

 

前者の場合は、PCで"horizontal","vertical"が選択できなくなってしまいますので、基本的にはないと思います。

となると、選択肢は後者しかない気はしてきました。


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

僕は、機能の説明欄に「この機能が有効な場合、AdSenseの仕様で"horizontal","vertical"広告をモバイルで表示した際は"rectangle"として表示されます。」と書いておけばいいような気がします。
付け加えるなら「意図通りのサイズで表示する場合は機能を無効にしてください。」とでも書いておけば良いような気がします。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 5か月前
投稿: 1603
Topic starter  

了解です。

AdSenseの仕様だということが、ご利用の方にご理解いただければ、問題ないと思います。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12476
わいひら - Facebookわいひら - Twitter
 

ちょっと長くなりますが、説明文を追加しておきました。
mk2さんがこのトピックで検証してくださった内容のおかげで、以前からの懸案の原因がわかりました。
ありがとうございます!!

This post was modified 1か月前 2回 by わいひら

mk2 件のいいね!
共有:
スポンサーリンク
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年9ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました