好きな事を好きな時に好きなだけする

そんな人生最高じゃないですか。

記事の目次を自動生成してくれるWordPressプラグイン「Table of Contents Plus」

   

前回に引き続き、WordPressプラグインに関する記事です!
今回は目次を自動生成してくれる「Table of Contents Plus」を紹介します。

プラグインの仕様や使い方など少し難しく感じるかもしれませんが、当記事で詳しく解説するのでご安心ください。
では早速見ていきましょう!

↓当サイトでも採用しているこれです。

Table of Contents Plusの導入方法

プラグインの新規追加画面で「Table of Contents Plus」を検索してください。

Table of Contents Plusの画像

このようなプラグインが見つかるので「インストール⇒有効化」
これでプラグインの導入はOKです。

Table of Contents Plusの設定方法

具体的な設定方法を。

STEP1

「設定⇒TOC+」で設定画面に進みます。

STEP2

これが設定画面ですね。
なんかたくさん項目があって分かりずらいのではないでしょうか?
ここの設定がすべてなので、詳しく解説させて頂きます。

Position

目次を表示させる位置を選択します。
4つの項目がありますが

  • Before first heading (default)⇒一番目の見出しの前
  • After first heading⇒一番目の見出しの後
  • Top⇒記事の一番上(タイトル直下)
  • Bottom⇒記事の一番下

を意味します。
オススメは「Before first heading (default)」です。

Show when

「いつ表示させるか」に関する項目です。
数字を選択できるようになっていますが、その数字は見出しの数を表していて、
例えば「3」を選択した場合、見出しが3つ以上あれば目次を表示することになります。

基本的に目次はあればいいと思うので、「2」を選択しておくことをオススメします。

Auto insert for the following content types

自動生成させるコンテンツを選ぶことができます。

  • post⇒投稿ページ
  • page⇒固定ページ
  • wpcf7_contact_form⇒コンタクトフォーム7ページ

私の場合、「post」と「page」にチェックを入れています。

Heading text

これは画像を見てもらえると分かりやすいので作りました。

①と②がそれぞれ対応していて、「Hide the table of contents initially」はチェックを入れると、hideの状態でページが表示されるようになります。

オススメは「①を目次」「②を表示・隠す」ですね。

Show hierarchy

ヒエラルキー、つまり階層のことです。
目次を階層的に表示させるかどうかを選択します。

階層的に表示させた方がユーザーに優しいので、チェックを入れましょう。

Number list items

目次に番号を振るかどうかを選択します。
これもユーザーのことを考えてチェックを入れます。

Enable smooth scroll effect

目次のリンクをクリックするとその見出しまで一気に飛んでくれるんですが、これをチェックすることで、スムーズな移動になります。
スクロールしながら移動する感じのやつですね。
この記事の目次をクリックすると分かります。

最近はスムーズスクロールも多いので、チェックを入れておくと良いでしょう。

Width

目次の幅を選択する項目です。
固定幅から相対幅、ユーザー定義の幅を選択することが可能です。

スマホ対応のことも考えて「Auto (default)」をオススメします。

Wrapping

目次の左右の位置を選択します。

  • None (default)
  • Left
  • Right

「Left」と「Right」はcssでfloatを使用するため、デザインが崩れる恐れがあります。
「None (default)」をオススメします。

Font size

フォントの大きさを選択します。
「%」「px」「em」の単位を選ぶことができますが、スマホ対応のことを考えると「px」は避けるべきです。
特に何もなければ95%で良いでしょう。

Presentation

表示デザインを選択することができます。

  • Grey (default)
  • Light blue
  • White
  • Black
  • Transparent
  • Custom

「Custom」を選択すると、背景色や文字の色などを個別で選ぶことが可能になります。

まとめ

最近ではコンテンツの質が問われるようになり、情報量が多くなりがちです。
多ければ良いというものではありませんが、文章が長くなればなるほどユーザーは情報を見つけるのが大変になるでしょう。

ユーザビリティーに配慮するためにも、Table of Contents Plusの導入をオススメします。

 - WordPress

adsensepc

adsensepc

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

WordPressテーマをStinger3に変更した理由

目次1 以前使っていたテーマ1.0.1 アーカイブ、タグ、検索結果ページなどはN …

バズ部のブログが更新されないと思ったら、リニューアルしていた件について

バズ部はWEB周りの仕事をしている人なら知らない人がいないのではないかと思えるほ …

よくみかける「この記事を書いた人」を表示させるプラグイン “Fancier Author Box”

最近よくみかける「この記事を書いた人」の表示。 最初はそれほど気にならなかったの …

簡単にアニメーションを追加することができる!!-WOW.js

アニメーションを追加したいけどjavascriptとか触れない・・・ そんなあな …

【永久保存版】Amazonアソシエイトのプラグイン「AmazonJS」導入の忘備録

ブログをやっている人でアマゾンアソシエイトのリンクを貼っている人は多いと思います …

サイト修正で使える!メンテナンス中の表示をしてくれるプラグイン”WP Maintenance Mode”

私の毎日の日課はネットサーフィンなんですが(笑)、今日いつものようにネットサーフ …

no image
少しだけレンタルサーバーについて話してみる

こんにちは。 今日はサイトの運営で欠かすことのできないレンタルサーバーについて話 …

WordPressの引越しをするなら「Duplicator」しかないでしょ!

WordPressのドメイン・サーバー移行を試みて諦めた人は多いのではないでしょ …

【WordPressカスタマイズ】ブログをプチリニューアルしました

この記事でも紹介しているように、ワードプレスのテーマにSTINGERを使わせて頂 …

【忘備録】wa-track.comが出てきた!!その対処法とは

「運営しているサイトが急に表示されなくなり、wa-track.comが出てきた! …