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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

AMPページで縮小化するとエラーが出る
 
共有:
通知
すべてクリア

[解決済] AMPページで縮小化するとエラーが出る

19 投稿
4 ユーザー
4 Reactions
1,741 表示
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

お世話になっております。

https://dete-diary.com/8784/?amp=1

HTMLを縮小化する/JavaScriptを縮小化する のいずれかにチェックを入れていると、アドセンス(レスポンシブのディスプレイ広告)を貼った部分~記事終わりまでが表示されず、途中で切れてしまっていることがわかりました。

CSSを縮小化するにはチェックを入れていても表示されなくなるエラーは出ませんが、やはりアドセンスは表示されていないようです。

サーチコンソールでは、AMPエラーで動画の URL がありませんと出ています。

切れた部分に貼ったYouTube動画が表示されていないことについての文言のようです。

 

今現在、縮小化のチェックは全て外しています。

?

の下にテンプレートでアドセンスを貼っています。

対応策を教えていただけると幸いです。

----------------------------------------------
サイト名:Dete Log
サイトURL: https://dete-diary.com
ホームURL: https://dete-diary.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-child-master/skins/bizarre-foods-bluecurry/style.css
Wordpressバージョン:5.2.2
PHPバージョン:7.1.5
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate
言語:ja,en-US;q=0.9,en;q=0.8,it;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.3.1
カテゴリ数:12
タグ数:74
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
----------------------------------------------
Gutenberg:0
AMP:1
PWA:0
Auto Post Thumbnail:1
ホームイメージ:/wp-content/uploads/2018/05/dete_logo_1020-w1080.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.2
Broken Link Checker 1.11.8
Category Order and Taxonomy Terms Order 1.5.7
Contact Form 7 5.1.4
EWWW Image Optimizer 4.9.2
Google XML Sitemaps 4.1.0
SiteGuard WP Plugin 1.4.3
TablePress 1.9.2
WordPress Ping Optimizer 2.35.1.1.0
WP Multibyte Patch 2.8.2
----------------------------------------------


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

同じ内容で、テストするので以下の手法で内容のソースコードをいただけますでしょうか。
https://wp-cocoon.com/notepad-pw/


   
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

わいひら様

コメントありがとうございます。

https://notepad.pw/share/xg8jxgdi

よろしくお願いいたします。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

僕の環境では、AMPページで縮小化しても問題なく表示されているようです。

ただ、この部分がどの部分かちょっとわからないです。

アドセンス(レスポンシブのディスプレイ広告)を貼った部分~記事終わりまでが表示されず、


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

?

の下にテンプレートでアドセンスを貼っています。

これの事かな。
記事中にテンプレートが3つぐらいありましたが、それぞれのテンプレートの中身もお手数ですがnotepad.pwに張っていただかないと、同じ環境を再現できないかも。

僕の環境のテンプレートとは中身が違うので。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

もしよろしければ、こちらの
https://notepad.pw/share/xg8jxgdi
以下のテンプレートショートコードを

  • [temp id=7]
  • [temp id=9]
  • [temp id=13]

本来のHTMLに置き換えたものをnotepad.pwに貼っていただいてよろしいでしょうか。


   
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

?

の下にテンプレートでアドセンスを貼っています。

これの事かな。

はい。

「?」以下が、AMPページかつ縮小化した場合に表示されなくなります。

添付した画像は、[非AMP(?の下にアドセンスが表示される)―右]と[AMPのエラーのケース―左]の比較です。

 

https://notepad.pw/88090ze2

テンプレートショートコードの部分にコードを埋め込みました。

よろしくお願いいたします。

 

 

 

 


   
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

画像が消えてしまったので再度送ります。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

有効化して、AMPキャッシュを削除したらどうなりますか?

ダメだった場合、サーバーのキャッシュも削除したらどうなりますか?

*********

あと。

わいひらさんが言ってるのは

投稿者:: わいひら

もしよろしければ、こちらの
https://notepad.pw/share/xg8jxgdi
以下のテンプレートショートコードを

  • [temp id=7]
  • [temp id=9]
  • [temp id=13]

本来のHTMLに置き換えたものをnotepad.pwに貼っていただいてよろしいでしょうか。

Cocoon設定にあるテンプレートの[temp id=7]などのHTMLを貼ってください。って書いてあるように思います。違ったらゴメンナサイですが。


   
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

かうたっく様

お世話になっております。

有効化して、AMPキャッシュを削除したらどうなりますか?

ダメだった場合、サーバーのキャッシュも削除したらどうなりますか?

知識がなく試せていません。

Cocoon設定にあるテンプレートの[temp id=7]などのHTMLを貼ってください。って書いてあるように思います。

そういうことでしたか。

以下、テンプレート部分のみのコードです。

https://notepad.pw/1c00e02j

よろしくお願いいたします。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

https://notepad.pw/88090ze2
このコードで試してみましたが、一応出力されるようです(これが正しい表示なのかは分かりませんが)。
※広告は表示されてませんがコードは出力されています。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

というかなぜ開始タグと閉じタグを別テンプレートに書くような書き方をされているのでしょうか?
こういった使い方は、使い方を誤ると、表示崩れを起こしやすい使い方ではあると思います(ヒューマンエラーを起こしやすい)。
なので、そういった使い方はあまり推奨はしません。

提供していただいたコードで不具合を再現できない以上は、実物を見るしかないかと思います。
そのページ自体が、表示上のエラーになったとしても、AMPページを見せていただくか、テストサイトに同じ現象を再現していただいて見せていただくしかないかもしれません。
※出来る限り原因は探ろうと思いますが、必ずしもわかるかは現段階では保証できないためあらかじめご了承ください。


   
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

サイトの縮小化を現在有効にしあります。

https://dete-diary.com/8784/?amp=1

下部の動画等、該当部分は表示されていますか?

 

当方のPCのChromeではやはり表示されないのですが、edgeやFirefoxでは表示されています。

ということは、当方のChromeの環境によるということでしょうか?

他の環境から見れるなら問題無いです。

 

というかなぜ開始タグと閉じタグを別テンプレートに書くような書き方をされているのでしょうか?

そう使うものかと思っていました・・・。

文章を入れずに開始タグと閉じタグだけをテンプレートで使うにはどうすればいいのでしょうか?このマニュアルの記事などあったら教えていただきたいです。

https://wp-cocoon.com/how-to-use-template-text/

こちらを読んだのですがわかりませんでした。

お忙しい所恐れ入りますが、よろしくお願いいたします。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

添付画像に見える動画であれば、確認できます。使ったのは Chrome です。とりあえず、ブラウザのキャッシュを削除されるとどうなるでしょうか。

ただ、自動広告コードを設置されているために、AMP エラーが出ています。

Cocoon 設定の「広告」で「アドセンス自動広告のみ利用」か「自動広告とマニュアル広告を併用」を選択されていれば、ご自身で自動広告コードを設置する必要はありません。正確には、設置してはいけません。

ご自身で設置された amp-auto-ads スクリプトとタグの削除が必要です。


   
わいひら reacted
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

Akira様

お世話になっております。

自動広告コードを削除しました。教えていただきありがとうございます。

Chromeのキャッシュを削除したら該当部分が表示されるようになりました。お騒がせしました。

ただ、テンプレートで入れた広告はやはり表示されていないようです。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

文章を入れずに開始タグと閉じタグだけをテンプレートで使うにはどうすればいいのでしょうか?このマニュアルの記事などあったら教えていただきたいです。

https://wp-cocoon.com/how-to-use-template-text/

こちらを読んだのですがわかりませんでした。

Cocoon設定のテンプレートで、開始タグ・閉じタグだけを使った方法を推奨しない。って、1つ前の書き込み返信でわいひらさんは言ってます。

こういった使い方は、使い方を誤ると、表示崩れを起こしやすい使い方ではあると思います(ヒューマンエラーを起こしやすい)。
なので、そういった使い方はあまり推奨はしません。

なので 開始(終了)タグだけ などの説明をマニュアルに求めても辿りつかないんだと思いますよ。

adQuickタグなどのプラグインを使って、開始タグ・終了タグを入れるのも手だと思います。

※テンプレート機能については、エラーが出るような使いかたをされているので。

 

  • 話しを戻して、本題を解決するための件

広告を囲っているタグをテンプレートで作成したコードではなく、HTMLで書き込んでみると表示されると思うので、試すのも難しいですか?

 

ちなみに私のChrome・シークレットモードで見た感じでは、表示されてません。

https://dete-diary.com/8784/?amp=1

https://gyazo.com/93d6abd0ebe314a1fa890fb2921706cf


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

添付画像のように、本来メインカラム内にあるものが外にはみ出しています。
こういった場合は、大抵閉じタグ忘れのケースが多いです。
例えば、以下にあるHTMLチェックツールなどでHTMLコードを確認してみるとか。
https://webliker.info/91098/

もしくは本文内のそれぞれのtempショートコードの7と13を削除して表示を確認してみるとか。
それでもダメなら、9もう削除して表示を確認してみるとか。
上記いずれかで、改善された場合は、何かしらテンプレートに問題があり、原因を特定出来るかと思います。


   
(@5t3fd3d)
Trusted Member Registered
結合: 6年前
投稿: 58
トピックスターター  

ショートコードの7と13を削除を削除しても、9の広告を表示することはできませんでした。

その代わり、ショートコード9を削除し、試しに[ad]を入力してみたらAMPページでも広告が表示されているのを確認できました。

今後はこちらを使おうと思います。

ありがとうございました。

 


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

なるほど。

やっぱ、Cocoonが推奨している機能を使うのがいいのかも。って何回目だか分からないけど、いつもそう思います。

皆さん、色々とホントに。
お疲れさまでした!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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