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

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

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

番号付きリストと目次デザインを分ける方...
 
共有:
通知
すべてクリア

番号付きリストと目次デザインを分ける方法

7 投稿
3 ユーザー
2 Likes
3,770 表示
(@tdgw)
Active Member Registered
結合: 5年前
投稿: 13
Topic starter  

お世話になっております。

1点ご相談させてください。

現在、Cocoonの機能、目次設定で番号を付与する設定としています。

番号付きリストのデザインをCSSで変更したところ、目次デザインも変わってしまいました。

番号付きリストと目次のデザインを分けることはできるのでしょうか?


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

どのようなカスタマイズをしたのか見るためにも、実際のページURLとカスタマイズしたCSSコードを貼り付けていただいてよろしいでしょうか。


   
返信引用
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

こんにちは。

この件、なかなか難しかったと思います。

ul要素、ol要素に独自のclassを付けて、その独自classでカスタマイズするのが一番手っ取り早い方法かと思います。

(目次のtocクラスでカスタマイズを打ち消すのが大変なので)

あとjavascriptで目次以外のul要素、ol要素に独自のclassを付ける方法もありますが、そこまでする必要はないかなと個人的には思います。

わいひらさんがおっしゃるとおり、実際のURLとCSSコードがあれば、他の方々にも考えていただけるかと思います。


   
わいひら reacted
返信引用
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

あ、すみません。

否定疑似クラス『:not()』で、tocクラスを外すといけるかもしれないですね。

https://www.nedia.ne.jp/blog/tech/2017/06/06/8650

僕は使ったことがないのですが・・・。


   
わいひら reacted
返信引用
(@tdgw)
Active Member Registered
結合: 5年前
投稿: 13
Topic starter  

お二人ともご返信ありがとうございます。

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;
}


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16456
 

「.post ol」となっている部分を「.entry-content > ol」とするとどうでしょうか?


   
返信引用
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

「.entry-content > ol」でいけますね。

あんまり使ってなかったので盲点でした。

否定疑似クラス『:not()』だと、かなり面倒です・・・。


   
返信引用
共有:

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

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

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

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

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

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

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

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