「メイド・イン・ヘブン」スキン適用中

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のサイドバーで画像が表示されない事がある件について

17 投稿
3 ユーザー
7 Likes
2,377 表示
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
Topic starter  

AMP対応後、サイドバーの画像が表示されない(正確にはサイドバーの新着記事以下の内容がiPhoneでみれない)と教えてもらいました。

Androidでも確認したら、AMP対応ページでサイドバー。人気記事・新着記事の画像が白抜きになるのを確認しました。

PC:要素上でも似た状況になる事があります。※ChromeのiPhone・Galaxyなどで確認。

ただスマホだとサイドバーの読み込みが遅い?・読み込みにくいのかな???・裏側ではなく表側問題かな、位しかわかりません。

リンク先例:※添付ファイルを付けました。

https://bibabosi-rizumu.com/500-internal-server-error-access/?amp=1

現状原因がハッキリしないのでampページであれば、?amp=1を削除していただくとかしか言えず。。

ちなみに以下のページでも確認できました。画像サイズは120pxなので小さいですが、人気記事の画像や注目記事のブログカード画像が白抜きになったりします。

https://wp-cocoon.com/0-4-6/?amp=1


   
引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
Topic starter  

間違った^^;

添付ファイルは、サイドバーを開いて画像が表示されてない様子です。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

確かに…。
上の方は表示されるのですが、ファーストビューに表示されない部分には、Lazy Loadが働いていない感じですね。
Chrome、Firefoxでも再現するようです。
けどこれは…、どうやって対応すればいいんだろう…。

というか、この返信を書いたあと、ちょっと動かしたら表示されました…。
でも、表示が遅すぎて、意味がない…。どうすればいいんだろう…。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

しばらく待って動かしたら、表示された状態。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

この状態は私もハマったことがあります。私と同じ状況なら、画像の AMP キャッシュが生成されていない状態のはずです。

たぶん amp-sidebar を使わないとダメな気がします。 amp-sidebar は amp-img  をサポートしているので、隠れている画像でも AMP キャッシュが生成されます。

私の記事で申し訳ないですが、 amp-sidebar で WordPress の AMP ページにスライドモバイルメニューを設置で amp-sidebar の簡単な説明をしています。

記事ではナビを設置していますが、これをサイドバーに変更すればいける気がします。 amp-sidebar は、左から右、右から左のどちらからでもスライドインが可能です。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

ありがとうございます!

ちょっと明日じっくり読んでみます。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
Topic starter  

Akiraさん、わいひらさん、ありがとうございます!body直下にamp-sidebar入れる縛りみたいですね…。すんなり出来そうなら良いですが…

宜しくお願いします。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

amp-sidebar を試してみても、画像が完全に表示されませんでした。

途中まではきちんと表示されるのですが、途中から img タグがなくなっています。原因が分からないです。

一応やったことを書いておきます。とりあえずの試しなので、内容はかなりぐちゃぐちゃです。

まず、 amp-header.php で amp-sidebar スクリプトを読み込み。

次に amp-sidebar.php ファイルを新規作成し、下記のコードを追加。

<amp-sidebar id="sidebar-right" layout="nodisplay" side="right">


</amp-sidebar>

次に、 footer.php の 68 行目(//モバイルメニューボタンの上)に下記のコードを追加。

<?php if( is_amp() ) get_template_part( 'tmp/amp-sidebar' ); ?>

次に、 mobile-menu-buttons.php の 85 行目から 104 行目を下記のものに変更。

サイドバー全体が画面外に飛び出していたので、 CSS を若干変更。

で、ダメでした。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

表示されていないコードは、 notepad.pw に貼り付けました。

https://notepad.pw/share/82jjql9hn


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

amp-sidebarのデモを見ても、画像を使用したものはないですね…。
https://ampbyexample.com/components/amp-sidebar/preview/

amp-sidebarを利用してもダメなら、サイドバーは利用できなくしたほうが良いのだろうか…。
何とかして、スクロールした時にAMPのLazy Loadが動作するようにしたいのですが、解析するにしても難易度が高そう。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

amp-sidebar にすると、現在の Cocoon とは 1 つ違うところがあるんです。それが表示されていない画像に対して何かをすると、一気に画像が表示されること。

スマホの実機の場合には、表示されていない画像の部分をタップ長押しをすると、その画像も他の画像も表示されます。

デベロッパーツールの場合には、右クリックをすると画像が一気に出てきます。

こんな動作を見たことがなくて、混乱しています。

 


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

そんなおかしな動作をするんですね。

それにしても、amp-sidebarを使用しなくても、画面内にあれば隠れている所も表示されるのが謎。
それなら、サイドバーもスクロールしたら出して欲しい。

というか、今試したらサイドバーじゃなくて、背景側をスクロールさせたら、画像が出た。
スクロールイベントを、サイドバーにも欲しい。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
Topic starter  

https://wp-cocoon.com/0-7-2/?amp=1

このページのサイドバーは画像が小さいからか?私の環境ではAMPでもすべて読み込まれますね。

https://bibabosi-rizumu.com/cocoon-amp-twitter-iconfont/?amp=1

私のページではサイドバーに大きな画像がたくさんあるのも関係しているのか?、読み込みしきれないような印象などと思ったり?

本文・関連記事下にデフォルトでサイドバー非表示になったので久々にチェックしてみたんですが、読み込みに時間がかかり表示されない環境は必ずありそうですね。。

  • Cocoon設定-モバイルタブで『スライドインボタン時コンテンツ下のサイドバーを表示』を選択して下のほうで見てもらう的な

ですが完全に読み込みが早くなった気がするんですが。気のせいでもないような…?分かりませんが??


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

以前から、スライドインスサイドバーでも画面内に入りそうな部分は、表示されていたと思います。
ただ、スライドインサイドバーだけ、スクロールインした時に画像呼び出しトリガーが働かないのは相変わらずのようですね。
いまだに、ちょっと対処方法も分からないです。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

例えば、添付画像のような縦長の環境だと、結構画像が画面近くに来るので、結構下のもの画像まで読み込まれます。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
Topic starter  

以前から、スライドインスサイドバーでも画面内に入りそうな部分は、表示されていたと思います。

ですね。それが昨日確認したとき、わいひらさんのCocoon(デフォルト:サイド:小さな画像の場合)ではほぼ全部表示され、私の大きな画像でも結構読み込まれて。※下までは読み込まなかった。

今確認すれば、そうでもないですね^^;

運よく爆速読み込めたのかもです。2か月のあいだに『何かが変わった』から???と思ったんですが。

完全に読み込みが早くなった気がするんですが。気のせいでもないような…?分かりませんが??

残念ながら…気のせいだったのかも知れません。

私の環境でも(おそらく多くの環境で真っ白ではなく)aタグやテキストも表示されるので、(念のため)下に関連記事下にサイドを付けたまま、そっとしておきます^^


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16440
 

僕もまだ、AMPは不明な事だらけです^^;
対症療法、対症療法でここまでやっている感じ。


   
返信引用
共有:

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

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

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

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

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

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

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

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