現在「SILK」スキンを適用中です。

記事内のol要素を、目次を除いて反映させたい | カスタマイズ相談 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
記事内のol要素を、目次を除いて反映さ...
 
共有:
通知
すべてクリア

[解決済] 記事内のol要素を、目次を除いて反映させたい  


すぴすぴ
 すぴすぴ
(@すぴすぴ)
ゲスト
結合: 4週間前
投稿: 6
Topic starter  

お世話になっております。
すぴすぴと申します。

早速で恐縮ですが、表記について教えて頂けないでしょうか。

 

ol要素のカスタマイズをしたいと思い、試している最中なのですが
下記のように記述したところ、目次にも反映されてしまいます。


.article ol {
counter-reset: li; /*olのリストの数字をリセット*/
} .article ol > li {
list-style: none; /*元のスタイルを非表示にする*/
} .article ol > li:before {
color: #0000cd;
counter-increment: li; /*リストの数字を1つ進める。IE7以下、未対応*/
content: counter(li); /*リストを連番にする*/
margin-right: 1em; /*要素が重なるから右へ移動*/
line-height: 1.6; /*文字が重なるのを防止*/
}

 

サンプルページ
https://spear-spear.com/ilbttero_polishing/

 

ol要素のカスタマイズを、目次を除いて反映させることは可能でしょうか。
可能であれば、その方法もご教授頂けると幸いです。

年末でお忙しい所恐縮ですが、何卒よろしくお願いいたします。


引用未解決
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

前略、すぴすぴ さん

 

原始的な方法ですが、目次を除外するのではなく、目次だけ、既に書いたコードから除外すべく、

#toc .article ol {

のように、セレクタの先頭に「#toc 」を付けて、書いたコードが適用されてしまうと困る部分に目次用のプロパティと値を書けばよいような気がします。

 

つまり、目次以外を標準と考えて、目次を矯正すればいいという話です。


わいひら 件のいいね!
返信引用
はる
(@haruinoue)
Reputable Member
結合: 5か月前
投稿: 318
 

擬似クラス:notを使えば#toc(やol.toc-list)だけ除いて適用できそうだと思いましたが、入れ子になる部分が上手くできなかったのでどなたかに託します。。

参考:[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点


わいひらリフィトリー 件のいいね!
返信引用
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

すぴすぴ さん

実際に試していないので間違っているかもしれませんが、以下のコードを追加するとどうなるでしょう?

.article #toc ol > li:before {
content: normal;/*初期値に戻す*/
}

 

This post was modified 4週間前 3回 by リフィトリー

返信引用
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

すぴすぴ さん

最初に

 

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

 

で書いたセレクタの順番を間違えていました。

.article #toc ol > li:before {

.article が先で、#toc はその次でした。 😥 

 

 

This post was modified 4週間前 by リフィトリー

わいひら 件のいいね!
返信引用
すぴすぴ
 すぴすぴ
(@すぴすぴ)
ゲスト
結合: 4週間前
投稿: 6
Topic starter  

>リフィトリーさん

教えて頂いたセレクタを記載したところ、うまく行きました。
教えて頂き、ありがとうございます!

 

>はるさん

:notという手法もあるのですね・・・
こちらも調べてみたいと思います。
情報ありがとうございます!

 

お二人のおかげで無事解決できました。
ありがとうございました!


わいひら, はるリフィトリー 件のいいね!
返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年5ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年3ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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