ワードプレス

目次作成プラグインTable of Contents Plusのインストール方法と使い方

どうもmasaです。

今日はお疲れさまでした。最近wordpressについてもっと勉強しなくてはと思っています。

今日もまた新しい知識を仕入れたので紹介したいと思います。それは目次自動作成プラグインのTable of Contents Plus です。ほかの方のブログをみていると本当に記事をうまく作っているなという人がいて、その中の一つが目次でした。目次があるのとないのでは大違いで、付けれたらいいなと思いながらもスルーしていました。しかし、今日本当に見やすいブログを見て自分もこれではだめだと思い、目次作成について勉強した次第です。そこで今日はTable of Contents Plus インストール方法目次の作成方法について書きたいと思います。

下の記事はこのプラグインを使って作成しています。

インストール方法

これは非常に簡単です。ほかのプラグインと同じようにインストールしたらいいからです。ただインストール方法を知らないという方もいると思うので丁寧に解説したいと思います。

wordpressの設定画面でプラグインを選択→新規追加を押します。

そして下の画面でプラグインの検索のところにTable of Contents Plusと打ち込みます。

そうするとTable of Contents Plusが出てくるのでそれをインストール、有効化します。

Table of Contents Plusの設定

そして次に設定→TOCと進み下の画面でPostにチェックを入れ、contentsを目次にshowを表示にそしてhideを非表示にします。まあここは自分のお好みの名前にしてもらってもけっこうです。postにチェックを入れると自動で記事に目次が配置されるようになります。

Table of Contents Plusを使った記字の書き方

この設定で目次が自動的に作成される設定になったので記事を書きます。

この時h1やh2など見出しを付けると自動的に目次が作られます。

実際この記事では4っつの記事にまとめているので目次は4項目になります。

設定を変えれば階層表示ができたりもするので便利です(階層表示した例は下)

2-1とか2-2とかになっていますよね。これが階層表示です。

あとこの記事が実際どのようなテキストになっているかを貼っときます。(青の部分が本文です。このように打ち込むと実際に目次が自動的に作成されます)

<h2>インストール方法</h2>
これは非常に簡単です。ほかのプラグインと同じようにインストールしたらいいからです。ただインストール方法を知らないという方もいると思うので丁寧に解説したいと思います。

wordpressの設定画面でプラグインを選択→新規追加を押します。

そして下の画面でプラグインの検索のところに<span style=”color: #0000ff;”>Table of Contents Plus</span>と打ち込みます。

<img class=”alignnone wp-image-489″ src=”http://aimar1025.sakura.ne.jp/wp-content/uploads/2018/05/タイトルなし-300×134.png” alt=”” width=”441″ height=”197″ />

そうすると<span style=”color: #0000ff;”>Table of Contents Plus</span>が出てくるのでそれをインストール、有効化します。
<h2>Table of Contents Plusの設定</h2>
そして次に設定→TOCと進み下の画面でPostにチェックを入れ、contentsを目次にshowを表示にそしてhideを非表示にします。まあここは自分のお好みの名前にしてもらってもけっこうです。postにチェックを入れると自動で記事に目次が配置されるようになります。
<h2>Table of Contents Plusを使った記字の書き方</h2>
この設定で目次が自動的に作成される設定になったので記事を書きます。

この時h1やh2など見出しを付けると自動的に目次が作られます。

実際この記事では4っつの記事にまとめているので目次は4項目になります。

設定を変えれば階層表示ができたりもするので便利です(階層表示した例は下)

<img class=”alignnone size-medium wp-image-493″ src=”http://aimar1025.sakura.ne.jp/wp-content/uploads/2018/05/wp-toc-setup08-02-300×113.jpg” alt=”” width=”300″ height=”113″ />

2-1とか2-2とかになっていますよね。これが階層表示です。

あとこの記事が実際どのようなテキストになっているかを貼っときます。
<h2>まとめ</h2>
このように記事に目次を作成することができました。これでブログ記事は格段に見やすくなるだけでなく、どれくらいの分量の記事かもすぐにわかるため読者にも優しくなっています。

目次を載せたくない場合の設定

Table of Conetents Plusを無効にするためのショートコードを
書けばいいです。

目次を表示させたくない場合は記事中、どこでもいいので、
ショートコード[[no_toc]]を記入するだけです

まとめ

このように記事に目次を作成することができました。これでブログ記事は格段に見やすくなるだけでなく、どれくらいの分量の記事かもすぐにわかるため読者にも優しくなっています。

皆さんも興味を持った方は試してみてください。癖になるかもしれませんよw

それじゃーばいびー!
にほんブログ村 サラリーマン日記ブログへ
にほんブログ村

ABOUT ME
masa
こんにちは、masaです。 阪大薬学部出身です。できる限り皆さんのお役に立つ、面白い記事を書いていこうと思っています。よろしくお願いします。 詳しいプロフィールはこちら