Table of contents plus(TOC+)で目次の表示位置をずらす方法【ショートコードまとめ】
目次って、いつも上にでちゃうじゃん？
でも他のサイトみると、好きな位置に表示しているみたいだよねー
いいなぁー
と、いうわけで、初心者が目次位置を変更するために調べてみました。
とりあえず↓に目次おいときますね。
ふふん、表示できてるでしょ。
この記事では、このように目次の表示位置をカスタマイズする方法を説明していきたいと思います。
TOCの設定
どうでもいいですけど、Table of Contents Plusは TOC+ と表記するんですね。公式のヘルプでTOC+表記でした。
ここでは、まずTOCの設定でどこに目次が表示されるのかを説明しておきますWordPressの管理画面で、プラグインから「Table of Contents Plus」の「設定」を選択します
そして、基本設定の「位置」のプルダウンメニューから、好きなものを選びます。
- 「最初の見出しの前(デフォルト)」
- 「最初の見出しの後」
- 「上」
- 「下」
これは説明不要ですかね。
それぞれ説明通りのところに表示されます。
ちなみにここの設定を変更したら、過去に作成した記事にも適用されます。
ショートコードで目次を表示させる方法
さて、ここからが本題ですね。任意の場所に目次を表示させる方法を説明します。
それはズバリ、ショートコードを利用する方法です。
WordPressの記事「ショートコード」を選択
表示された入力エリアに
[toc]と入力します。
画面でいうと下のような感じですね。
これだけです。これでと書いたところに目次が表示されます。
簡単ですね。
そのほかショートコードまとめ
ちなみに他にもTOC+ではショートコードがいろいろとあるので、使いこなすと便利です。
TOC+のヘルプ自体は https://dublue.com/plugins/toc/#Scenarios_FAQs に記載されています。
この中にある、ショートコード部分を抜粋＆日本語訳
| ショートコード | 説明 |
|---|---|
| [toc] | 任意の位置に目次を表示 |
| [toc label="もくーじ"] | 任意の位置に目次を表示 + 目次のタイトルを「もくーじ」に変更 |
| [toc no_label=true] [toc no_label=false] | 任意の位置に目次を表示 + 目次のタイトルを表示 or 非表示 ※試してみるとどちらも非表示になっているような？ |
| [toc wrapping=left] [toc wrapping=right] | 目次を左右どちらに配置するか |
[toc heading_levels="3,4,5"] | 目次に含める見出しレベルを設定する この場合H3,H4,H5が対象となる |
| [toc exclude="てすと"] | 除外する見出し文字を設定する この場合「てすと」を除外する 「*」はワイルドカード 正規表現も使用可能 |
| [toc class="くらす"] | CSSで使用するクラス名を指定可能 スペースで区切れば複数指定可能 |
とりあえずここまで。