WordPressの目次を自動生成するプラグインがいくつかある中で最もメジャーなTable of Contents Plus。
「JIN」の公式サイトでもおすすめの紹介されているプラグインではあるのですが…
- ・最終更新：3年前
- ・使用中のWordPressバージョンで未検証
となっていて不具合が怖いため、私はEasy Table of Contentsというプラグインを使っています。
でも、Easy Table of Contentsで目次を設定すると↓こんな感じ↓で小見出しに丸が付いてしまうというデメリットがあるんですよね。
エラーが出るような重篤な不具合ではないのですが、見た目的に普通に気になりますよね(^_^;)
そこでこちらの記事では、このように↓小見出しに丸の付いてない状態にする方法を紹介いたします！
でも当記事で紹介する方法を使うと、消えてほしくない丸まで消えてしまうというデメリットもあります。
そちらの対処法も併せて紹介いたします。
JINでEasy Table of Contentsを使っても目次の小見出しに丸が付かないようにする方法！
JIN公式サイトの「WordPressテーマ「JIN」の設定マニュアル」からJINの子テーマをダウンロードし有効化してあることが前提となります。
コードをコピー
下記のコードを（次にペーストするために）コピー
|
.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%;
}
|
続いて、コピーしたコードをWordPressにペーストします。
WordPressにペースト
WordPressダッシュボードの…
「外観」をポイント →「カスタマイズ」をクリック
↓
「追加CSS」をクリック
↓
先ほどコピーしたコードをこんな感じ↓にペースト
この時、すでに何かコードが入っている場合は、一番上か一番下にペーストすればOKです。
↓
「公開」をクリック
プレビューなどで確認してみると、目次の小見出しの●が消えているはずです。
| 消えない場合はキャッシュが残っていることが考えられますので、キャッシュをクリアしてから、もう1度確認してみてください。 |
目次の小見出しに丸が付かないようにした場合のデメリット
丸を消すというCSSを追加したせいで、今度は必要な●まで消えてしまうんです。
必要な●というのは、書式設定プラグインのTiny MCE Advancedを使っている方なら…
こんな感じ↑で番号なしリスト（いわゆる箇条書き）にする時の丸いポッチのことです。
記事作成画面ではこのように…
きちんと箇条書きになっているのに…
プレビューや本番環境で見ると、このように…
丸が消えてしまうんです。
もちろん丸が消えていても、少し右側に入り込んでいるので箇条書きに全く見えなくもないのですが…
普通に寂しい感じ(笑)はしますよね。
目次の小見出しに丸が付かないようにした場合のデメリット解消法
すごーくアナログな作業で恐縮なんですが、私は
| ・を手入力してから箇条書きのタグを付ける |
という対応しています(≧∇≦)
ちょっと（かなり）面倒な方法なんですが、それでも3年以上更新されていないTable of Contents Plusを使うよりもずっとマシだと思ってこの方法を取っています。
さいごに
JINでEasy Table of Contentsを使って目次を表示させる際、小見出しに付く丸を消す手順は、JINの子テーマが有効化してある状態で
- コードをコピー
- WordPressの「追加CSS」にコードをペースト
- （変更が反映されない場合は）キャッシュクリア
でしたね。
この設定をすると、消えてほしくない箇条書きの●まで消えてしまうので一長一短ですが、プラグインはきちんと更新されているものを使った方が安心なので私はEasy Table of Contentsを使っています。
参考になれば幸いです。
WEBマーケター／コンサルタント
