サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年6月15日 17:48
以下のトピックの関連です。
[解決済] モバイル時の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 reacted
2021年6月15日 19:26
もし、全幅表示をしたい場合は、ここを変更すればできるということですね。
（実際にやってみました。）
これは、結果はどうだったでしょう？
うまくいきましたか。
全幅は、どうしても誤クリックというのか誤タップを誘発しそうな気はします。
僕も今回のことで全幅表示は、無理にする必要がないなと思っています。
「.ad-area」に「overflow: hidden;」を取り除くのが必要だとしたら、今度はまた別のはみ出す不具合とかありそうですし。
投票2020 reacted
2021年6月16日 19:58
いつもお世話になります。横から失礼します。
私も結構同様のことで試行錯誤しました。似たような現象を記事にしました。色々と見ていると左右見切れてしまっている人を見かけます。
実際の設定そのままを記事にしましたので実際にページで確認できます。
また、新しくCocoonを利用し始めGoogle AdSenseをどのように扱ったらよいかという人まで、できる限り全員がわかるように記載しましたので参考にして頂ければと思います。
https://tohyo2020.org/google_adsense_true_falce_size/
【番外】 第2回 【WordPress】 Google AdSense ①「全幅・左右見切れ対策」と、②「サイズの種類」について
トピックスターター 2021年6月16日 20:09
投票2020さん
ありがとうございます。
左右の見切れ対策については、以下のトピックで既に会話済です。
[解決済] モバイル時のAdSenseで、左右が切れる件
https://wp-cocoon.com/community/postid/51378/
Cocoonでは、2.3.1で対応されています。
親テーマを2.3.1にバージョンアップしていただければ、左右の見切れはなくなります。
（自動的に、data-full-width-responsive="false"に、Cocoonがしてくれます。コードを"true"で設定してあっても。ただし「コードをそのまま」の場合は別ですが。）
本トピックは、上記の「見切れ」に関することではなく、全幅表示をするには。。。という主旨で私は書いているつもりです。
個人的には、積極的に全幅にしようとは思いませんが、ここまで来たら試してみようという感じです。
ただ、全幅表示は誤タップを誘発しそうな雰囲気もあり、分かる人には分かる程度にしか書くつもりはありません。
（全幅を勧めるつもりもありませんし、誤タップを誘発して皆様に何かあると困りますので。）
投票2020 reacted
トピックスターター 2021年6月16日 20:35
全幅表示の確認をしてみました。
まずは、現状「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"のみ。
他への影響も私が見たところはなさそうでした。
やるなら、誤タップを誘発の可能性をご理解の上で、ご利用になった方が良いのかなと思いました。
なんだかまとまりませんが、全幅表示にする必要はなく、今のままで良いのかな。。。という印象を持ちました。
（書き出しっぺなのに、本当にまとまらなくてすみません?）
2021年6月16日 22:37
いつもお世話になります。
本トピックは、上記の「見切れ」に関することではなく、全幅表示をするには。。。という主旨で私は書いているつもりです。
どうも申し訳ありませんでした。趣旨とは違ったようです。
ところで、
[解決済] モバイル時の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.へバージョンアップ済みです。
おそらくで申し訳ありませんが、ｍｋ２さんと私のアプローチは異なるのではないかと思われます。特に「Cocoon設定＞広告＞アドセンス設定」の箇所ではないでしょうか。
これだけ書かせてもらって悪いのですが、
私にとっては「true」「false」「広告ウィジェット」「カスタムhtml」で、「全幅」と「カラム幅」で指定できる今のままですと助かります。
理由は意図して「全幅」と「カラム幅」のそれぞれを分けて扱うことができるからです。
急ぎではありませんので、ご確認頂いた後に綺麗なレイアウトに変更します。
まずは、開発者であるわいひらさんに、現状をお伝えすることが一番の優先順位かと思います。
ご確認頂いた後には、私の方も修正したいのでこのトピックでお知らせくださると有り難いです。
今後とも宜しくお願い致します。
トピックスターター 2021年6月16日 22:51
投票2020さん
テーマ作者は、わいひらさんですので、わいひらさんのご判断が必要かと思います。
ただ、カスタムHTMLについては、ご自分でコントロールするのが筋かな…と思います。
ウィジェットに書いた通りに、HTMLソースを吐き出すものと思っています。
広告ウィジェットについては、ある程度テーマ側でのコントロールが必要かと。
広告のフォーマットもプルダウンで変更できるようになっていますし。
そのままのコードを出力しようと思えば、それも可能かな…と。
多くの方々がご利用くださるものですので、事故なく使用できるのかということは必要なのではないかと、個人的には思います。
ある程度のコントロールは、ウィジェットの使い分けや、AdSenseコードの修正、CSSの対応で可能かと思ってはいます。
それをどれだけテーマ側でできるようにするかは、わいひらさんのご判断かなと思います。
そして。。。
投票2020さんのご提示いただいたURLでは、1箇所見切れている場所がありました。
（ページのどこかをご提示いただくと、簡単に確認できるのですが。）
ただ、高速化が有効になっているため、HTMLソースなどの確認はしておりません。
この1箇所以外は、全幅・全幅以外共に、正常に表示されているように思います。
そして、個人的には、別トピックでご連絡いただくことかな。。。と思いました。
既にこのトピックで話が進んでいますので、このままで結構です。
既にこのトピックで話が進んでいますので、このままで結構です。
投票2020 reacted
2021年6月16日 23:15
お世話になります。
横道にそらせるような形にしてしまい申し訳ありません。
ただ、カスタムHTMLについては、ご自分でコントロールするのが筋かな…と思います。
ウィジェットに書いた通りに、HTMLソースを吐き出すものと思っています。広告ウィジェットについては、ある程度テーマ側でのコントロールが必要かと。
広告のフォーマットもプルダウンで変更できるようになっていますし。そのままのコードを出力しようと思えば、それも可能かな…と。
多くの方々がご利用くださるものですので、事故なく使用できるのかということは必要なのではないかと、個人的には思います。
完全同意です。
投票2020さんのご提示いただいたURLでは、1箇所見切れている場所がありました。
（ページのどこかをご提示いただくと、簡単に確認できるのですが。）ただ、高速化が有効になっているため、HTMLソースなどの確認はしておりません。
見切れている部分があるとのこと、また、上記で完全同意できる部分がありますので、もとに戻させて頂きました。Googleのそれなりのスペックのサーバー価格で、政治的なことも扱っているので、高速化を外したくないがために、このような中途半端な形になってしまいました。
何かとお騒がせ致しました。今後とも宜しくお願い致します。
トピックスターター 2021年6月16日 23:33
投票2020さん
高速化が有効になっていましたので、はっきりと確認できておりませんが。
モバイル時に見切れていた1箇所は、サイドバーだったように思います。
どうも「data-full-width-responsive="true"」で出力されていたように思いますので、見切れたのかな…とは思いました。
ただ、それ以上は調べておりません。
（どういう条件でそうなったのか。。。など）
しかし、どこまでテーマ側でコントロールすべきなんでしょうね。
考えれば考えるほど、分からなくなります。
わいひらさんのご判断なさることですが。
今回の場所は、少し検証させていただくなり、どういう条件でそうなったのかをご提示いただかないと、判断つかない気がします。
「広告コードをそのまま表示」だとすると、どうしたものか。。。と。
そのままでないと、管理者さんのコントロールが効かなくなってしまいますし。
（その場合は、カスタムHTMLを使っていただくか。。。）
難しいです。
わいひら reacted
2021年6月16日 23:45
お世話になります。
どうも「」で出力されていたように思いますので、見切れたのかな…とは思いました。
ただ、それ以上は調べておりません。
（どういう条件でそうなったのか。。。など）
失礼しました。横道すぎるかな...と思い記載しませんでした。
「true」or「false」です。
ご覧頂いた時のコードです。（カスタムhtmlでの記載）
<div style="margin:auto;text-align:center">
<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="margin:auto;text-align:center">
<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」にさせて頂きました。
ややこしくしてしまいました。申し訳ありません。
今後とも宜しくお願い致します。
トピックスターター 2021年6月16日 23:55
投票2020さん
- カスタムHTML
- data-full-width-responsive="true"
であるならば、やはりはみ出すのは仕方ないかな…。。。思います。
カスタムHTMLは、そのままHTMLソースを出力すべきなのではないかと、個人的には思います。
私が見たかったのは、AdSenseのコード自身ではなく。
（もちろん"true"・"false"は確認したいですが。）
どのエリアに、どのように（ウィジェットor広告設定）、またその設定はどのようになっているか、でした。
とりあえずカスタムHTMLであれば、致し方なしと個人的には思います。
2021年6月17日 00:23
お世話になります。
- カスタムHTML
であるならば、やはりはみ出すのは仕方ないかな…。。。思います。
カスタムHTMLは、そのままhTMLソースを出力すべきなのではないかと、個人的には思います。
その通りだと思います。
私が見たかったのは、AdSenseのコード自信ではなく。
（もちろん"true"・"false"は確認したいですが。）どのエリアに、どのように（ウィジェットor広告設定）、またその設定はどのようになっているか、でした。
個人的な確認で申し訳ありませんが、記載させて頂きます。
いずれもモバイルでのご報告です。
ウィジェットエリア
- サイドバー
①広告ウィジェット：true（はみ出さない）
②広告ウィジェット：false（はみ出さない）
- サイドバー
①カスタムhtml：true（はみ出す）
②カスタムhtml：false（はみ出さない）
- 投稿本文下
①カスタムhtml：true（はみ出す）
②カスタムhtml：false（はみ出さない）
このような記載をさせて頂きました。
私の方で確認できたものを、確認して頂きました。ｍｋ２さんの仰られる通りの動作かと思われます。
本トピックは、上記の「見切れ」に関することではなく、全幅表示をするには。。。という主旨で私は書いているつもりです。
こちらを趣旨と致しますと、メインカラムや、ウィジェットに関係なく、
A.「カスタムhtml」で「true」指定しますと全幅表示が確認できます。
B.「カスタムhtml」で「false」指定しますとカラム幅におさまります。
他にもご確認されたい場合がありましたら確認してみます。
今後とも宜しくお願い致します。
トピックスターター 2021年6月17日 01:05
投票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については、特に検証などしておりません。）
分かりにくかったですね、すみません。
2021年6月17日 20:37
カスタム広告で利用する場合、AdSenseがデフォルトで吐き出すコードを利用すると思います。
デフォルトのコードは、「data-full-width-responsive="true"」ですよね。
だとしたら「overflow: hidden;」も無効にしておいた方が良いのかもしれませんね。
そうなると、今度は以下のような問題も出てくるので、どちらを取るかになり難しいですね。
https://wp-cocoon.com/community/postid/50324/
トピックスターター 2021年6月17日 22:26
わいひらさん
遅くなりました。
これで問題なければ、Cocoon設定の「広告」設定の部分で「モバイルで広告幅を広げる」みたいな設定項目も作ろうかと思います。
なるほどです。
ユーザー側で選択出来るのは、良いですね。
今回当サイトを以下の条件にしてみました。
- AdSenseコードを「」
- .ad-areaの「overflow: hidden;」を無効
この状態で当サイトを見ても異常はないでしょうか。
諸々、確認させていただきました。
Chromeのデベロッパーツール上でも。
スマホ実機でも。
問題なく表示されています。
Firefox、Edgeでも、問題ありませんでした。
わいひら reacted
2021年6月17日 23:03
ご確認いただきありがとうございます。
Cocoon設定の「広告」タブに「バイル広告の幅を広くする」機能を追加しました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
2021年6月17日 23:04
機能が有効になっている場合は画面幅いっぱいに表示されます（Firefox）。
2021年6月17日 23:05
機能が無効になっている場合はカラム幅内に収まるように表示されます（Firefox）。
トピックスターター 2021年6月17日 23:26
わいひらさん
確認させていただきました。
基本的には問題ないと思います。
ただし、モバイル時の"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"にするのが良いのかもしれません。
（ただ、説明しておかないと、お問い合わせが。。。という気もしますね。）
非常に悩ましいです。
トピックスターター 2021年6月18日 00:42
少し自分の頭を整理しました。
やるなら、以下の2通りかな。。。という気がしてきました。
- data-full-width-responsive="true"の場合は、
"horizontal","vertical"を選択できなくする
- "horizontal","vertical"を選択した場合は、
data-full-width-responsive="false"にしてしまう
前者の場合は、PCで"horizontal","vertical"が選択できなくなってしまいますので、基本的にはないと思います。
となると、選択肢は後者しかない気はしてきました。
2021年6月18日 19:26
僕は、機能の説明欄に「この機能が有効な場合、AdSenseの仕様で"horizontal","vertical"広告をモバイルで表示した際は"rectangle"として表示されます。」と書いておけばいいような気がします。
付け加えるなら「意図通りのサイズで表示する場合は機能を無効にしてください。」とでも書いておけば良いような気がします。
2021年6月19日 19:17
ちょっと長くなりますが、説明文を追加しておきました。
mk2さんがこのトピックで検証してくださった内容のおかげで、以前からの懸案の原因がわかりました。
ありがとうございます！！
ｍｋ２ reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。