「メイド・イン・ヘブン」スキン適用中

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

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

スキン「m-sora」のリストブロック...
 
共有:
通知
すべてクリア

[解決済] スキン「m-sora」のリストブロックスタイルの表示がおかしい

13 投稿
2 ユーザー
5 Likes
379 表示
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.1.5
カテゴリー数:11
タグ数:11
ユーザー数:1
----------------------------------------------
●現象

以下のスキンの時、リストブロックのスタイルが図示のようになる。

  • m-sora
  • m-tomato

   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

●原因

スキン独自のチェックアイコンをul li:beforeに設定している。
この為、番号の場合、counter-increment: listが反映されなず、常に「1」となる。


●対策

リストスタイルを設定していない時、スキン独自のCSSを反映させる。

.article ul:not(.has-list-style) li {

https://github.com/xserver-inc/cocoon/blob/3d89f264df553aaaf6862f46ad0e8169edfd6889/skins/m-sora/style.css#L217

.article ul:not(.has-list-style) li:before

https://github.com/xserver-inc/cocoon/blob/3d89f264df553aaaf6862f46ad0e8169edfd6889/skins/m-sora/style.css#L223

以下を追加する。

.iconlist-box {
padding: 0;
}

.iconlist-box li::before {
margin-right: 0;
margin-left: 0;
}

●補足

スキンのデザイン仕様で、ボーダー設定は効きません。


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

ご指摘ありがとうございます。
「m-sora」「m-tomato」スキンのリスト関係を修正しておきました。
https://github.com/xserver-inc/cocoon/commit/6360f545cf8c741d9bfc64db16b3a728211ae812


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

m-tomatoは、m-soraとリスト表示が異なるようです。
同じと思ってそこまで確認していませんでした。

https://github.com/xserver-inc/cocoon/blob/7a1313766cef3517a1662efb351b9c792628f1f5/skins/m-tomato/style.css#L436

.font-awesome-5 .article ul:not(.has-list-style) li:before

●補足

まだ別のバグがあります。
リストのインデントを変えると、別スタイルが適用でき。
インデントした、リストに枠が付きます。

 


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

投稿者:: @chu-ya

まだ別のバグがあります。
リストのインデントを変えると、別スタイルが適用でき。
インデントした、リストに枠が付きます。

すいません。インデントすると、リストに枠がつくというのはよくわかりませんでした。
よろしければ、ブロックエディターの該当箇所のソースコードを頂いてよろしいでしょうか。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

順序付きリストと、スタイルを併用した時です。

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

   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

以下は独自にリストに丸番号を振っており。
しかも、各々、ol、ulのデザインが異なり。

  • m-sora
  • m-tomato

最悪、inportantで、リストスタイルを適用できないようにするか?
現状の独自アイコンが崩れているので、それだけは対応し、スタイル設定はユーザーの運用任せかと。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

アイコンリストへのスタイル併用は、ユーザー任せで、プログラム側で対応する事ではないように思え。

●m-sora

子孫リストに[C]スタイルを設定すると、図のようになり。
以下に修正。

ul:not(.has-list-style) li
↓
ul:not(.has-list-style) > li

親のulにデザインが付いており、olの子としてulを指定すると図示のようになり。

リストのインデントを考慮せず、デザインされているので、今更感があり。
上記の修正のみで終了かと。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

Ver2.7.1以前からの不具合があります。
以下のスキンですが、article ul、articleとしている為、本文中の要素に影響し。

  • m-sora
  • m-tomato

以下の表示がおかしいです。

  • 目次
  • タイムライン(●がずれる)

https://wp-cocoon.com/community/postid/77765/

元のデザインを削除してしまうのが一番かと。
リストブロックスタイルでデザイン追加もでき、元のデザインは不要と思え。


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

投稿者:: @chu-ya

タイムライン(●がずれる)

タイムラインもでしたか。
Cocoonデフォルトである程度スタイリングできるようになったので、削除が一番いいかもしれませんね。
削除しておきます。


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

リストブロックと関係がありそうな部分を全て削除しました。
https://github.com/xserver-inc/cocoon/commit/8734fb0869fb0baefd7aa34161f79f1c9de8d032


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2317
Topic starter  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.1.6
カテゴリー数:11
タグ数:11
ユーザー数:1
---------------------------------------------

article ul、article olが削除され、リスト、アイコンリストが正しく表示される事を確認しました。

  • m-sora
  • m-tomato

本件をクローズとします。


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

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


   
共有:

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

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

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

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

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

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

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

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