サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2025年12月12日 20:50
いつもお世話になっております。
フォーラムへの初めての投稿、失礼いたします。
2025年2月末頃からCocoonの利用をさせていただいております。
以前からおすすめカードの表示をさせていただいていたのですが、
バージョン2.8.9に最新に更新してから？（正確なタイミングが不明で申し訳ございません）か、
モバイルでのおすすめカードの表示が1列になりました。
当方のブログで使用しているおすすめカードは6枚（6つのページ）で、
2日前に見たときはモバイルだと2列だったと思うのですが
今日確認したところ1列になっておりました。
これを2列に戻す項目や、CSSなどはありますでしょうか？
お忙しい所申し訳ありませんが、ご教示頂けますと幸いです。
----------------------------------------------
不具合・カスタマイズ対象ページのURL： https://reaction-idols.com/
相談内容：モバイルでのおすすめカードの表示を2列にしたい
環境情報：
----------------------------------------------
サイト名：海外の反応アイドル通信
サイトURL： https://reaction-idols.com
ホームURL： https://reaction-idols.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バージョン：6.9
PHPバージョン：8.3.25
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br, zstd
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.9
カテゴリー数：40
タグ数：42
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1064 バイト
functions.phpサイズ：655 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/uploads/2025/05/logo100_homeimage004.webp
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：1
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Ad Invalid Click Protector 1.3.0
Contact Form 7 6.1.4
LiteSpeed Cache 7.6.2
Site Kit by Google 1.167.0
UpdraftPlus - Backup/Restore 1.25.9
WP Multibyte Patch 2.9.3
XML Sitemap Generator for Google 4.1.21
----------------------------------------------
2025年12月12日 23:49
adminidolsさん
現状、以下の部分が。
以前は、以下のような感じだったということで、よろしいでしょうか。
そうだとすると、以下の対応の影響のような気がします。
「おすすめカード」のカード幅が均一にならない不具合修正
https://github.com/xserver-inc/cocoon/commit/bdeb1b6f26d3c31b65aab715bcb086bb81b253f0
https://github.com/xserver-inc/cocoon/commit/bdeb1b6f26d3c31b65aab715bcb086bb81b253f0
私のローカル環境で試してみましたが、以下のような感じでした。
（テーマのバージョンは、ローカル環境にあったもので試しました）
①
WordPress 6.8.3
Cocoon 2.8.8
②
WordPress 6.8.3
Cocoon 2.8.8.2
width:50%側が負けてしまっていますので、詳細度を上げる等する必要があるのかもです。
（テーマ側で対応が必要なのではないかと）
（テーマ側で対応が必要なのではないかと）
adminidols and わいひら reacted
2025年12月13日 01:58
上記を補足します。
●設定
- [投稿]→[カテゴリー]でアイキャッチに幅400px以下の画像を設定。
- アイキャッチ未設定の投稿をメニュー化し、メニュー名を「test」に設定。
- [Cocoon設定]→[おすすめカード]→メニュー選択で「test」を指定。
●作り込みの経緯
カテゴリー画像がNO IMAGEの代替として表示される。
このとき、元画像の幅が400px以下のため、サムネイルが統一されず表示が不揃いになる（図参照）。
そのため、画像にwidth:100%を追加して揃えた。
https://wp-cocoon.com/community/postid/86867/
●現象
画面幅834px以下では本来2 カラムになるが、width:100%が優先される。
その結果、提示サイトでは799px以下でも画像幅が400pxのまま保持され、折り返されて1カラムになってしまう。
adminidols and わいひら reacted
トピックスターター 2025年12月13日 11:49
ｍｋ2様
ご返信ありがとうございます。
仰るとおりで、以前は2枚目の画像のように2列で並んでおりました。
今は1枚目の画像のように1列になっております。
githubのリンクも見させて頂きました。ありがとうございます。
他の影響を受けていることは理解できたのですが、解決策がよくわかっておらずすみません。
大門未知子様
細かい検証と技術的なアプローチありがとうございます。
恥を忍んで正直に言って、ちんぷんかんぷんなため、しばらく様子を見させていただきたいと思います。。。
トピックスターター 2025年12月13日 13:06
ｍｋ2様
親テーマの修正待ちとのこと、承知致しました。大変ありがとうございます。
2025年12月14日 23:00
ご連絡いただきありがとうございます。
chu-yaさんのコードを参考にCSSの方を修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/420506bd230a56fc34184dc0a6eb288b9a04a37a
最新版への手動アップデート方法はこちらになります。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
adminidols reacted
2025年12月15日 06:41
ご対応いただき、ありがとうございます。
私の環境では、モバイル表示に問題なさそうです。
（PC表示側も問題はなかったですが、環境にあるものしか確認しておらず、バリエーションは足りないかもです）
> adminidolsさん
ご確認いただけますと、幸いです。
わいひら and adminidols reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。