サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024年10月27日 14:30
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.9
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
以下の修正で、[C]最近のコメントのコメント間の余白を調整しています。
https://github.com/xserver-inc/cocoon/commit/cded565f65ea164dbb2934b5f178acb995f92dcf
このとき、flexとgapを用いていますが、あまり望ましくありません。
recent-comments 内の要素は本来recent-comment-linkしかないためです。
recent-comments:afterというようにclearfixを定義しているため、recent-comments内にはrecent-comment-linkと、このclearfixが要素として含まれることになります。
その結果、要素間のgapが有効となり、当然、最後のrecent-commentsの下にも余白ができます。
flexを使わず、変更前のコードに以下を付けるのと変わりません。紛らわしいので、私は以下の方が望ましいと思います。
margin-bottom: 12px;
わいひら reacted
Topic starter
2024年10月27日 14:48
1コメント（recent-comments）ごとに並び、それらを包括する親要素（ラップ）があり、そこにflex、gapを用いるならいいのですが。
実は、recent-commentsが親で、その中に、recent-comment-linkが並ぶ予定だった？？
わいひら reacted
2024年10月28日 20:12
ご連絡いただきありがとうございます。
実は、recent-commentsが親で、その中に、recent-comment-linkが並ぶ予定だった？？
そうですね。クラスの命名的にもそのようにしたかったのは間違いないと思います。そんなそうなっているもんだと思い込んでいました。
修正しておこうと思います。スキンなども修正しないと。
Topic starter
2024年10月28日 20:18
display:flexですが、疑似要素も要素として扱われてしまいます。
各所にcfが入っているので、display:flexを使う際は、要注意です。
そうですね。クラスの命名的にもそのようにしたかったのは間違いないと思います。そんなそうなっているもんだと思い込んでいました。
修正しておこうと思います。スキンなども修正しないと。
HTML構成を見直さず、現状のままで、追加した以下を削除し、margin-bottom:12pxとすればいいのでは？
その際、最後の要素だけ、margin-bottomを付けない。
要素を変えると、言われるように、スキンに影響が出る場合があります。
本変更で、私のスキンは影響したので、display:blockを追加しました（笑）
https://github.com/xserver-inc/cocoon/commit/cded565f65ea164dbb2934b5f178acb995f92dcf
2024年10月28日 21:53
とりあえず一旦こちらで修正しました。
https://github.com/xserver-inc/cocoon/commit/f9705b8ce94c1b5196fcb20d380801dbc3a279ac
ただ個人的には新着記事ウィジェットのような他の要素群との構造が違うので、気持ち悪い。
なので、近いうちに以下のように変更するかも。
実は、recent-commentsが親で、その中に、recent-comment-linkが並ぶ予定だった？？
Topic starter
2024年10月28日 23:43
ただ個人的には新着記事ウィジェットのような他の要素群との構造が違うので、気持ち悪い。
なので、近いうちに以下のように変更するかも。
コードの修正案を提示します。以下の部分を置き換えてください。
一通り、スキンを確認しましたが、特に問題ありませんでした。
recent-comments.php
変更前
変更後
https://notepad.pw/share/nBxCj2nIklg4wNEieSfE
style.css
変更前
変更後
前の状態に戻します。
.recent-comments {
line-height: 1.3;
display: flex;
flex-direction: column;
gap: 12px;
}
Topic starter
2024年10月29日 00:26
●補足
私のスキンは、コメント間に新着記事に合わせ区切り線を入れています。
これが消えてしまいます。
このため、親テーマの変更に合わせ、スキンのstyle.cssの差し替えが必要となります。ご了承ください。
2024年10月29日 18:34
コードの修正案を提示します。以下の部分を置き換えてください。
一通り、スキンを確認しましたが、特に問題ありませんでした。
まさにやりたかったのはこれでした。
変更しておきました。
https://github.com/xserver-inc/cocoon/commit/793268b88d7e0f2045cae8f29cb96919868d0211
スキンはBizarre-foodスキンと、Seasonスキンのみ、なるべく元のデザインと近いように修正しておきました。
Topic starter
2024年10月29日 19:41
スキンの修正で問題があります。このため、gap定義を削除してください。
●スキン「Bizarre-food」
gap:1emとしていますが、[Cocoon設定]→[全体]→サイトフォントに応じ、親gapのpxは変化します。
このため、フォントサイズに応じ要素間の間隔が変わってきます。
スキンのgap定義を削除し、親のgap:12px固定のままでいいかと思います。
●スキン「Season」
gap:3%が効きません。要素間は0となっています（図参照）。
このため、スキン「Bizarre-food」同様、gap定義は不要と思います。
参考：
https://qiita.com/tomoki_hashiba/items/6732425528afa2589c78
●雑談
わいひらさんの書くCSS、たまに不安になります（笑）
わいひら reacted
2024年10月30日 07:42
Seasonはともかく、Bizarre-foodになんで1emつけたんだろ…。
元々そんな記述がなかったのに。margin-bottom:1emがあったものとして、思い込んでいました（一晩寝て見直したら気づいた）。
通院とかで疲れている時や体調不良の時は、ほんと触らない方がいいのかもしれない。
お手数おかけして申し訳ないです。修正しておきました。
Topic starter
2024年10月30日 08:54
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.9.2
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
修正されていることを確認しました。
本件をクローズとします。
●スキン「Season」
gap:3%が効きません。要素間は0となっています（図参照）。
これですが、display:gridだとgrid-rowが%でも期待通り反映されれます。
まず%を使わないので、はじめ原因が不明で色々調べ。
わいひら reacted
2024年11月7日 11:24
遅ればせながら、ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。