WordPressテーマSANGOの質問

目次の行間を調整したいです。

アバター
MINOCAME

 お世話になります。
 ずっと利用していたEasy Table of Contentsの使用をやめて、SANGO Gutenbergの目次を使い始めました。
 ウィジェットの「追尾サイドバー(PCのみ)」に設定した目次のデザインはデフォルトのままでもバランスがとれていてよい感じなのでカスタムCSSは特に何も設定しないまま使用開始しました。
 次いで「記事内目次エリア」のウィジェットに目次を設定。表示スタイルとして「記事内目次」を選択。タイトルの「目次」は、Font Awesomeのリストのアイコンの真横にくる筈が少し上の方に表示されて違和感を覚えるので表示しないようにタイトル入力欄は空欄にしました。この状態からしてすでに何か問題があるように感じたのですが、投稿ページに実際に表示される目次のリストを見ると、リストの行間がかなり詰まっていて、特にスマホ画面では、リンクの行間が狭すぎて各リストをクリックする際に間違って別のリンクに触れてしまいがちだったので、もう少し行間を広げようと思い、ウィジェットの編集画面内にあるカスタムCSSの欄に、#toc_container .toc_list li { line-height: 30px; }と記述しました。30pxを任意の別の数字に変更すると、ウィジェットの編集画面に表示されるリストでは数字の変更に応じて行間が変わります。しかし、ウィジェットの更新ボタンを押して、投稿記事が表示されているGoogle Chromeの画面でShiftキー+F5キーでキャッシュを除去しても、目次のリストの行間は何も変わらず変更が反映されません。
質問
カスタムCSSまたは他の方法で目次リストの行間を変える方法がありましたら教えて下さい。

【SANGO 目次ブロック】を使って目次を設定しよう
コメントへの回答
サルワカくん
サルワカくん
2022/03/16

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

調査したところ、子テーマに書かれている以下のCSSが影響しているようでした?
以下のCSSは必要でしょうか?
もし不必要であれば削除してみてください。


body {
line-height: 1em;
}

よろしくお願いします。

アバター
MINOCAME
2022/03/16

 的確なご助言、誠に有難うございます。ご指摘の子テーマの
body {
line-height: 1em;
}
 を削除しましたところ、サイドバー(追尾)の目次も記事内の目次も行間が開きクリックしやすい状態になりました。記事内の目次のタイトルの位置も適正な位置に表示されるようになりました。ただ、カスタムCSSの欄に記入しました#toc_container .toc_list li { line-height: 30px; }につきましては、記事内目次用エリアの編集画面の表示には反映されますが実際の記事内の目次の行間には反映されず変化がないという状態が続いています。とりあえず、目次の見た目の違和感はないので、Easy Table Contentsを再び使用することなく、SANGO Gutenbergの目次機能を使い続けてみます。

サルワカくん
サルワカくん
2022/03/18

お世話になっております。
調査したところ、目次のブロックではなく他のブロックで書かれているCSSで文法エラーとなっており、その影響で目次ブロックに記述されたCSSが反映されていないようです。
どのブロックのCSSがエラーを起こしているかまでは特定できず恐縮なのですが一度お確かめいただけないでしょうか?
&nbspという文字が入り込んでしまっているようです。
よろしくお願いします。

アバター
MINOCAME
2022/03/19

 さらなるサポート有難うございます。今、作成中の最新記事において、SANGO Gutenbergの外部リンクの装飾を行間と文字間に合わせてカスタムCSSで修飾する記述を加えたのですがこちらは問題なく反映されています。ご指摘頂いた点に関して子テーマのcssファイルの中の記述におかしな点がないかどうか精査してみます。