vdeep

*

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

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;」を設定することで非表示にできました。

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

カテゴリーの順番を変更する「Category Order」プラグイン使い方

こんにちは、okutani(@okutani_t)です。今回は、かんたんにWor …

DISQUSでWordPressのコメント欄をパワーアップしよう!

こんにちは、okutani(@okutani_t)です。WordPressサイト …

[WordPress]『Better Delete Revision』で不要なリビジョンを削除しよう

こんにちは、okutani(@okutani_t)です。WordPressで記事 …

All in One SEO PackでSNSのシェア設定をおこなう

vdeep管理人okutani(@okutani_t)です。WordPressで …

「Broken Link Checker」を使ってサイトのリンク切れを防ごう!

こんにちは、okutani(@okutani_t)です。みなさんはサイトに貼り付 …

[WordPress] Amazonアソシエイトを綺麗に表示「AmazonJSプラグイン」導入方法

こんにちは、okutani(@okutani_t)です。Amazonアソシエイト …

[WordPress]外部リンクに自動でアイコンをつける「External Links」プラグイン

こんにちは、okutani(@okutani_t)です。サイトを運営していると、 …

All in One SEO PackのXML Sitemapで最低限行うべき設定項目

こんにちは、okutani(@okutani_t)です。WordPressでサイ …

「Preserve Editor Scroll Position」プラグインでエディタのスクロール位置を固定する

こんにちは、okutani(@okutani_t)です。WordPressでは書 …

「EWWW Image Optimizer」プラグインで画像の自動圧縮を行う

こんにちは、okutani(@okutani_t)です。WordPressで画像 …

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