現在デフォルトスキンとして「Season (Autumn)」を適用中。

AMPページで縮小化するとエラーが出る | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
AMPページで縮小化するとエラーが出る
 
Share:

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

  RSS

5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月1日 23:56  

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

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)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年9月2日 19:07  

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


5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月2日 19:20  

わいひら様

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

https://notepad.pw/share/xg8jxgdi

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年9月3日 00:05  

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年9月3日 00:09  

😇

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年9月3日 00:13  

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

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

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


5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月3日 00:43  

😇

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

これの事かな。

はい。

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

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

 

https://notepad.pw/88090ze2

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

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

 

 

 

 


5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月3日 00:43  

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3344
2019年9月3日 01:05  

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

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

*********

あと。

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

投稿者:: わいひら

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

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

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

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


5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月3日 13:29  

かうたっく様

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

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

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

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

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

そういうことでしたか。

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

https://notepad.pw/1c00e02j

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年9月3日 20:05  

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年9月3日 20:11  

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

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


5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月3日 20:33  

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

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

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

 

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

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

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

 

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

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

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

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

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

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


Akira
(@akira)
Reputable Memberサイト
参加: 1年 前
投稿: 360
2019年9月3日 23:53  

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

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

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

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


わいひら 件のいいね!
5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月4日 00:14  

Akira様

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3344
2019年9月4日 08:52  

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年9月4日 19:53  

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

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


5t3fd3d
(@5t3fd3d)
Eminent Memberサイト
参加: 3か月 前
投稿: 38
2019年9月6日 12:29  

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

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

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

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

 


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3344
2019年9月6日 13:21  

なるほど。

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

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


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

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

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

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

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

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

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

Cocoon
  
動作中

ログイン または 登録 してください

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