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

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

カラムのモバイル表示が崩れてしまいます
 
共有:
通知
すべてクリア

[解決済] カラムのモバイル表示が崩れてしまいます

14 投稿
4 ユーザー
6 Likes
114 表示
(@cocosasu)
Active Member Registered
結合: 6か月前
投稿: 12
Topic starter  

お世話になります。下記、解決方法がわからず、考えられる原因などをご教示いただけると幸いです。

 

不具合対象ページのURL: https://iiu.color-mall.com/(以下全ページ)

相談内容:
エディターのタグから、ページ内でカラムを設定していました。いつからか明確にはわからないのですが、モバイルでの表示が崩れるようになってしまいました。
3カラム:2カラム目と3カラム目の余白がなくなってしまった
2カラム:カラム間の余白がなくなってしまった

不具合の発生手順:
モバイルでページにアクセスしていただくと発生します。(Chromeのディベロッパーモードなどでも再現可)

解決のために試したこと:
設定変更などの心当たりが無かったため、WordPressやテーマのダウングレードを実施してみました。しかし、解決にはいたっていません。また、プラグインをすべて無効化しましたが、解消しませんでした。

以下、環境情報と、3カラムのモバイル表示の画像を添付いたします。PCは通常通り表示されます。

お手数をおかけいたしますが、何卒よろしくお願いいたします。

環境情報:

----------------------------------------------
サイト名:iiU(いいゆ)|酵素風呂・酵素浴ポータル
サイトURL: https://iiu.color-mall.com
ホームURL: https://iiu.color-mall.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
スキン:/wp-content/themes/cocoon-master/skins/bizarre-foods-greensoba/style.css
WordPressバージョン:6.0.2
PHPバージョン:7.4.25
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/2.0
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.0
カテゴリ数:375
タグ数:15
ユーザー数:11
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:845バイト
functions.phpサイズ:658バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2020/12/cropped-スクリーンショット-2018-05-06-22.10.08.png
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Advanced Ads 1.37.1
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 5.0.1
Aurora Heatmap 1.5.6
Autoptimize 3.1.3
BackWPup 3.10.0
Child Theme Configurator 2.6.0
Classic Editor 1.6.2
Contact Form 7 5.6.4
Contact Form 7 add confirm 5.1
Flamingo 2.3
Intuitive Custom Post Order 3.1.3
MailPoet 3.101.1
Search & Filter 1.2.15
Shortcodes Ultimate 5.12.3
Smash Balloon Instagram Feed 6.1
VK All in One Expansion Unit 9.84.1.0
WebSub (FKA. PubSubHubbub) 3.1.2
WP Downgrade | Specific Core Version 1.2.5
wpForo 2.0.9
WP Mail SMTP 3.6.1
Yoast SEO 19.9
----------------------------------------------


   
(@cocosasu)
Active Member Registered
結合: 6か月前
投稿: 12
Topic starter  

以前のモバイル表示画像も添付いたします。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 10か月前
投稿: 742
 
投稿者:: @cocosasu

HTML縮小化:1
CSS縮小化:1

すみません、調査するうえで上記の設定を解除願いたく。
正常の時のCocoonのバージョン分かりますか?


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4733
 

今ある環境でしか確認はしていません。
(ローカル環境の管理画面が、Chromeでは開けなりました・・・Chromeのバージョンアップの影響かも)

Cocoon 2.5.1

 
Cocoon 2.5.0
 
Cocoon 2.4.7.4
 
Cocoon 2.4.1.1
 
この辺の影響でしょうか。
 
上記だけではなさそう…ですね。
左のカラムも高い気がします。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4733
 

cocosasuさん

お問い合わせの際は、「高速化の無効」「環境情報のご提示」をお願いしております。

詳しくは、フォーラム上部の案内をご確認ください。

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

「高速化」が有効の場合、調査・確認の妨げになります。
必ず無効にしてください。

 


今回の事象と関係はないと思いますが、気になることをいくつか書かせていただきます。

投稿者:: @cocosasu

Autoptimize 3.1.3

上記プラグインは、Cocoonの高速化と機能が重複します。

機能衝突(コンフリクト)により、不具合が起きることがしられています。

アンインストールをお勧めします。

 


投稿者:: @cocosasu

Classic Editor 1.6.2

上記プラグインは、Cocoonをご利用の場合、不要です。

「Cocoon設定」-「エディタ」-「Gutenbergエディターを有効にする」のチェックを外せば、クラシックエディタをご利用になれます。

こちらのプラグインもアンインストールをお勧めします。

 


投稿者:: @cocosasu

VK All in One Expansion Unit 9.84.1.0

上記プラグインは、Cocoonと相性が悪いことがしられています。

(確か、元々は他テーマの機能拡張用だったと記憶しています)

このフォーラムの過去のご相談でも、トラブルの多いプラグインです。

基本的には、アンインストールをお勧めします。

 


WordPressの日本語環境において、以下プラグインは必須と言えます。

無用のトラブルを回避するためにも、インストールなさることを、強くお勧めします。

WP Multibyte Patch
https://ja.wordpress.org/plugins/wp-multibyte-patch/


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

こちらの開発環境で動作確認するために、よろしければブロックエディターの添付画像部分のソースコードをいただけますでしょうか。
ソースコードはこちらの方法でいただければ幸いです。
https://wp-cocoon.com/notepad-pw/


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4733
 

cocosasuさんから返信をいただけず・・・。
そして、まだ高速化も解除していただけず・・・。

昨日、私がデベロッパーツールから取得したHTMLは以下に貼り付けました。
(昨日の私の確認は、以下のHTMLをローカル環境に貼り付けて行いました)

https://notepad.pw/share/vJzQpKhs90WmMfzrhEl8

cocosasuさんは、クラシックエディタをご利用のようですので、私が確認したのもクラシックエディタです。
(プラグインで、クラシックエディタにしているみたいです)


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

ありがとうございます!
利用させてもらいます。
ブロックエディターとばかり思い込んでおりました。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

GitHubのファイルを修正しておきました。
今回の修正によりもしかしたら他で不具合が出てしまうかもしれませんが、その際は都度修正します。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4733
 

ご対応いただきありがとうございます。

私の環境でも、解消していることを確認させていただきました。

ただ、今回はcocosasuさんサイトが高速化されたままの状態で、HTMLソースをコピーさせていただきましたから。
cocosasuさんのサイトでご確認いただかないと、何とも言えないところだと思います。

cocosasuさんのご確認を、お待ちしております。


   
わいひら reacted
(@cocosasu)
Active Member Registered
結合: 6か月前
投稿: 12
Topic starter  

みなさま、ご報告が遅くなり大変申し訳ございませんでした。

ご確認ご対応いただき、ありがとうございます。

chu-yaさんにいただいた高速化の件は、mk2さんにご指摘いただいたプラグインが原因だと思われますので、他のプラグインと一緒に無効化しました。(のちほどアンインストールしたいと思います)

只今より、わいひらさん、mk2さんにご確認いただいたファイルをインストールしてみます。

This post was modified 3か月前 by cocosasu

   
(@cocosasu)
Active Member Registered
結合: 6か月前
投稿: 12
Topic starter  

今テーマファイルをアップロードし、確認しました。

無事に表示したい状態になりました。本当にありがとうございます。

また、不要なプラグイン等についてもご教示いただきありがとうございました。


   
わいひら reacted
(@cocosasu)
Active Member Registered
結合: 6か月前
投稿: 12
Topic starter  

相談しておきながらレスが遅れてしまい、改めて申し訳ありませんでした。

みなさんのご対応に本当に感謝しています。ありがとうございます。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

mk2さん、cocosasuさん、ご確認いただきありがとうございます!


   
共有:

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

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

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

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

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

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

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

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