サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024年3月11日 16:31
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.1.5
カテゴリー数：11
タグ数：11
ユーザー数：1
----------------------------------------------
●現象
以下のスキンの時、リストブロックのスタイルが図示のようになる。
- m-sora
- m-tomato
わいひら reacted
Topic starter
2024年3月11日 19:23
●原因
スキン独自のチェックアイコンをul li:beforeに設定している。
この為、番号の場合、counter-increment: listが反映されなず、常に「1」となる。
●対策
リストスタイルを設定していない時、スキン独自のCSSを反映させる。
.article ul:not(.has-list-style) li {
.article ul:not(.has-list-style) li:before
以下を追加する。
.iconlist-box {
padding: 0;
}
.iconlist-box li::before {
margin-right: 0;
margin-left: 0;
}
●補足
スキンのデザイン仕様で、ボーダー設定は効きません。
わいひら reacted
2024年3月12日 09:42
ご指摘ありがとうございます。
「m-sora」「m-tomato」スキンのリスト関係を修正しておきました。
https://github.com/xserver-inc/cocoon/commit/6360f545cf8c741d9bfc64db16b3a728211ae812
Topic starter
2024年3月12日 10:56
m-tomatoは、m-soraとリスト表示が異なるようです。
同じと思ってそこまで確認していませんでした。
.font-awesome-5 .article ul:not(.has-list-style) li:before
●補足
まだ別のバグがあります。
リストのインデントを変えると、別スタイルが適用でき。
インデントした、リストに枠が付きます。
わいひら reacted
2024年3月12日 12:52
まだ別のバグがあります。
リストのインデントを変えると、別スタイルが適用でき。
インデントした、リストに枠が付きます。
すいません。インデントすると、リストに枠がつくというのはよくわかりませんでした。
よろしければ、ブロックエディターの該当箇所のソースコードを頂いてよろしいでしょうか。
Topic starter
2024年3月12日 13:07
順序付きリストと、スタイルを併用した時です。
<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>リスト<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>リスト</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->
<!-- wp:cocoon-blocks/iconlist-box {"title":"アイコンリスト","backgroundColor":"deep-orange"} -->
<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-background has-deep-orange-background-color"><div class="iconlist-title">アイコンリスト</div><!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>リスト<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>リスト</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list --></div>
<!-- /wp:cocoon-blocks/iconlist-box -->
Topic starter
2024年3月13日 00:20
以下は独自にリストに丸番号を振っており。
しかも、各々、ol、ulのデザインが異なり。
- m-sora
- m-tomato
最悪、inportantで、リストスタイルを適用できないようにするか？
現状の独自アイコンが崩れているので、それだけは対応し、スタイル設定はユーザーの運用任せかと。
Topic starter
2024年3月13日 14:13
アイコンリストへのスタイル併用は、ユーザー任せで、プログラム側で対応する事ではないように思え。
●m-sora
子孫リストに[C]スタイルを設定すると、図のようになり。
以下に修正。
ul:not(.has-list-style) li ↓ ul:not(.has-list-style) > li
親のulにデザインが付いており、olの子としてulを指定すると図示のようになり。
リストのインデントを考慮せず、デザインされているので、今更感があり。
上記の修正のみで終了かと。
Topic starter
2024年3月13日 15:16
Ver2.7.1以前からの不具合があります。
以下のスキンですが、article ul、articleとしている為、本文中の要素に影響し。
- m-sora
- m-tomato
以下の表示がおかしいです。
- 目次
- タイムライン（●がずれる）
https://wp-cocoon.com/community/postid/77765/
元のデザインを削除してしまうのが一番かと。
リストブロックスタイルでデザイン追加もでき、元のデザインは不要と思え。
わいひら reacted
2024年3月13日 20:45
タイムライン（●がずれる）
タイムラインもでしたか。
Cocoonデフォルトである程度スタイリングできるようになったので、削除が一番いいかもしれませんね。
削除しておきます。
2024年3月13日 22:57
リストブロックと関係がありそうな部分を全て削除しました。
https://github.com/xserver-inc/cocoon/commit/8734fb0869fb0baefd7aa34161f79f1c9de8d032
Topic starter
2024年3月14日 02:55
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.1.6
カテゴリー数：11
タグ数：11
ユーザー数：1
---------------------------------------------
article ul、article olが削除され、リスト、アイコンリストが正しく表示される事を確認しました。
- m-sora
- m-tomato
本件をクローズとします。
わいひら reacted
2024年3月14日 19:30
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。