サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年6月9日 01:10
関連記事下にあるCocoon機能のコメント欄に番号なしリストなどが反映しないので、CSSを追記せず使えるようになれば。と思います。
親テーマCSSの指定は以下の通りです。
.article dl {
margin: 1em 0;
}
.article dd {
margin-left: 40px;
}
.article ul,
.article ol {
margin: 1em 0;
padding-left: 40px;
}
.article ul li,
.article ol li {
margin: 0.2em;
}
.article ul ul, .article ul ol,
.article ol ul,
.article ol ol {
margin: 0;
}
コメント欄のコンテンツ部分のタグは以下の通りで。
<div class="comment-content">
ulリストなどのリストは▼画像のように、一切反映しない感じになります。
例えば404ページのようにclass属性にarticleも付けてもらったら、CSSを再指定しなくて済むので、リストを装飾してる人は（amp.cssの容量的にも）便利だと思いまして。
.article ul li, .comment-area ul li {}
.article ul > li:before, .comment-area ul > li:before {}
現状、上記のようにスタイルを追加すれば▼画像のように反映する感じです。
※個人的な話ですが、hタグとリスト系は.entry-contentで指定していたスタイルを、全て.articleに変更したので文字列的にamp.cssの容量削減できました。
需要は猛烈に少ないでしょうし、ちょっと強引かもですが『なぜ反映しない？』と思う人もいるかもしれません？
以下のようにクラスarticleを追加すれば、おそらくリストを使ってスッキリさせたい時、便利かと思われます。
<div class="comment-content article">
Cocoon機能のpreなどの装飾も通常ページコメント欄で使えたらとも思いますが、AMPで対応してないので諦め、リストだけでも。。
もしPHPにも容量問題があったらスミマセン…、ご検討お願いします。#
Topic starter
2018年6月9日 01:20
Cocoon機能のpreなどの装飾も通常ページコメント欄で使えたらとも思いますが、
上記引用は思いつきで書きましたが、機能がありましたね！って事で解決しました＾＾
『Cocoon設定』、『コード』より『ハイライト表示するCSSセレクタ』に以下を追記で対応できました！
.entry-content pre, .comment-content pre
lightning2014 reacted
2018年6月9日 19:38
以下のようにクラスarticleを追加すれば
んー、コメントにそこまで飾り気が必要かということと、追加することによる不具合関係考察的なことも含めて、ちょっと考えさせてください。
実際に、comment-contentをカスタマイズして見た限りでは、特に問題は無かったですか？
Topic starter
2018年6月9日 21:19
飾り気が必要か
こちらは飾りだけでなく（個人的にですが）見やすくなるのでリストをよく使ってます。
メリットは説明長くなりがちな文を、スッキリ見やすくできる効果があると思ってるからです。
果物の種類はいちご、りんご、ぶどうなどがあります。いちごの種類はあまおう・あすかルビー・とちおとめ。りんごには、ふじ・つがる・王林。ぶどうは、巨峰・ピオーネ・デラウエアなどあります。
上記をスッキリさせるために、リストを使う。みたいな感じです。
果物の種類には、下記のようなモノがあります。
- いちご
- あまおう
- あすかルビー
- とちおとめ
- りんご
- ふじ
- つがる
- 王林
- ぶどう
- 巨峰
- ピオーネ
- デラウエア
ページ内の文面で説明したもののコピペですが。
https://bibabosi-rizumu.com/list-nesting/#toc8
コメントcomment-contentエリアはentry-content領域と同じで、記事として出力した部分と同じで自分が書いた文を出力した部分で。
不具合関係考察的
これですが、以下の通り指定方法を変更したてで。
※個人的な話ですが、hタグとリスト系は.entry-contentで指定していたスタイルを、全て.articleに変更した
調べた感じだと公開されるページでは、自分が書く記事内容にクラスarticleが使われてるようです。
- 記事（h1タグ～記事下SNSシェアボタン・author-nameまでの領域）
- 404ページ：編集できる領域
- category-content.php
https://gyazo.com/22f4601ba01ce426c1c48257fa6bd1b4
画像の箇所；カテゴリh1下；説明部分領域
その他
- admin.php (lib/admin.php) //ビジュアルエディターのクラス名に任意のclassを追加する
//var_dump($mceInit );
$mceInit['body_class'] .= ' main article';
- live-writer.php (tmp/live-writer.php)
<div class="article live-writer">
抜けてなければ問題ないかと思われます？？？
2018年6月10日 22:01
そういう意味ではなくて、僕はこれまで長い間サイトを運営していますが、リストを用いてコメントに書き込まれた事はなかったもので（おそらく利用するとしたら、ほぼ運営者が書くものになるということで書かれているとは思いますが）。
もちろん、文章をリッチに表現できるのは理解しているつもりで、いろいろ含めて考えさせて欲しいと思います。使用するとしたら、利用条件とか意味合いも合わせる箇所で利用したいので。
Topic starter
2018年6月11日 09:09
ほぼ運営者が書くものになるということで書かれているとは思います
個人的にそれが大きな部分なのと、訪問者さん用にタグの用意はしてません＾＾；
※WordPress編集画面で頑張って書いてHTMLをコピペしてくれるかたは、あまりいない状況です。
Simplicityは完成系テーマという認識だったので、自分でCSSを追記したように思います。お手数ですが、よろしくお願いします！
2018年6月12日 21:57
comment-contentにではないですが、スタイルが適用されるようにしたものをアップしておきました。
Topic starter
2018年6月12日 22:53
こんにちは
コチラでstyleを追記せずに反映されたのを、AMP・通常ページで確認できました！
対応ありがとうございます＾＾
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。