NDS編集長の通称「私」がキニナルものやニュースを勝手にゴリ押し

NDS編集長のまとめニュース

【自動目次】Table of Contents Plusってプラグインの使い方と設定を公開!

   

【自動目次】Table of Contents Plusってプラグインの使い方と設定を公開!

記事に自動的に目次を生成してくれてる便利な神プラグイン「Table of Contents Plus」を紹介!もちろん新規投稿だけではなく、書きためている過去記事にもきちんと目次を表示してくれます。ページの滞在時間や回遊性が向上するメリットだらけのこの目次プラグインを是非導入してください。!

スポンサーリンク


  こんな記事もよく読まれています

%e3%83%9e%e3%82%a4%e3%82%af-%e9%8c%b2%e9%9f%b3-%e9%9b%91%e9%9f%b3
マイクでの録音時に発生する雑音の原因と軽減する為の対処法

マイクで録音する時には、とりたい音源以外に雑音が入り込んでし...

%e8%82%b2%e4%bc%91-%e6%9c%9f%e9%96%93-3%e5%b9%b4
育休期間を3年に延長することで生じる問題と取得の現実

女性の働きやすい環境づくりを打ち出す政策の中に、育休期間を3...

%e7%94%b7%e5%a5%b3%e5%85%bc%e7%94%a8-%e5%90%8d%e5%89%8d-%e5%a4%96%e5%9b%bd
男女兼用の名前は…外国でも通用する命名のコツ!

赤ちゃんが生まれて初めての贈り物が「名前」だと言われています...

%e8%87%aa%e9%96%89%e7%97%87-%e9%87%8d%e5%ba%a6-%e4%b9%b3%e5%85%90
自閉症の重度症状~乳児期に見られる特徴と子供への接し方

子供の健やかな成長は親の一番の願いです。 最近では発達障害...

%e7%94%b7%e6%80%a7-%e8%ba%ab%e9%95%b7-%e3%82%b3%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%82%af%e3%82%b9
男性は身長が低いことにコンプレックスを感じている?!

男性の平均身長は年齢によって異なりますが、約170cmと言わ...

%e9%ab%aa-%e6%b0%b4%e8%89%b2-%e3%82%ad%e3%83%a3%e3%83%a9
髪が水色のアニメキャラ検証!人気の4強徹底リサーチ!

髪が水色のアニメキャラには繊細・クール・神秘的など、ちょっと...

%e5%a4%a7%e5%ad%a6%e7%94%9f-%e5%bd%bc%e6%b0%8f-%e3%81%8a%e6%b3%8a%e3%82%8a
大学生の彼氏のお家にお泊りする時の事前準備と注意点

大学生の彼氏のお家へのお泊りは、大好きな彼氏とずっと一緒に入...

%e4%ba%a4%e9%80%9a%e4%ba%8b%e6%95%85-%e8%a8%ba%e6%96%ad%e6%9b%b8-%e6%97%a5%e6%95%b0
交通事故に合った!貰った診断書の治療日数が短いのはなぜ?

万が一交通事故に合ってしまったら、とにかくすぐ病院へ行きます...

%e4%ba%ba%e8%ba%ab%e4%ba%8b%e6%95%85-%e9%9b%bb%e8%bb%8a-%e8%b3%a0%e5%84%9f%e9%a1%8d
人身事故で電車が遅延!?膨大な賠償額の内訳と請求について

人身事故を起こし、電車が遅延する事態になると莫大な賠償額が発...

%e5%a4%a7%e5%ad%a6-%e5%8f%8b%e9%81%94-%e5%96%a7%e5%98%a9
大学の友達と喧嘩…後腐れなく仲直りする方法とポイント!

最近はおひとり様の大学生も増え、友達という感覚が薄れてきてい...

%e9%95%b7%e7%94%b7-%e6%ac%a1%e7%94%b7-%e6%80%a7%e6%a0%bc%e3%81%ae%e9%81%95%e3%81%84
長男と次男の性格の違い~同じ家庭環境でも差が出る原因

子供は同じように育てても性格の違いがあらわれます。 同性で...

%e6%bc%a2%e5%ad%97-%e4%b8%80%e6%96%87%e5%ad%97-%e8%b4%88%e3%82%8b
漢字一文字で気持ちを贈る〜漢字に込めたあなたの思いとは…

日本には様々な意味を持つ漢字があります。漢字一文字の中に込め...

%e6%96%b0%e7%94%9f%e5%85%90-%e3%83%a2%e3%83%ad%e3%83%bc%e5%8f%8d%e5%b0%84-%e5%a4%9a%e3%81%84
新生児期に見られるモロー反射が多い時の対処法と注意点

新生児期の赤ちゃんにはモロー反射という原子反射が見られます。...

28%e6%ad%b3-%e8%b2%af%e9%87%91-500%e4%b8%87
28歳の貯金額はどのくらい?500万円貯めるためには?

社会人になって会社にも慣れ、そろそろ肩書きが付いてくる場合も...

4%e3%83%b6%e6%9c%88-%e8%b5%a4%e3%81%a1%e3%82%83%e3%82%93-%e3%83%95%e3%82%9a%e3%83%ac%e3%82%bb%e3%82%99%e3%83%b3%e3%83%88
生後4ヶ月のママ&赤ちゃんにプレゼントするなら何が良い?

産後、ママが里帰り出産から帰ってきて、母子ともに身体と生活リ...

%e4%b8%ad%e5%ad%a6-%e6%81%8b%e6%84%9b-%e5%8b%98%e9%81%95%e3%81%84
思わせぶりや好き避けも!中学生に良くある恋愛の勘違い

中学生の頃って、特に女子は恋愛話に花を咲かせていた時期ですよ...

%e4%b8%ad%e5%ad%a6%e6%a0%a1-%e9%83%a8%e6%b4%bb-%e3%83%8f%e3%82%99%e3%82%b9%e3%82%b1
中学校の部活はバスケ部に入部したい子を持つ母の為の情報!

中学校に入ると部活に入部すれば人間関係や経験が広がります。 ...

%e9%98%b2%e6%b0%b4-%e3%82%ab%e3%83%a1%e3%83%a9-%e4%bd%bf%e3%81%84%e6%8d%a8%e3%81%a6
海のレジャーで写真を撮る!防水カメラを買うなら使い捨て?

秋冬でもハワイやグアム、沖縄でもマリンレジャーを楽しみたい!...

%e5%ad%90%e4%be%9b-%e5%8f%8b%e9%81%94-%e7%84%a1%e8%a6%96
子供が友達から無視されている時、親としてどうすればいい?

子供が友達から無視されていることが分かったら、親としてどうす...

33%e6%ad%b3%e3%80%80%e8%b2%af%e9%87%91%e3%80%80500%e4%b8%87
33歳で貯金が500万円は多い?少ない?貯めるコツは?

趣味のため、結婚資金、子どもの教育費、老後の生活にあてるため...

スポンサーリンク

Table of Contents Plusというプラグイン。これは神!

本当は、順番にこのワードプレスに入れているプラグインを紹介していこうと思ったのですが、まず、一昨日設定してみて、

「これは神!!」

と、深夜の暗い我が家の居間で叫んでしまうほど、便利な「Table of Contents Plus」から紹介していきます。

とにかくこの感動が冷めやらぬうちに何度も言います!

「Table of Contents Plus」ってプラグインは神!便利すぎます!是非、導入をされていない方は、必須プラグインの一つとして、検討してみてはいかがでしょうか?

んで、「Table of Contents Plus」は何ができるの?

もう、「Table of Contents Plus」って書くのは面倒なので、「目次プラグイン」って呼んでいきます。

この「Table of Contents Plus」こと目次プラグインは、こいつを自動で吐き出してくれます。俺のアディダス♪って歌詞の曲知ってますか?【竹原ピストル】___N_D_S__編集長のまとめニュース

 

これは昨日書いた竹原ピストルさんの「俺のアディダス」の記事の目次です。

もちろん完全自動で作ってくれます!

これすごい。

いや、本当にすごいです。

”見出し”に応じてきちんと目次を作ってくれる。

ただし、そんな目次プラグインの「Table of Contents Plus」も万能ではありません。
<見出し>に応じて目次が生成されるようなので、記事を書くときにはある程度ルールを守って書く必要がありますね。

ちなみに見出しってのは、テキストで書いている場合はhタグ。

<h2>ほんにゃらららら</h2>
とか
<h3>なんて日だ!!</h3>
とかこんなかんじのやつですね。

ビジュアルモードで書いている人は新規投稿を追加_‹_N_D_S__編集長のまとめニュース_—_WordPress

 

で、記事に見出しをつけていきます。

過去記事にも目次を自動生成

もちろん、過去の記事にも目次がきちんと作られます。

このワードプレスは、初めからこのプラグインをインストールしてたので、気になりませんでしたが、

過去記事が大量にある場合はなどはこの点が心配になりますよね。

でも、このTable of Contents Plusくんは本当にデキる子です!きちんと過去記事も新規投稿も同じように目次を生成してくれます。

きちんと段落も”入れ子”になって生成されます。

見出し1
見出し2
見出し3 ….

という具合に、段落分けしてくれます。

実際には入れ子にし過ぎると目次がゴチャゴチャになってしまうと思うので、2、3程度にしておいた方が良いと思います。

この目次プラグイン「Table of Contents Plus」は本当にデキる子で、この階層をどこまで出力するか?という問題も、きちんと設定することができますのでご安心を!

Table of Contents Plusのインストールから使い方まで

Table of Contents Plusプラグインをインストール

これのやり方がわからないと言われた場合、

普段なら、「Google先生に聞きなさい。」と

できるだけ無表情に無機質な態度で、即レスするのですが、今は少しでもこのブログのファンが欲しい!という下心がございますので、丁寧にお伝えする優しい記事をそのうち書きたいとおもいます。
それまでの間はGoogle先生に聞いてください。

>>プラグインのインストール方法(そのうち記事を書いたらリンクします。)

プラグインは新規追加から「Table of Contents Plus」で検索するとすぐに出てくると思いますので、迷わずダウンロード!そしてインストールをしてください!

インストールが完了したら有効化

インストールしたら、すぐに有効化してください。

Table of Contents Plusの使い方

このプラグインの凄いところは、有効化するだけで作業は90%完了です。

使い方はこれだけです!

もうすでに、あなたのワードプレスのページには目次ができているはずです!

と、

言いたいのですが、

実はここまでだと、まだ目次が出ていないはずです。

いくつかの設定が必要になりますので、それらの設定をやっていきましょう!

Table of Contents Plusの設定方法

設定画面はここから

プラグインのいちらんから設定画面を開く。

下の画像のような感じになってると思います。

 

 

 

プラグイン_‹_N_D_S__編集長のまとめニュース_—_WordPress

または、

新規投稿を追加_‹_N_D_S__編集長のまとめニュース_—_WordPress

サイドメニューからでも設定可能です。

有効化しただけは多分、目次は表示されません

英語のプラグインなので、誰か日本語化してくれないかなぁ。。。

まず、真っ先にやるべきなのはここです!

と言うより、これだけでもOKかもです。逆にこれをやらないと表示されません。

まず行う設定は、

TOC__‹_N_D_S__編集長のまとめニュース_—_WordPress

図の③のところの

【postにチェックをつける】

これを行ってください。

デフォルトでは、postにチェックがついておらず、pageのみにチェックが付いているはずです。

んで記事ページを見に行くと、きちんと目次が表示されていると思います。

あとは、適当に自分のブログに合わせて設定していってください。

各種推奨と思われる設定とそれぞれの意味

① Position ・・・ どこに見出しを表示させるか?という設定だと思います。試してみれば一目瞭然ですが、それぞれの設定内容は以下の通りです。

  • Before first heading(default) 最初に使われた見出しの前に目次を表示
  • After first heading 最初に使われた見出しの後ろに目次を表示
  • Top 一番上
  • Bottom 一番下

② Show When 文中に何個見出しがあったら目次を表示するか? 2か3くらいが試してみた結果よさ気な気がします

③ Auto insert for the following content types ここ重要!

前述した通り、投稿記事に表示する場合は、「post」にチェックをつけてください。「page」にチェックをつけると固定ページに目次を出します。

④ Heading text  目次に表示されている表題などを変更する

あと、これより下はデザインの変更などですね。

以下は詳しく書いてあるサイトからの引用です。

Heading text:
最初の「Show title on top of the table of contents」にチェックを入れると、目次のタイトルを表示することができます。
目次だと読者が認識しやすいようにチェックを入れることをおすすめします。
そして、チェックを入れた際は、下の空欄に「目次」など、任意の言葉を記入しましょう。
その下には「Allow the user to toggle the visibility of the table of contents」と書いてありますが、こちらにチェックを入れることで目次を開いたり閉じたりすることができます。
チェックを入れた際は、開いたり閉じたりするためにクリックする文字を空欄に記入します。基本的には「開く」「閉じる」などで大丈夫でしょう。
そして、その下に「Hide the table of contents initially」とありますが、こちらにチェックを入れると最初から目次が閉じた状態になってしまい、あまり役に立ちませんのでチェックを外しておくことをおすすめします。
Show hierarchy:
ここにでは、目次を階層的に表示するかどうかを選択できます。
目次を見やすくするためにも、チェックを入れておくことをおすすめします。
Number list items:
ここでは、目次のリストに番号を振るかどうかを選択できます。
こちらも見やすさを考えてチェックしておきましょう。
Enable smooth scroll effect:
ここでは、目次のリストをクリックした際になめらかなスクロールをするかどうかを選択できます。
どのようなものかを見たい場合は、この記事の上部に設置してある目次のリストをクリックしてみてください。
Appearanceの設定
次はその下のAppearanceの設定に移ります。
1×1.trans 目次の自動表示プラグインTable of Contents Plusの使い方と設定こちらも上から順番に見て行きましょう。
Width:
目次の幅を選択することができます。
Wrapping:
目次の左右の位置を選択できます。
Font size:
本文の文字サイズに対する目次の文字サイズを選択できます。
Presentation:
お好きな目次のデザインを選択できます。
Advancedの設定
次は「Advanced」の設定に移ります。こちらは少し上級者向けの設定になります。
「Heading levels」以外の項目は基本的には設定する必要はありませんので、「Heading levels」を見て行きましょう。
こちらでは、選択した見出しタグを目次に表示するように設定することができます。
これは使用しているWordPressテーマにもよりますので一概にこれとは言えないのですが、基本的にはh3以降にチェックを入れることが多いです。
hタグ(見出しタグ)に関してよくわからない方は、チェックを入れて、確認して、という動作を1つずつ行いながら設定してみてください。

引用元—アフィリーランド

 目次を任意の場所だけに出す場合

記事内の任意の場所に見出しを出すことも可能です!

記事中に目次を表示させたい場所に、ショートコード

を記入するだけでOK。

この場合、上述した、設定の ③Auto insert for the following content typesのチェックを外しておくことをお忘れなく!

 逆パターンの任意の記事だけ目次を消す場合

これは、前述の逆で、③Auto insert for the following content typesのチェックをつけてデフォルトでは目次が出るような設定にしておいて、記事内に、と記述すればOKです。

これも簡単ですね!

Table of Contents Plusについてまとめ

このプラグインは本当に便利です。

目次を記事につけることで、記事全体を読みやすくするだけでなく、ページ内を逆にしっかりと読んでもらえるようになるようです。是非この目次ブラグインTable of Contents Plusをお試しください。

 

 - ワードプレス

ページ
上部へ