サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年2月27日 17:39
◆問題点
Redditの投稿を埋め込む際、数日前までは「RedditページのURL」を記事に入力するだけで1枚目ように表示され、問題無く動画再生もできたのですが、突然2枚目の画像のような状態になり、過去の記事を確認しても同じような症状になっていました。
また、画像にある通り
①の方法だと動画の一部しか表示されず、再生が出来ない。
②の方法では全体で表示される
という状況です。
このことから、②の方法で埋め込めば問題無く動作すると思い、それを試したところ、PC画面での再生は出来るようになったのですが、更なる問題が生じました。
◆問題点２
②の方法で埋め込むと、
- 以前は自然に中央揃えで表示されていたのに左寄せで表示されるようになった。※一応解決済み
- PC画面では問題なく表示されるが、スマホだと画面からはみ出してしまって不格好な状態になった。
といった問題が生じたのです。
◆この症状がなぜ起きたのか
これに関してはReddit側の問題でこうなっているのかと思い、Reddit動画を埋め込んでいる他サイト様のページを拝見したところ、1枚目のように問題なく表示されていました。
他に関連しそうなことでこの症状が出る前にやった事は、テーマのアップデート、一部プラグインの更新位だと思います。
◆試した事
以下がRedditから取得したHTMLです。
<blockquote class="reddit-embed-bq" data-embed-height="440"> <a href="https://www.reddit.com/r/ApexOutlands/comments/11civfr/i_think_i_found_the_real_backrooms_in_apex/?ref_source=embed&ref=share"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Apex Legends に実体のある本当の奥の部屋を見つけたと思います...</font></font></a><br><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> by </font></font><a href="https://www.reddit.com/user/LisNieLada"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">u/LisNieLada</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> in </font></font><a href="https://www.reddit.com/r/ApexOutlands/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">ApexOutlands</font></font></a> </blockquote><script async="" src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
そして中央揃えについてですがRedditのHTMLを<div>タグで囲い、以下の方法でなんとか解決はしました。
text-align: center; margin: 0 auto;
ですがスマホ表示で画面からはみ出してしまうといった症状がどうしても改善されず、上記のHTMLからどの部分を指定して書けばいいのかわからない状況です。
◆達成したいこと
一番は最初の「RedditページのURLを記事に入力する」方法で画像1枚目のように表示できるように修復?する。
もしそれが不可能であれば画像2枚目の②の方法でスマホ表示時に画面からはみでないようにする。(こちらはタブレットでも問題ないようにできる方法も教えていただけると幸いです。)
説明下手で申し訳ありません。
CSSをどうすればいいのか分からない状況です、どうか教えていただけませんでしょうか。
何卒よろしくお願い致します。
2023年2月27日 22:21
できれば実際のページも見られると助かります。
フォーラムの案内にもありますように該当ページのURLを提示していただき、よろしければ環境情報もいただければ幸いです。
※サポート対象外のケースもにもありますように、プラグイン独自の不具合あった場合は対応できないまいもありますのでご了承ください。
Topic starter
2023年2月28日 00:56
失礼いたしました。
以下の通りでございます。
コンテンツURL：/wp-content インクルードURL：/wp-includes/ テンプレートURL：/wp-content/themes/cocoon-master スタイルシートURL：/wp-content/themes/cocoon-child-master 親テーマスタイル：/wp-content/themes/cocoon-master/style.css 子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css スキン：/wp-content/themes/cocoon-master/skins/skin-colors-pink/style.css WordPressバージョン：6.1.1 PHPバージョン：7.4.33 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.0 エンコーディング：none 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.5.7.9 カテゴリー数：7 タグ数：2358 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.2 style.cssサイズ：3539バイト functions.phpサイズ：491バイト ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：5 Auto Post Thumbnail：1 Retina：1 ホームイメージ： http://genshin-leak.com/wp-content/uploads/2020/12/hghd.png ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：0 CSS縮小化：0 JavaScript縮小化：0 Lazy Load：0 ---------------------------------------------- 利用中のプラグイン： AddQuicktag 2.6.1 Ad Invalid Click Protector 1.2.7 Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0 All in One SEO 4.3.1.1 Autoptimize 3.1.5 BackWPup 4.0.0 Broken Link Checker 2.0.0 Cache Clear for お名前.com 1.0.0 Category Order and Taxonomy Terms Order 1.7.4 Check & Log Email 1.0.6 Code Snippets 3.2.2 Comment Report Button 1.0.1 Comments Like Dislike 1.1.7 Contact Form 7 5.7.4 Easy Table of Contents 2.0.45.1 EWWW Image Optimizer 6.9.3 FooGallery 2.2.26 Google XML Sitemaps 4.1.7 Really Simple SSL 6.2.0 Regenerate Thumbnails 3.1.5 Search Regex 3.0.6 Shortcodes Ultimate 5.12.8 Simple Custom CSS 4.0.6 SiteGuard WP Plugin 1.7.3 Site Kit by Google 1.94.0 Smart Slider 3 3.5.1.14 WebP Express 0.25.5 Word Balloon 4.19.6 WordPress Popular Posts 6.1.1 WP-Optimize - Clean, Compress, Cache 3.2.12 WP Downgrade | Specific Core Version 1.2.5 WP Multibyte Patch 2.9
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-colors-pink/style.css
WordPressバージョン：6.1.1
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.0
エンコーディング：none
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.7.9
カテゴリー数：7
タグ数：2358
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：3539バイト
functions.phpサイズ：491バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：1
Retina：1
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.6.1
Ad Invalid Click Protector 1.2.7
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
All in One SEO 4.3.1.1
Autoptimize 3.1.5
BackWPup 4.0.0
Broken Link Checker 2.0.0
Cache Clear for お名前.com 1.0.0
Category Order and Taxonomy Terms Order 1.7.4
Check & Log Email 1.0.6
Code Snippets 3.2.2
Comment Report Button 1.0.1
Comments Like Dislike 1.1.7
Contact Form 7 5.7.4
Easy Table of Contents 2.0.45.1
EWWW Image Optimizer 6.9.3
FooGallery 2.2.26
Google XML Sitemaps 4.1.7
Really Simple SSL 6.2.0
Regenerate Thumbnails 3.1.5
Search Regex 3.0.6
Shortcodes Ultimate 5.12.8
Simple Custom CSS 4.0.6
SiteGuard WP Plugin 1.7.3
Site Kit by Google 1.94.0
Smart Slider 3 3.5.1.14
WebP Express 0.25.5
Word Balloon 4.19.6
WordPress Popular Posts 6.1.1
WP-Optimize - Clean, Compress, Cache 3.2.12
WP Downgrade | Specific Core Version 1.2.5
WP Multibyte Patch 2.9
----------------------------------------------
◆URL
① https://genshin-leak.com/archive-230
② https://genshin-leak.com/article-80
（※②のページが正常の状態です）
後に気付いたのですが、過去の記事(②)を再度確認したところ、上にも書いた通り埋め込みは正常に表示されていました。
ですがその投稿を編集、更新すると①のページのような状態になってしまいます。
一度そうなってしまうしまうと二度と②の状態には戻らない状況です。
また、①②共にURLを直接書き込んで埋め込む方法を取っています。なので編集方法に違いはありません。
【補足】
自身が運営している他のサイトでも埋め込みを試したのですが同じ症状が起こるので、プラグインに問題は無いと思われます。（他サイトのプラグインを全て無効化して試しました。）
お手数おかけしますが何卒よろしくお願い致します。
This post was modified 2年前 by maroo
2023年2月28日 02:15
@maroo さん
Cocoon の問題ではないと思います。公式テーマでも同様の状態になりました。
① 高さが足りない不具合
最近 Reddit の JavaScript が変わったのでしょうか？
https://genshin-leak.com/article-80 の Reddit の JavaScript は以下のものです。
<script async src="https://embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>
一方、 https://genshin-leak.com/archive-230 や私のテスト環境では、以下の JavaScript を読み込んでいます。src の URL が違います。
<script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
そのため、Reddit 側で対応しないと難しい気はします。<iframe> の高さが同じであれば CSS で対応できるのですが、動画によって違うため難しいと思います。min-height や aspect-ratio で最低限の高さを持たせるか、各動画の高さを確認して CSS を指定する面倒な方法ぐらいしか思い付きません。
② 横にはみ出る不具合
これは対応は無理です。Reddit 側で対応しないといけません。
添付画像にあるように、<iframe> 内で動画部分に min-width: 486px が指定してあります。そのため、最低 486px の幅の動画が表示されます。また、<iframe> 内は変更できません。
This post was modified 2年前 2回 by Akira
わいひら reacted
2023年2月28日 19:14
正常に動作しているページのiframeまでの構造はスクリプトか何かで .wp-block-embed__wrapper > .embedly-card > .embedly-card-hug > iframeとなっていますね。
2023年2月28日 19:15
反面、動作していないページは.wp-block-embed__wrapper > iframeとなっていますね。
この場合テーマが影響するとしたらCSSだと思うのですが、影響しているテーマ側のCSSは見つけられませんでした。
2023年2月28日 19:18
フォントの読み込みっぽいので、これが原因かわかりませんが正常動作していないページでは以下のようなエラーが出ているようです。
2023年2月28日 19:18
正常動作しているページではこれだけでした。
2023年2月28日 19:20
Akiraさんも書かれているように、iframeの縦のサイズが決まっているのであればCSSで対応はできるのかもしれません。
Topic starter
2023年3月2日 16:45
@akira お返事いただき有難うございます。
Reddit側の問題なんですね、、、。
①の高さについてですが、
以下のコードを<div>タグで囲い、「data-embed-height="〇〇"」の部分を調整する形で対応する事にしました。
<blockquote class="reddit-embed-bq" data-embed-height="416"> <a href="https://www.reddit.com/r/Genshin_Impact_Leaks/comments/xkqu8j/character_teaser_cyno_a_just_punishment/?ref_source=embed&ref=share"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">キャラクターティーザー - 「Cyno: A Just Punishment」</font></font></a><br><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> by </font></font><a href="https://www.reddit.com/user/lloydschreave"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">u/lloydschreave</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> in </font></font><a href="https://www.reddit.com/r/Genshin_Impact_Leaks/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Genshin_Impact_Leaks</font></font></a> </blockquote><script async="" src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
ですがやはりスマホ版だとはみ出てしまうので現状はRedditの対応待ちという事になりそうですね・・・。
編集：上記の返信の後、もう一度埋め込みをした所、なぜか以前通り正常に表示されました！
正直設定等はいじってないのでおそらくakiraさんのおっしゃる通りReddit側の問題だったのだと思います。
相談に応じて頂きありがとうございます！お騒がせしてすいませんでした・・・。
This post was modified 2年前 2回 by maroo
わいひら reacted
Topic starter
2023年3月2日 16:53
正常に動作しているページでもエラーが少ないという事は何らかの方法で以前の埋め込みの状態に戻す事も出来ますか？
フォントの読み込みという事は、設定でフォントを変更するなどの対応が必要なのでしょうか。
Access-Control-allow-Originに関しては少し調べましたが、とても難しい問題のように思えます・・・。
編集：上記の返信の後、もう一度埋め込みをした所、なぜか以前通り正常に表示されました！
正直設定等はいじってないので、何故治ったのかはわかりません・・・。
ですが相談に応じて頂きありがとうございます！
お騒がせしてすいませんでした・・・。
This post was modified 2年前 by maroo
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。