WordPressのテーマの中でも有名なJINと、ブログ内の目次を自動生成してくれるEasy Table of Contentsの組み合わせで使う際に、目次の見出しに・(なかてん)が入ってしまう問題の解消法についての説明です。
（後日追記）Easy Table of Contentsの使用をやめて、現在ではテキストエディタに直入力して目次を作っています。プラグイン多すぎると管理も大変なため断捨離しました。
以下の記事を参考にしています。
美紀ペディア: 【JIN×Easy Table of Contents】目次の小見出しに点が付いちゃう?丸を消す方法はコピペするだけ超簡単！
JINとEasy Table of Contentsの組み合わせで目次に意図せず表示される点(テン)の問題
下記の通り、目次の見出しの部分に予期せぬ点が出現し、見出し番号と重複してしまい。大変不格好になってしまう問題があります。「ま、とりあえずこれでいっか」というテンションでは済まされない程度には気になると思います。
目次内の点を消すCSSコードの追加
そこでWordPress管理画面のカスタマイズの追加CSSより、冒頭でご紹介した美紀ペディアさんの記事に記載されているCSSコードをそのままコピペします。
/* 目次:目次番号潰れ修正 */
.cps-post-main ul:not([class]) li:before, .cps-post-main table ul:not([class]) li:before{
display: none;
content: ”;
position: absolute;
top: 0.6em;
left: 10px;
width: 0;
height: 0;
background-color: #2b2b2b;
border-radius: 100%;
}
追加CSSをそのまま貼り付けると、目次からあの点を非表示にすることができるようになりました。
表示させておきたい番号なしリスト上の点が消える問題
上記のCSSコードを追加すると、番号なしリストにおける各項目の文頭に表示されるはずの点がそれはそれはしれっと消失してしまうという新たな課題に直面します。
番号なしリストの点を取り戻す解決策（妥協案?）
ここからが本ブログのオリジナルとなる内容なのですが、さきほどの追加CSSで追加したコードの下に、下記のコードを更に追加します。
/*リスト(ul)表示の修正*/
ul.list{
text-indent: -1em;
padding-left: 2.3em;
}
ul.list li{
padding: 0.2em 0em 0.2em 0.5em;
margin-bottom: 5px;
}
ul.list li::before{
display:inline-block;
content:'';
width:0.4em;
height: 0.4em;
border-radius: 100%;
margin-right: 12px;
}
CSSを追加して、少し手間ですが番号なしリストの表示に対して以下の作業を行います。
<!-- 修正前: 冒頭が<ul>のまま -->
<ul class="list">
<li>りんご</li>
<li>ばなな</li>
<li>パイナップル</li>
</ul>
<!-- 以下の通りに修正してください: 冒頭の<ul>に「class="list"」を追加 -->
<ul class="list">
<li>りんご</li>
<li>ばなな</li>
<li>パイナップル</li>
</ul>
すると、番号なしリストの各アイテムの先頭に点が再び表示されるようになります。
この方法のメリット
このやり方だと、番号なしリストを作成するたびに、Textエディタを開いて<ul>に”class=”list”を追加する必要があり若干だけ手間ではあります。ですが、例えば番号なしリストの各アイテムに手打ちで「・」を追加するという作業をして、仮にもある項目の文章が長くなってしまった場合に、字下げが適切に行われず見栄えが悪くなるなどの弊害が起こりえます。
しかし、今回の方法を用いると、統一したルールで番号なしリストが表示されるため見た目がきれいになるというメリットがあります。且つ、JINのデフォルト設定である番号ありリストの行間や字下げのルールに揃えているのでページ全体として統一化を出すことができるようになります。
