サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年6月22日 11:44
わいひらさん
いつもお世話になっております。
その後、再びcocoonを活用させていただいておりますが、cocoonに戻すと、どうしても表題の不具合が解決できず、お手上げ状態になっています。
指摘を受けているページ： https://www.ltkensyu.com/logicalthinking/1-4/4-1
同様の不具合に関連した過去のフォーラムなども参考に、テーマの更新等も試行しましたが、今回はAds自動広告とは関係のなさそうな原因のようで、目下手詰まり状態です。
検証ツールや自分のスマホでは特に異常は見られないのですが、添付画像のようにスマホ用googleBotではNGなんだそうです。
メニューバーのみがフルサイズでコンテンツ幅が狭小になっています。但し、今回はAds広告がコンテンツ幅を超えている部分は見当たりません。
----------------------------------------------
サイト名：ロジカルシンキング研修.com
サイトURL： https://www.ltkensyu.com
ホームURL： https://www.ltkensyu.com
コンテンツ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
WordPressバージョン：5.7.2
PHPバージョン：7.4.12
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：br, gzip, deflate
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.1
カテゴリ数：4
タグ数：30
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.9
Autoptimize 2.8.4
BackWPup 3.9.0
Broken Link Checker 1.11.15
Classic Editor 1.6
Contact Form 7 5.4.1
Download Monitor 4.4.4
Google XML Sitemaps 4.1.1
Limit Login Attempts 1.7.1
Redirection 5.1.1
Regenerate Thumbnails 3.1.5
Search Regex 2.4.1
SiteGuard WP Plugin 1.6.0
WP-Optimize - Clean, Compress, Cache 3.1.11
WP Fastest Cache 0.9.1.9
WP Fastest Cache Premium 1.6.0
WP Multibyte Patch 2.9
----------------------------------------------
2021年6月22日 12:55
前略、hideo1516 さん
Cocoonの親テーマのバージョンが古い場合などに、同様の症状が見られる場合がありましたが、親テーマのバージョンも新しいですし、原因が掴みにくいような気もします。
プラグインの「Autoptimize」は、Cocoonの高速化設定と併用すると不具合が生じることが判っていますが、高速化設定と併用していない場合のことは、ちょっとよくわかりません。
ただ、高速化機能があるCocoonの場合は不要と思われますし、今までのフォーラムの書き込みから、このプラグインは使わない方が無難な気がしています。
今回の件とプラグインの件が関係があるかどうかは、わかりません。
あと、原因を探っている間は、キャッシュ系のプラグインは停止しておいた方が良いのかもしれません。
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
2021年6月22日 13:57
hideo1516さん
私もキャッシュは一旦無効にするか、乃至はクリアするか、しておいた方が良いように思います。
昔から更新されてない投稿であれば、古い状態のキャッシュの可能性もあるのではないかと思います。
確かに仰るように、モバイルフレンドリーテストでは同事象が発生しているのは確認させていただきました。
しかし、実機・デベロッパーツールでは発生しません。
デベロッパーツールで、要素にアウトラインをつけて確認しましたが、ご提示いただいたページではみ出している場所は確認できませんでした。
どうすれば、これが発生するのか、再現できるのか。
再現できないことには、確認することすら難しいのかなという印象です。
わいひら reacted
2021年6月22日 15:12
https://www.ltkensyu.com/logicalthinking/1-4/4-1
上記のページをiPhoneから見たところ、記事の下のほうにあるテーブルがコンテンツ幅からはみ出ていました。スマホからなので詳しくソースコードを見ることができませんが、報告だけ…。
2021年6月22日 15:43
さる子さん
ありがとうございます。
どうやらブラウザによって違いがあるみたいです。
（iOS系は確認できませんけれど。。。）
Chromeでははみ出しません。
Firefoxでも。
しかし、Edgeでははみ出します。
はみ出すテーブルは、幅が指定されているみたいです。
（style="width: 963px;"）
（style="width: 963px;"）
さる子 reacted
2021年6月22日 16:45
iPhoneのSafariとChrome両方調べてみましたが、どちらもコンテンツ幅からはみ出ていました。
ブラウザやOSによって効いてないCSSがあるのかもしれませんね。
はみ出すテーブルは、幅が指定されているみたいです。
（style="width: 963px;"）
原因はこれ…ですかね…？
わいひら reacted
2021年6月22日 17:00
なんとっ！
iPhoneのSafariとChrome両方調べてみましたが、どちらもコンテンツ幅からはみ出ていました。
Android実機のChromeで確認してもはみ出さないです。。。
原因はこれ…ですかね…？
とりあえず、Edgeのデベロッパーツールでは、その箇所を削除するとはみ出しは解消されます。
モバイルフレンドリーテストすると、どうなのか…ですけれど。
私の環境でははみ出すのは、Edgeだけなんですよね。
さる子 reacted
Topic starter
2021年6月22日 17:56
みなさま
外出していて、遅くなりまして失礼しました。
力のある皆様のおかげで解決しました。
さる子さん、mk2さんのご助言で、tableに過大な数値（style="width: 963px;"）が指定されていることに気づきました。昔のhtml時代のものをそのまま使っていました。
今まで、僕自身は、tableも画像と同様、テーマのcssでレスポンシブに修正されるものと思い込んでいた節があります。
みなさま、ありがとうございました。
hideo1516
さる子 reacted
2021年6月22日 22:05
tableも画像と同様、テーマのcssでレスポンシブに修正されるものと思い込んでいた節があります。
おそらくレスポンシブにするためのCSSは書かれているはずです。mk2さんが見たときはEdge以外でははみ出ていなかったようなので。
ブラウザなどの環境によってはCSSがうまく適応されない場合があります。特にiPhone…。
何かあったときは手元にあるパソコンとスマホなど、複数のブラウザで確認してみるといいと思います。パソコンに複数種類ブラウザをインストールしておくのもオススメです。
わいひら reacted
Topic starter
2021年6月22日 22:28
おそらくレスポンシブにするためのCSSは書かれているはずです。
さる子さん
この度はありがとうございます。
「レスポンシブにするためのcssは書かれているもの」という思い込みは不確かなものでしたが、やはり間違いではなかったと認識致しました。
ただ、ブラウザなどの環境によって、そのcssが上手く適応されない場合があるとも認識しました。同時に、テーマによっても、その設定が異なるため、振舞いにも違いが生じるものと理解しました。
今後は複数のブラウザ、特にiPhone（家内のを借りて）、Edgeでも確認するようにします。
ありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。