JIN

【JIN×Easy Table of Contents】目次の小見出しに点が付いちゃう?丸を消す方法はコピペするだけ超簡単!

WordPressの目次を自動生成するプラグインがいくつかある中で最もメジャーなTable of Contents Plus。
「JIN」の公式サイトでもおすすめの紹介されているプラグインではあるのですが…Table of Contents Plusが表示されない不具合はないが3年も更新されてない

  • 最終更新:3年前
  • 使用中のWordPressバージョンで未検証

となっていて不具合が怖いため、私はEasy Table of Contentsというプラグインを使っています。

目次プラグインは古くて不具合が怖いTable of Contents PlusよりEasy Table of Contentsがおすすめ!設定方法を解説! 記事の見出しごとに自動で目次(索引)を表示させるプラグインとしてメジャーなTable of Contents Plusですが、こんな...

でも、Easy Table of Contentsで目次を設定すると↓こんな感じ↓で小見出しに丸が付いてしまうというデメリットがあるんですよね。JINでEasy Table of Contentsプラグインを使う場合に小見出しに付く丸エラーが出るような重篤な不具合ではないのですが、見た目的に普通に気になりますよね(^_^;)

 

そこでこちらの記事では、このように↓小見出しに丸の付いてない状態にする方法を紹介いたします!
JINでEasy Table of Contentsプラグインを使っても小見出しに丸が付くこと無く正常な状態

でも当記事で紹介する方法を使うと、消えてほしくない丸まで消えてしまうというデメリットもあります。
そちらの対処法も併せて紹介いたします。

JINで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ダッシュボードの…JINでEasy Table of Contentsプラグインを使っても小見出しに丸がつかないようにする方法「外観」をポイント →「カスタマイズ」をクリック

JINでEasy Table of Contentsプラグインを使っても小見出しに丸がつかないようにする方法「追加CSS」をクリック

先ほどコピーしたコードをこんな感じ↓にペーストJINでEasy Table of Contentsプラグインを使っても小見出しに丸がつかないようにする方法この時、すでに何かコードが入っている場合は、一番上か一番下にペーストすればOKです。

「公開」をクリック

 

プレビューなどで確認してみると、目次の小見出しの●が消えているはずです。

消えない場合はキャッシュが残っていることが考えられますので、キャッシュをクリアしてから、もう1度確認してみてください。

目次の小見出しに丸が付かないようにした場合のデメリット

丸を消すというCSSを追加したせいで、今度は必要な●まで消えてしまうんです。

必要な●というのは、書式設定プラグインのTiny MCE Advancedを使っている方なら…JINでEasy Table of Contentsプラグインを使うと箇条書きの丸まで消えてしまう時の対処法こんな感じ↑で番号なしリスト(いわゆる箇条書き)にする時の丸いポッチのことです。

 

記事作成画面ではこのように…

JINでEasy Table of Contentsプラグインを使うと箇条書きの丸まで消えてしまう時の対処法

きちんと箇条書きになっているのに…

 

プレビューや本番環境で見ると、このように…

JINでEasy Table of Contentsプラグインを使うと箇条書きの丸まで消えてしまう時の対処法

丸が消えてしまうんです。

もちろん丸が消えていても、少し右側に入り込んでいるので箇条書きに全く見えなくもないのですが…
普通に寂しい感じ(笑)はしますよね。

目次の小見出しに丸が付かないようにした場合のデメリット解消法

すごーくアナログな作業で恐縮なんですが、私は

を手入力してから箇条書きのタグを付ける

という対応しています(≧∇≦)

 

ちょっと(かなり)面倒な方法なんですが、それでも3年以上更新されていないTable of Contents Plusを使うよりもずっとマシだと思ってこの方法を取っています。

さいごに

JINでEasy Table of Contentsを使って目次を表示させる際、小見出しに付く丸を消す手順は、JINの子テーマが有効化してある状態で

  1. コードをコピー
  2. WordPressの「追加CSS」にコードをペースト
  3. (変更が反映されない場合は)キャッシュクリア

でしたね。

 

この設定をすると、消えてほしくない箇条書きの●まで消えてしまうので一長一短ですが、プラグインはきちんと更新されているものを使った方が安心なので私はEasy Table of Contentsを使っています。
参考になれば幸いです。


■読者限定コンテンツ「月収40万円のブログの始め方-HOW TO START A BLOG-」は第1通目でプレゼントしています。
■メルマガはメール内のリンクよりいつでも配信解除することができます。
■個人情報は厳重に管理し、プライバシーを遵守いたします。



COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です