拡散、共有していただき有難うございます。

Table of Contents Plusで見出しの文字色が変わってしまう時の対処法

※今回は「Hueman」の場合ですが、恐らくデフォルトで別文字色(黒以外)に設定されている他のテーマでも可能です※

Table of Contents Plusってとっても便利。

でも何故か自分の場合はTOC+を適用させると見出しの文字色が灰色に変わってしまうので、毎回CSSの折りたたみにて見出しを手動で作っていました。

TOC+のフォーラムでも質問の投稿(英語だけどgoogle翻訳で簡単に読めるよ)があったのですが、ずーっとスルーされていました。
これに関してはもう諦めようかと思っていたのですが、最近ふと気付く。

「灰色」「解答が付かない」.....これってもしかしたらプラグイン云々じゃなくてテンプレの「Hueman」がいけないんじゃね??
そういえばHuemanはデフォルトの文字色が灰色(#bbb)なんだよね。

しかし当時からいくらCSSをいじっても変わらなかった。

原因は書き変わる見出しにあり

こんな時にはとっても便利なツールがあります。それはブラウザであるchromeのデベロッパーツール(検証機能)です。

早速自身の問題ページを観てみましょう。

Table of Contents Plusで見出しの色が変わってしまう時の対処法①

Huemanを使っている方の場合は

.entry h1 span, .entry h2 span, .entry h3 span, .entry h4 span, .entry h5 span, .entry h6 span {
color: #bbb;
}

になっているかと思います。(初めてcodeタグ使ったけど異様に文字が小さい...)
各見出しに「.entry」が付いているのでCSSに反映されていなかった模様。これはHuemanの仕様みたいだけど、TOC+を適用していない通常の記事内では「.entry」を指定しなくてもオリジナルの見出しが反映されているんだよね。細かいことはよくわからん。

見出しの文字色をいじる

他のテーマの場合は「.entry」になっていないかもしれませんが、対処方法としては同じ。

画像にある該当箇所をコピペし、color: #bbb;の「#bbb」部分を変えたい色に置換えてCSSへ挿入するだけです。

Table of Contents Plusで見出しの色が変わってしまう時の対処法②

自分の場合は
.entry h1 span, .entry h2 span, .entry h3 span, .entry h4 span, .entry h5 span, .entry h6 span {
color: #000000;
}

と、面倒だったので全部黒色にしてしまいました(公開後に変えました)が、.entry h1 span/.entry h2 spanなど個別に色を設定したり、オリジナルの見出しに変えても良いでしょう。

Table of Contents Plusのサジェストでも見出しの文字色については全く出てこなかったので、もしかして1年以上悩んでいたのって自分だけ?!(笑)



口コミ投稿

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)