この記事をご覧いただいている方は記事ごとに目次があるもの、ないものを分けたいと考えているのでは？この記事はそんな方に向けた内容です。
“Table of Contents Plus”のプラグインの使い方については”Table of Contents 使い方”など調べてください。プラグインを入れても全ての記事に目次を入れないように設定するできます。また、この記事ではプラグイン”Classic Editor”と”Tiny MCE Advanced”が入っている前提での説明です。
1 Table of Contentsの設定(1分で終了)
まずはプラグインに”Table of Contents Plus”をインストールします。この”プラグインは自動で目次を生成するプラグインです。”ということはすでに調べて知っていると思います。では、設定とは何をするのか？要するに”自動で目次を生成させない設定”です。Table of Contentsのデザインだけを利用するということです。
設定するのはたった1つだけ！見出しレベルを全て空欄にします。それでは詳細を説明します。
1.プラグイン_インストール済みプラグインを選択。
2.”Table of Contents Plus”の”設定”を選択。
3.”基本設定”で下にスクロールすると”上級者向け”の”hide”を選択すると下のような画面に変わります。□からチェックを外します。重要なのは”見出しレベル”がすべで空欄になっていることです。要するにどの文字サイズも表示させないということ！
以上で、”Table of Contents Plus”の設定は完了です。これで自動で目次を生成させないプラグインにしました。
2 実際にどうやって目次を入れるのか？
記事ごとにHTMLで入れていきます。下の文字をコピペをしてテキスト画面で入力します。プラグイン”Classic Editor”をインストールしている方は赤枠で”テキスト”を選択してください。
1.下の文字をコピーしてください。
<div id=”toc_container” class=”no_bullets”>
<p class=”toc_title” style=”text-align: center;”>目次</p>
<ul class=”toc_list”>
<li><a href=”#aaa”>1 タイトル1</a></li>
<li><a href=”#bbb”>2 タイトル2</a></li>
<li><a href=”#ccc”>3 タイトル3</a></li>
</ul>
</div>
<h2><a id=”aaa”></a>1 タイトル1</h2>
<h2><a id=”bbb”></a>2 タイトル2</h2>
<h2><a id=”ccc”></a>3 タイトル3</h2>
2.テキストエディターに貼り付けます。テキストエディタからビジュアルエディタに切り替えてください。
プレビューでどうなっていますか？もうリンクしているのです！あとはビジュアルエディタでもテキストエディタでもお好みで”タイトル”の言葉を修正してください。
この作業は記事を書く時、最初に行ってください。”目次の作成→記事を書く”の順番がおすすめです。また、「<style type=」〜</style>の間を編集することで色などを変更できるので興味があれば”(分からない単語) html”と検索して調べてみてください。
3 H2タイトルとリンクさせる
2 実際にどうやって目次を入れるのか？で”H2タイトルの数が足りないんだけど？”という方に向けて。<li>〜</li>をコピーして下に追加すると目次の項目を増やすことができます。ただ、そのままコピーしてプレビューで増やした項目をクリックすると、飛ばしたい所にリンクしていないはずです。
リンクさせる方法
“#◯◯◯”→”◯◯◯”にリンクします。”ページ内リンク”と呼ばれるものです。この作業はビジュアルエディタで作業します。
使うボタンは赤枠の3つです。左から”リンクの挿入/編集”、”リンクの削除”、”アンカー”という名称ですが、シンプルに見た目から”クリップ”、”虫みたいなやつ”、”リボン”と呼ぶことにします。それぞれの機能を説明します。
虫みたいなやつ←クリップを壊す
リボン←先
イメージで説明すると、「#クリップがリボンに行きます。途中で虫がきたら行けません。」ということです。では実践してみましょう。
1. リンク元の文字を囲み”クリップ”を選択。
2. URLに今回は”#abc”と入力しています。この部分は自分が分かりやすいように入力してください。すると、選択した文字が青字でアンダーラインが付いた状態に変わります。
3. リンク先の文字を囲み”リボン”を選択。
4. IDに今回は”abc”と入力しています。すると、⚓︎のマークが付いた状態に変わります。アンカーが付きます。だから、アンカーという名称なのです!
この機能を応用すると、記事1つを2、3ページに分けた時に別のページに移動させることが可能です。方法はクリップ(リンクの挿入/編集)のURLに作成している記事のURLを入れます。今回のように”URL/●●/#◯◯◯”と入力します。プレビュー画面でURLをコピーすると、/●●/とページ番号が入った状態になるので、そのあとに”#◯◯◯”と付け足します。目次以外にも使える機能なので是非、使ってみてください。
