サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年4月12日 20:59
AMP対応後、サイドバーの画像が表示されない(正確にはサイドバーの新着記事以下の内容がiPhoneでみれない)と教えてもらいました。
Androidでも確認したら、AMP対応ページでサイドバー。人気記事・新着記事の画像が白抜きになるのを確認しました。
PC:要素上でも似た状況になる事があります。※ChromeのiPhone・Galaxyなどで確認。
ただスマホだとサイドバーの読み込みが遅い?・読み込みにくいのかな???・裏側ではなく表側問題かな、位しかわかりません。
リンク先例:※添付ファイルを付けました。
https://bibabosi-rizumu.com/500-internal-server-error-access/?amp=1
現状原因がハッキリしないのでampページであれば、?amp=1を削除していただくとかしか言えず。。
ちなみに以下のページでも確認できました。画像サイズは120pxなので小さいですが、人気記事の画像や注目記事のブログカード画像が白抜きになったりします。
2018年4月12日 23:15
この状態は私もハマったことがあります。私と同じ状況なら、画像の AMP キャッシュが生成されていない状態のはずです。
たぶん amp-sidebar を使わないとダメな気がします。 amp-sidebar は amp-img をサポートしているので、隠れている画像でも AMP キャッシュが生成されます。
私の記事で申し訳ないですが、 amp-sidebar で WordPress の AMP ページにスライドモバイルメニューを設置で amp-sidebar の簡単な説明をしています。
記事ではナビを設置していますが、これをサイドバーに変更すればいける気がします。 amp-sidebar は、左から右、右から左のどちらからでもスライドインが可能です。
Topic starter
2018年4月13日 09:03
Akiraさん、わいひらさん、ありがとうございます!body直下にamp-sidebar入れる縛りみたいですね…。すんなり出来そうなら良いですが…
宜しくお願いします。
2018年4月13日 13:08
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 を若干変更。
で、ダメでした。
2018年4月13日 22:19
amp-sidebarのデモを見ても、画像を使用したものはないですね…。
https://ampbyexample.com/components/amp-sidebar/preview/
amp-sidebarを利用してもダメなら、サイドバーは利用できなくしたほうが良いのだろうか…。
何とかして、スクロールした時にAMPのLazy Loadが動作するようにしたいのですが、解析するにしても難易度が高そう。
2018年4月13日 22:51
amp-sidebar にすると、現在の Cocoon とは 1 つ違うところがあるんです。それが表示されていない画像に対して何かをすると、一気に画像が表示されること。
スマホの実機の場合には、表示されていない画像の部分をタップ長押しをすると、その画像も他の画像も表示されます。
デベロッパーツールの場合には、右クリックをすると画像が一気に出てきます。
こんな動作を見たことがなくて、混乱しています。
2018年4月14日 00:35
そんなおかしな動作をするんですね。
それにしても、amp-sidebarを使用しなくても、画面内にあれば隠れている所も表示されるのが謎。
それなら、サイドバーもスクロールしたら出して欲しい。
というか、今試したらサイドバーじゃなくて、背景側をスクロールさせたら、画像が出た。
スクロールイベントを、サイドバーにも欲しい。
Topic starter
2018年6月21日 09:29
https://wp-cocoon.com/0-7-2/?amp=1
このページのサイドバーは画像が小さいからか?私の環境ではAMPでもすべて読み込まれますね。
https://bibabosi-rizumu.com/cocoon-amp-twitter-iconfont/?amp=1
私のページではサイドバーに大きな画像がたくさんあるのも関係しているのか?、読み込みしきれないような印象などと思ったり?
本文・関連記事下にデフォルトでサイドバー非表示になったので久々にチェックしてみたんですが、読み込みに時間がかかり表示されない環境は必ずありそうですね。。
- Cocoon設定-モバイルタブで『スライドインボタン時コンテンツ下のサイドバーを表示』を選択して下のほうで見てもらう的な
ですが完全に読み込みが早くなった気がするんですが。気のせいでもないような…?分かりませんが??
2018年6月21日 21:48
以前から、スライドインスサイドバーでも画面内に入りそうな部分は、表示されていたと思います。
ただ、スライドインサイドバーだけ、スクロールインした時に画像呼び出しトリガーが働かないのは相変わらずのようですね。
いまだに、ちょっと対処方法も分からないです。
Topic starter
2018年6月22日 07:10
以前から、スライドインスサイドバーでも画面内に入りそうな部分は、表示されていたと思います。
ですね。それが昨日確認したとき、わいひらさんのCocoon(デフォルト:サイド:小さな画像の場合)ではほぼ全部表示され、私の大きな画像でも結構読み込まれて。※下までは読み込まなかった。
今確認すれば、そうでもないですね^^;
運よく爆速読み込めたのかもです。2か月のあいだに『何かが変わった』から???と思ったんですが。
完全に読み込みが早くなった気がするんですが。気のせいでもないような…?分かりませんが??
残念ながら…気のせいだったのかも知れません。
私の環境でも(おそらく多くの環境で真っ白ではなく)aタグやテキストも表示されるので、(念のため)下に関連記事下にサイドを付けたまま、そっとしておきます^^
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。