vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

Table of Contents Plusで任意のページだけもくじ番号を非表示にする方法

      2017/01/31

LINEで送る
Pocket

wp-toc-no-number0
WordPressのプラグイン「Table of Contents Plus」を使うことで、簡単にもくじを作成することができます。

もくじを自動で作成。WordPressプラグイン「Table of Contents Plus」導入&初期設定
こんにちは、okutani(@okutani_t)です。当ブログvdeepはWordPressを使って運営...
2015-04-26 13:48
はてブ

任意のページだけもくじ番号を非表示にしようとググってみたら、全く出てこなかったので自力でやってみました。

ご参考にどうぞ。

スポンサーリンク

任意のページだけ番号を非表示にする方法

まずはもくじ番号を表示状態にします。

もくじ番号を表示状態にしておく

Table of Contents Plusの設定画面で「Number list items」にチェック。

wp-toc-no-number

これで下記のコードを記事に書けば番号付きのもくじが表示されます([]を小文字に変換してください)。

[toc]

確認。

wp-toc-no-number2

番号付きのもくじが表示されました。

CSSでもくじ番号を非表示にする

Chromeのデベロッパーツールで確認したところ、番号には「class=”toc_number”」が設定されていました。これに対して「display: none;」を設定すれば良さげです。

もくじ番号を非表示したい記事にある[toc]を、次の通りdivで囲ってあげましょう。

<div class="no-toc-number">
  [toc]
</div>

style.cssに下記を記述します。

/* もくじ番号を非表示に */
.no-toc-number .toc_number{
  display: none;
}

では確認。

wp-toc-no-number3

無事に任意のページのみ、もくじ番号を非表示にできました。

まとめ

任意の記事にあるもくじ番号は、CSSで「display: none;」を設定することで非表示にできました。

これで、見出しに番号が挿入されている記事に合わせて、目次を作成することができますね。

LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
かなり簡単に設定できるのでサクッとどうぞ。ちなみにdivタグはAddQuickTagプラグインを使えば楽に挿入できます。

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。