Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

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

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

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

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

共有:

通知

すべてクリア

[解決済] 目次CSS削減のご提案

Cocoonテーマに関する質問

最新の投稿 : わいひら 6年前

8 投稿

3 ユーザー

13 Reactions

2,810 表示

RSS

草村

(@kusamura_mono)

Reputable Member Registered

結合: 6年前

投稿: 174

トピックスターター 2019年6月18日 16:18

いつもお世話になっております。

目次のナンバー表示「数字詳細(ex: 1.1.1)」のCSSについて。

https://github.com/yhira/cocoon/blob/master/style.css#L1952

 * h2-h6の見出し目次に連番を振る

以降の部分。
counter()ではなくcounters()を使う事で記述を削減出来るみたいです。
例えば以下の記述だけで同じように表現出来ました。

.toc.tnt-number-detail ol {
    counter-reset:toc;
}
.toc.tnt-number-detail li:before {
    counter-increment:toc;
    content:counters(toc, ".") ".";
}

▼こちらにcounters()についての記載があります
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters

カウンターはあまり使った事がないので間違いないか若干不安なんですが、
よければご確認とご検討お願いいたします。

ジャム君 and わいひら reacted

かうたっく

(@kautakku)

Illustrious Member Moderator

結合: 7年前

投稿: 4770

2019年6月18日 16:58

凄い！1000バイト近く削減できますね＾＾

私の環境でも試してみたら、驚くほど見た目も変わりませんでしたよ。（カスタマイズ済みサイト：親テーマCSSを変更した結果です。）

※バージョンは古いけど、書いている内容は変わらなかったので。

テスト環境（デフォルト）でも同様でした。すごい ?

わいひら and 草村 reacted

かうたっく

(@kautakku)

Illustrious Member Moderator

結合: 7年前

投稿: 4770

2019年6月18日 17:48

.toc.tnt-number-detail ol {
  list-style: none;
}
.toc.tnt-number-detail ol {
  counter-reset: toc;
}
.toc.tnt-number-detail li:before {
  counter-increment: toc;
  content: counters(toc, ".") ".";
}

ジャム君, わいひら and 草村 reacted

草村

(@kusamura_mono)

Reputable Member Registered

結合: 6年前

投稿: 174

トピックスターター 2019年6月18日 17:57

かうたっくさん

補足とご確認ありがとうございます！
カウンターの部分ばかり見ててlist-style:none;が抜けていました！
補足いただいて助かりました、と共にちょっと不安だったので安心しました。

まだ何か抜けがあったら申し訳ないのですが、
少しでも削減に繋がればな、と思います ?

わいひら reacted

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17375

2019年6月18日 19:55

ありがとうございます！
counters()は知りませんでした。
この詳細連番は、かなりCSSカロリナ高かったので、何とかしたい部分でした。
これでかなり削減できますね。
修正版をアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
こんなに削減できました。
https://github.com/yhira/cocoon/commit/da0b082e3e10ffb42d5bb68406a0b87dd35f0ced#diff-da232d78aa810382f2dcdceae308ff8e