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カスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スマートフォン(iPhone8)で記事...
 
共有:
通知
すべてクリア

[解決済] スマートフォン(iPhone8)で記事ページが微妙に横スクロールしてブルブルする

24 投稿
6 ユーザー
12 Reactions
2,483 表示
bucho
(@bucho)
Estimable Member Registered
結合: 6年前
投稿: 86
Topic starter  

お世話になります。

質問をお願いしたいのですが、スマートフォンでの記事ページで若干の横スクロールが発生してしまい、上下にスクロールする際にかなりストレスになる場合があります。

記事によって横スクロールが発生する記事と発生しない記事があります。

これは対策できるものなのでしょうか。

 

サイトはこちらになります。

https://bucho-diver.com/

よろしくお願いいたします。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

こんにちは。横揺れ探しをまずしなければいけません。

  • 横揺れしているページのURLを置いてください

また例えばテーブル・広告など…横幅指定がされているのが原因だと思いますよ。この場合Cocoon設定でテーブルのみをスクロールできたはずです。

実際どれが原因かは見てみないと分かりませんが。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

僕の環境では、提示されたURLのトップページでは横揺れはしませんでした。
そのトップページが横揺れするので間違いないのでしょうか?


   
(@紺色)
Active Member
結合: 6年前
投稿: 7
 

質問者さまと同様の現象が起こっています。

インデックス等の投稿記事の一覧ページはまったく問題ありませんが、記事(投稿)ページと固定ページはすべて横スクロールが発生しています。

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
----------------------------------------------


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

子テーマの style.css に、この CSS を追加すると横揺れが解消しないでしょうか。

html {
  overflow-x: hidden;
}

   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

スクリーンショットがあれば見せていただけたらと思います。

どこかmain領域を大きく。もしくは微妙にはみ出している箇所があるはずですが、その実機がないので確認できないんですね。以下ページ

https://kon-zatsu.com/nittaidai-ekiden/

Chromeデベロッパーツールスマホで見てるとはみ出してない状況なので。スマホの横幅的には広告(自動広告)も問題ない気もするのですが…

具体的にどのページが横揺れしてますか?それからmain領域から、大きくはみ出している箇所がみつかれば、そのスクショを提示していただけたら、もっと原因がしぼれる気もします。わかりませんが

ただおそらくですがAkiraさんのCSSも行けるとは思います


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

Chrome、Firefox、IEで投稿・固定ページを見てみた限りでは、僕の環境も横揺れしないです(添付画像)。
こことかでも問題ないように見えます。
https://sizzy.co/?url=https%3A%2F%2Fkon-zatsu.com%2Famazon-tsuika%2F

実際のページのURLと、わかれば「何がはみ出しているか」とか教えていただいてよろしいでしょうか。

あとは、ログアウトした状態と、子テーマのstyle.cssの中身をすべて削除した状態で不具合が出るか確認していただいてよろしいでしょうか。


   
(@紺色)
Active Member
結合: 6年前
投稿: 7
 

Akira様

html {
  overflow-x: hidden;
}

htmlの部分をbodyで記述していたので、教えていただいた通りhtmlに書き換えてきましたが、解消されません。

かうたっく様

投稿、固定ページはすべてのページでズレが発生します。

https://kon-zatsu.com/jokan/

https://kon-zatsu.com/acuvue-toric/

2つピックアップしましたが、このような記事ページはすべてズレます。

コンテンツのはみ出しがないか確認しましたが、見当たりません。

質問者様のブログも同様で、私の環境からだとインデックス等の一覧のページはズレが発生せず、投稿、固定ページは私が見た限りですが、見たページはいずれもズレが発生しています。

コンテンツのはみ出しは見当たりません。


   
(@紺色)
Active Member
結合: 6年前
投稿: 7
 

わいひら様

ズレの発生はいずれもログアウト状態での確認しました。

子テーマstyle.cssの中身をすべて削除し、それが反映されたのを確認して再度記事のページを複数見ましたが、やはりズレが発生します。

コンテンツのはみ出しは確認できません。

等しくすべての投稿、固定ページで発生しています。

見やすいよう背景色をダークグレイに変更しています。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

見やすいよう背景色をダークグレイに変更しています。

スクリーンショットから、それは上の広告のせいではないでしょうか。
とりあえず、広告を削除した状態で試してみていただけますでしょうか。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

すみません、この件につきましては、僕の環境でも(広告なしで)再現できているので、ちょっと検証しています・・・。

※iPhone7です。

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

上部に固定で表示される広告はなんなんだろう…。自動広告なんだろうか。

当サイトでもiPhone7で見ると横揺れしますか?
https://wp-cocoon.com/1-2-3/


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

なぜか以下で改善されます・・・。


@media screen and (max-width: 480px) {
body::after{
width:100%;
}
}

このアクセス解析っぽい要素、僕はよく分かってないのですが、どうされますか・・・?

content:""で空にするわけにはいかないので、横幅を1pxから100%にしたところ、上手く行きました。

あとはafterの位置ですかね。

この要素が何か分かってないのに、コードだけ記載して申し訳ないですが・・・。


   
Akira and わいひら reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

>わいひらさん

連投すいません。

はい、コクーンのサイトも横揺れが確認できています。

キャプチャを添付しますね。

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

たなかまさんのサイトも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/

どれもエックスサーバー系統ですね。
もしかしたら、サーバーの高速化関係の設定が有効になっていますか?
よろしければ、一度無効にして試してみてください。

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

なぜか以下で改善されます・・・。

なるほど。その部分だったか…。

これは確かに原因としてあり得るかも。

修正したものを以下にアップしておきました。

これで大丈夫でしょうか。

https://github.com/yhira/cocoon/archive/master.zip

Firefoxのみで不具合があって修正したら、今度はiPhoneのみで別の不具合…。

なかなかに環境問題は難しいですね…。


   
(@紺色)
Active Member
結合: 6年前
投稿: 7
 

上部の広告はアドセンスの自動広告機能を利用したアンカー広告です。

現在外す設定をしていますが、反映に時間がかかるため、もう少しお時間をいただきます。

高速化は、ズレが発生する前から四か所すべてチェックが外れた状態です。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

おそらく原因は、たなかまさんが書かれたものだと思います。
おそらく広告は関係ないのかも。

僕の一つ前の返信のファイルが修正版なので、アップデートして試してみていただいてもよろしいでしょうか。


   
(@紺色)
Active Member
結合: 6年前
投稿: 7
 

修正版を適用したのち、CSS等をすべて18:18に投稿した時の状態に戻し、確認しました。

iPhone7のSafari、Chromeともに横ズレが解消されました。

この度はご対応いただき、ありがとうございました。


   
わいひら reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 7年前
投稿: 600
 

ありがとうございます。

修正版をFTPアップしたところ、直りました!

※現在はテスト環境(Xサーバー)でテスト作業をしています。

wpxだとキャッシュが強いので・・・。

 

念のため、他の方もチェックいただけると幸いです。

よろしくお願いいたします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

みなさん、ご協力ありがとうございます!
僕はiPhoneを持っていないので、助かりました。

このバージョンアップしたファイルをすぐに自動アップデートにのせたいと思います。
やっぱり、機種間の違いはあるもんなんですね。
勉強になりました。

また何かありましたら、ご連絡いただけると幸いです。
出来る限りすぐに対応出来ればと思います。

一応このトピックは、もうしばらく開けとこうと思います。


   
bucho
(@bucho)
Estimable Member Registered
結合: 6年前
投稿: 86
Topic starter  

皆様

 

最初の投稿者です。

ご検証いただきましてありがとうございます。

きのうまではiPhone8で横揺れしてましたが、先ほどiPhone8で投稿ページを開いて更新すると横揺れしなくなりました。

私の方でも少し様子を見てみたいと思います。

 

 

 

 

 


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

検証を繰り返しされた方々のおかげですね!!

凄い^^

おつかれさまでした❦


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

ご確認ありがとうございます。
みなさん大丈夫そうなので、トピックも解決にしておこうと思います。
また何かおかしな表示がありましたら、ご連絡いただければ修正できればと思います。


   
共有:

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

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

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

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

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

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

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

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