サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年1月13日 18:20
お世話になっております。
1点ご相談させてください。
現在、Cocoonの機能、目次設定で番号を付与する設定としています。
番号付きリストのデザインをCSSで変更したところ、目次デザインも変わってしまいました。
番号付きリストと目次のデザインを分けることはできるのでしょうか?
2019年1月13日 21:40
どのようなカスタマイズをしたのか見るためにも、実際のページURLとカスタマイズしたCSSコードを貼り付けていただいてよろしいでしょうか。
2019年1月14日 13:52
こんにちは。
この件、なかなか難しかったと思います。
ul要素、ol要素に独自のclassを付けて、その独自classでカスタマイズするのが一番手っ取り早い方法かと思います。
(目次のtocクラスでカスタマイズを打ち消すのが大変なので)
あとjavascriptで目次以外のul要素、ol要素に独自のclassを付ける方法もありますが、そこまでする必要はないかなと個人的には思います。
わいひらさんがおっしゃるとおり、実際のURLとCSSコードがあれば、他の方々にも考えていただけるかと思います。
わいひら reacted
2019年1月14日 14:13
あ、すみません。
否定疑似クラス『:not()』で、tocクラスを外すといけるかもしれないですね。
https://www.nedia.ne.jp/blog/tech/2017/06/06/8650
僕は使ったことがないのですが・・・。
わいひら reacted
Topic starter
2019年1月14日 14:30
お二人ともご返信ありがとうございます。
URLも載せずにご相談してしまい、申し訳ありません。
以下サイトのURLになります。
※目次デザインが競合してしまうため、現在目次には番号を付与しておりません。
https://news.tomioblog.com/tv/post-277
CSSは以下になります。
/************************************
**番号付きリストデザイン
************************************/
.post ol{
border: 1px solid #74c2f8;
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0.5em;
font-size: 0.9em;
}
.post ol li{
position: relative;
line-height: 1.5em;
padding: 0.5em 0.5em 0.5em 40px;
}
.post ol li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
background: #74c2f8;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align:center;
/*以下上下中央寄せのため*/
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/************************************
** 目次デザイン
************************************/
.toc {
border: 1px solid #5c9ee7; /*全体の枠線の色*/
line-height: 1.5;
padding: 0;
margin-bottom: 0.3em;
display: block; /*横幅いっぱいに広げる*/
}
.toc-title {
background: #5c9ee7; /*目次タイトルの背景色*/
color: #fff; /*目次タイトルの文字色*/
font-size: 1.1em;
text-align: center;
padding: 2px 10px;
}
.toc-title::before {
font-family: FontAwesome;
content: '\f0ca'; /*目次タイトルのアイコン*/
margin-right: 0.5em;
}
.toc-content {
font-size: 0.9em;
padding: 1px;
}
.toc ul li a, .toc ol li a {
display: block;
border-bottom: 0.3px dashed #72c7e6; /*h3以下の下側ボーダー*/
margin-left: -20px;
padding-left: 20px;
text-decoration: none;
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
margin-top: 0.25em;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
border-bottom: 0.3px dashed #72c7e6; /*h2以下の下側ボーダー*/
text-decoration: none;
}
2019年1月14日 20:53
「.post ol」となっている部分を「.entry-content > ol」とするとどうでしょうか?
2019年1月14日 21:15
「.entry-content > ol」でいけますね。
あんまり使ってなかったので盲点でした。
否定疑似クラス『:not()』だと、かなり面倒です・・・。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。