サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年9月26日 21:58
お世話になります。
質問をお願いしたいのですが、スマートフォンでの記事ページで若干の横スクロールが発生してしまい、上下にスクロールする際にかなりストレスになる場合があります。
記事によって横スクロールが発生する記事と発生しない記事があります。
これは対策できるものなのでしょうか。
サイトはこちらになります。
よろしくお願いいたします。
2018年9月27日 06:58
こんにちは。横揺れ探しをまずしなければいけません。
- 横揺れしているページのURLを置いてください
また例えばテーブル・広告など…横幅指定がされているのが原因だと思いますよ。この場合Cocoon設定でテーブルのみをスクロールできたはずです。
実際どれが原因かは見てみないと分かりませんが。
わいひら reacted
2018年9月27日 22:51
僕の環境では、提示されたURLのトップページでは横揺れはしませんでした。
そのトップページが横揺れするので間違いないのでしょうか?
2018年9月28日 18:18
質問者さまと同様の現象が起こっています。
インデックス等の投稿記事の一覧ページはまったく問題ありませんが、記事(投稿)ページと固定ページはすべて横スクロールが発生しています。
iPhone7、ブラウザはSafari、Chrome両方でその現象が起きています。
今朝、テーマのバージョンアップをしたのですが、それ以降横スクロールが発生しております。
----------------------------------------------
サイト名:コンザツ〜紺色の雑記帳〜
サイトURL: https://kon-zatsu.com
ホームURL: https://kon-zatsu.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.8
PHPバージョン:7.2.6
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.2.4.4
カテゴリ数:18
タグ数:28
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.2
All In One SEO Pack 2.8
Contact Form 7 5.0.4
Google XML Sitemaps 4.0.9
Regenerate Thumbnails 3.0.2
Rinker 1.3.3
TinyMCE Advanced 4.8.0
Widget Logic 5.9.0
WP ULike 3.5.0
----------------------------------------------
2018年9月28日 18:44
子テーマの style.css に、この CSS を追加すると横揺れが解消しないでしょうか。
html { overflow-x: hidden; }
わいひら reacted
2018年9月28日 19:22
スクリーンショットがあれば見せていただけたらと思います。
どこかmain領域を大きく。もしくは微妙にはみ出している箇所があるはずですが、その実機がないので確認できないんですね。以下ページ
https://kon-zatsu.com/nittaidai-ekiden/
Chromeデベロッパーツールスマホで見てるとはみ出してない状況なので。スマホの横幅的には広告(自動広告)も問題ない気もするのですが…
具体的にどのページが横揺れしてますか?それからmain領域から、大きくはみ出している箇所がみつかれば、そのスクショを提示していただけたら、もっと原因がしぼれる気もします。わかりませんが
ただおそらくですがAkiraさんのCSSも行けるとは思います
わいひら reacted
2018年9月28日 20:58
Chrome、Firefox、IEで投稿・固定ページを見てみた限りでは、僕の環境も横揺れしないです(添付画像)。
こことかでも問題ないように見えます。
https://sizzy.co/?url=https%3A%2F%2Fkon-zatsu.com%2Famazon-tsuika%2F
実際のページのURLと、わかれば「何がはみ出しているか」とか教えていただいてよろしいでしょうか。
あとは、ログアウトした状態と、子テーマのstyle.cssの中身をすべて削除した状態で不具合が出るか確認していただいてよろしいでしょうか。
2018年9月28日 21:04
Akira様
html {
overflow-x: hidden;
}
htmlの部分をbodyで記述していたので、教えていただいた通りhtmlに書き換えてきましたが、解消されません。
かうたっく様
投稿、固定ページはすべてのページでズレが発生します。
https://kon-zatsu.com/acuvue-toric/
2つピックアップしましたが、このような記事ページはすべてズレます。
コンテンツのはみ出しがないか確認しましたが、見当たりません。
質問者様のブログも同様で、私の環境からだとインデックス等の一覧のページはズレが発生せず、投稿、固定ページは私が見た限りですが、見たページはいずれもズレが発生しています。
コンテンツのはみ出しは見当たりません。
2018年9月28日 21:55
見やすいよう背景色をダークグレイに変更しています。
スクリーンショットから、それは上の広告のせいではないでしょうか。
とりあえず、広告を削除した状態で試してみていただけますでしょうか。
2018年9月28日 22:43
上部に固定で表示される広告はなんなんだろう…。自動広告なんだろうか。
当サイトでもiPhone7で見ると横揺れしますか?
https://wp-cocoon.com/1-2-3/
2018年9月28日 22:49
たなかまさんのサイトもwpxですね。
http://seocheki.net/site-check.php?u=https://tanakama.jp/
紺色さんのサイトwpx。
http://seocheki.net/site-check.php?u=https://kon-zatsu.com/
buchoさんのサイトはエックスサーバー。
http://seocheki.net/site-check.php?u=https://bucho-diver.com/
どれもエックスサーバー系統ですね。
もしかしたら、サーバーの高速化関係の設定が有効になっていますか?
よろしければ、一度無効にして試してみてください。
2018年9月28日 23:01
なぜか以下で改善されます・・・。
なるほど。その部分だったか…。
これは確かに原因としてあり得るかも。
修正したものを以下にアップしておきました。
これで大丈夫でしょうか。
https://github.com/yhira/cocoon/archive/master.zip
Firefoxのみで不具合があって修正したら、今度はiPhoneのみで別の不具合…。
なかなかに環境問題は難しいですね…。
2018年9月28日 23:03
上部の広告はアドセンスの自動広告機能を利用したアンカー広告です。
現在外す設定をしていますが、反映に時間がかかるため、もう少しお時間をいただきます。
高速化は、ズレが発生する前から四か所すべてチェックが外れた状態です。
2018年9月28日 23:09
おそらく原因は、たなかまさんが書かれたものだと思います。
おそらく広告は関係ないのかも。
僕の一つ前の返信のファイルが修正版なので、アップデートして試してみていただいてもよろしいでしょうか。
2018年9月28日 23:22
修正版を適用したのち、CSS等をすべて18:18に投稿した時の状態に戻し、確認しました。
iPhone7のSafari、Chromeともに横ズレが解消されました。
この度はご対応いただき、ありがとうございました。
わいひら reacted
2018年9月28日 23:23
ありがとうございます。
修正版をFTPアップしたところ、直りました!
※現在はテスト環境(Xサーバー)でテスト作業をしています。
wpxだとキャッシュが強いので・・・。
念のため、他の方もチェックいただけると幸いです。
よろしくお願いいたします。
わいひら reacted
2018年9月28日 23:34
みなさん、ご協力ありがとうございます!
僕はiPhoneを持っていないので、助かりました。
このバージョンアップしたファイルをすぐに自動アップデートにのせたいと思います。
やっぱり、機種間の違いはあるもんなんですね。
勉強になりました。
また何かありましたら、ご連絡いただけると幸いです。
出来る限りすぐに対応出来ればと思います。
一応このトピックは、もうしばらく開けとこうと思います。
かうたっく reacted
Topic starter
2018年9月29日 10:23
皆様
最初の投稿者です。
ご検証いただきましてありがとうございます。
きのうまではiPhone8で横揺れしてましたが、先ほどiPhone8で投稿ページを開いて更新すると横揺れしなくなりました。
私の方でも少し様子を見てみたいと思います。
わいひら reacted
2018年9月29日 17:26
検証を繰り返しされた方々のおかげですね!!
凄い^^
おつかれさまでした❦
2018年9月29日 20:49
ご確認ありがとうございます。
みなさん大丈夫そうなので、トピックも解決にしておこうと思います。
また何かおかしな表示がありましたら、ご連絡いただければ修正できればと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。