記事に自動で目次を作成してくれるプラグイン、Table of Contents Plus導入なう

目次とは

wikipediaを始めとした、多くのウェブサイトで採用されている「目次」。

2014-08-16_09h48_59

長い記事を読む際に、「目次」があると、構造がはっきりと示され読みやすくなります。

書く側にとっても、目次の構造化は記事の内容を立体的に示すことが出来るメリットがあります。

目次の自動化に

しかし、目次を毎回手動で作るのは面倒です。

そこで、数多くのサイトで紹介されているプラグイン「Table of Contents Plus」を使ってみることにしました。

このプラグインを使用することにより、自動で目次を作成してくれるという代物。

上手く使えれば超便利になるはずです。

この記事の目的

この記事の目的は、「Table of Contents Plus」というプラグインの導入を指南するものではありません。

このプラグインは多くのサイトで紹介されており、もう既に優れた導入記事がたくさん書かれています。

プラグインの導入に関しては、それらの記事をご参照いただくとして、私の記事では、まさにプラグインを導入する過程を示したいと思います。

今、この文書を打っている時点で、プラグインはまだ動作していません。

書きながら設定を進め、合わせてテストまでしてしまおうと考えております。

プラグインの導入~設定

以下、プラグインの導入~設定まで順を追って記載していきたいと思います。

導入

まず導入には、Table of Contents Plus ←この名前をコピーします。

そして、プラグイン⇒新規追加にて、先ほどの名前をペーストし検索します。

2014-08-16_09h31_46

検索が出来れば、インストールします。

2014-08-16_10h10_36

設定

以下、私の設定内容を記載いたします。

下記以外にも設定項目は多岐に渡ります。

必要最低限でよければ、私と同じ項目の設定でも良いのではないでしょうか。

目次の表示位置(Position)

目次の挿入位置が選べます。

私の場合は、タイトルのすぐ下に設置する様にしました。

2014-08-16_09h36_13

目次の表示条件(Show when)

目次の表示条件を設定できます。

見出しが幾つ以上のときに目次を作成するか選べます。

短い記事に目次は要らないので、ある程度の見出し数以上にしておいた方がよさそうですね。

とりあえず、当ブログでは「3」にしてみます。

これで、3つ以上の見出しがついたときに目次を作成します。

これについては、また運用しながら、変更をかけようと思います。

2014-08-16_09h36_38

 

目次の表示対象(Auto insert…)

目次の対象を何にするか選べます。

私の場合は記事にだけ表示したいので、「post」にチェックをしました。

2014-08-16_09h36_52

 

ちなみに、「page」にチェックをすると、固定ページも対象になります。

あとの下2つは、よく分かりません笑

とりあえず無視してもよいと思います。

目次の記載

目次の記載について決定できます。

2014-08-16_09h38_11

まず、「Show title on top…」では、目次のタイトルを入力できます。

私はシンプルに「目次」にしていますが、アレンジしても面白いかも知れません。

次の、「Show text」は目次を表示するときの文言を、「Hide text」は目次を非表示にするときの文言を決められます。

ここでは「表示する」「表示しない」としておりますが、「ひらく」「とじる」などにも出来ます。

最後の「Hide the table of…」は、目次を原則表示にするか、非表示にするかを選べます。

目次を配置すると、その分文章の始まりが後に移動するので、すぐに文章を読みたいときに邪魔になりかねません。

ここらへんはセンスだと思います。

目次のスタイル

見た目を選べます。

2014-08-16_10h37_33

デフォルトでは、wikipedia調のデザインです。

whiteも魅力的ですが、ご自身のブログスタイルに合わせてお選びいただく箇所です。

カスタムもできます。

構造の指定

最後に、どの見出しタグを目次として設定するか選択します。

2014-08-16_10h37_45

 

Advancedから先に進みます。

発展的な内容という意味ですが、次に決めることは個人的には基本だと思っています。

2014-08-16_09h42_42

当ブログでは、h2,h3,h4タグまでを見出し構造に含めることにしました。

設定完了

以上で基本設定は完了しました。

他に、site mapを自動生成してくれたりする機能もある様ですが、よく分からないので無視しています^^

最後にこの記事を投稿して、ちゃんと目次が生成されていれば成功です。

上手くいっていますように!

[amazonjs asin=”4797369469″ locale=”JP” tmpl=”Small” title=”基礎からのWordPress (BASIC LESSON For Web Engineers)”] 最後まで記事をお読みいただき、有難う御座います664789c6oez1lkq4

あなたに合格が訪れます様に