ブログ記事ごとに目次を設定すると便利!プラグインTable of Contents Plusの使い方

ブログ記事ごとに目次を設定すると便利!プラグインTable of Contents Plusの使い方

長い文章であればページ内リンクする「目次」をつけよう

1つのブログ投稿でも、
文章の長いもの、短いものが
あるかと思います。

 

 

 

長い文章のブログ投稿の場合、
文章の中のどこに何が
書かれているのか、わかりづらく
なりますよね。

hanashi_nagai_woman.jpg

オススメしたいのが
ページの冒頭部分で、
概要がわかるような
「目次」を設置すること。

スクリーンショット-2017-11-04-21.48.39.jpg

▲上記画像はある記事の目次。

 

 

目次は、もちろん、ページ内の
該当箇所にリンク(ページ内リンク)
していると尚よいです。

 

読者様はご自分が欲しい知識・
ノウハウ・情報まで、
ジャンプすることが可能です。

 

 

ただし。
このような目次を設置するには、
ブログ投稿内の情報を、
あらかじめ整理する必要があります。

文章整理にも役立つ「見出し」

長い文章の場合、
ある程度の意味のかたまりで
その都度わかりやすく
「見出し」をつけてあげると、
整理に役立つだけでなく、
読者様にとって
理解しやすいものになります。

 

見出しについての解説は、
こちらのブログ記事を
ご覧ください^^

 

 

 

見出しに呼応して「目次」を自動生成。
WordPressプラグイン
Table of Contents Plus

ブログ投稿をするたびに、
目次をつくるのは大変です・・・。

目次を手作業でつくるとすると

  • 本文をあとから更新しても、目次を直し忘れる
  • リンクを貼り忘れる

などのミスが考えられます。

 

 

WordPressユーザーに限っての
ご提案となりますが、
とても便利なプラグインがありますよ。

 

見出しに呼応して、
目次を自動生成してくれる
プラグインです。

Table of Contents Plusの
インストール〜有効化〜設定

Table of Contenst Plusの
インストールから有効化、そして
設定の方法をご紹介します。

 

  1. WordPressの管理画面で「プラグイン」→「新規追加」を選択。
    プラグイン>新規追加
  2. 右上の検索フォームから「Table of Contents Plus」を検索し、インストール。有効化まで行いましょう。
    プラグイン検索Table of Contents Plus有効化
  3. 「インストール済みプラグイン」→「Table of Conetents Plus」の「設定」をクリック。
    「インストール済みプラグイン」→「Table of Conetents Plus」の「設定」をクリック。
  4. 基本設定では
    1. 目次の表示位置や名称
    2. 番号付与

    が設定ができます。実際に表示される目次の内容を確認しながら設定するといいですよ^^。

    Table Contents Plus基本設定

 

設定についての各項目解説!

位置

Table of contenst plus「位置」
 
目次を表示する位置も選ぶことができます(^^)
選択肢は以下4つです。
 
目次は、まず全体を把握することが目的です。
オススメは初期設定である「最初の見出しの前」です。

  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後
  • 上(記事タイトルの下)
  • 下(記事の一番下)

 
 

表示条件

Table of contenst plus「表示条件」
見出しタグの見出しが何個ある場合に目次を表示するかも設定可能です。
2つから10こまで選択できますが、
目次はなるべく表示した方が良いですが、とくに見出しを多く使っていない記事は短いはずです。
私は「4」にしています。
 
 

以下のコンテンツタイプを自動挿入

Table  of Contenst Plus以下のコンテンツタイプを自動挿入
次の記事の種類において、目次の表示/非表示を設定します。

  • post・・・通常の投稿記事
  • page・・・固定ページ
  • custom_css・・・カスタムcss
  • customize_changeset・・・カスタマイズチェンジセット

 
人によって、こちらに出てくる項目は変わってくるかと思います(^^)
私はプロフィールや会社概要、そして問い合わせページやランディングページなどもつくる「固定ページ」には目次は不要だと思い、post(投稿記事)にのみチェックしています。
 
 

見出しテキスト

Table Of Contents Plus 見出しテキスト
目次自体のタイトルは、変更可能です。初期設定では英語で ”Contents” と入っています。

  • 目次の上にタイトルを表示
    目次のタイトルです。「目次」といれると読者様にとって親切です。
  • ユーザーによる目次の表示・非表示を切り替えを許可
    チェックを入れると目次の開閉ができるようになります。目次を必要としない読者様もいるかもしれません。許可しておくのがベター。
  • テキストを表示
    目次を開くリンクの文言を設定します。初期設定だと英語です。日本語に変えましょう。
  • テキストを非表示
    目次を閉じるリンクの文言を設定します。初期設定だと英語です。日本語に変えましょう。
  • 最初は目次を非表示
    チェックを入れると最初は目次が非表示となります。初めから目次が開いていると邪魔・・・と感じる読者様もいるかもしれません。チェックを入れておいてもいいかもしれません。

 
 

階層表示

Table of Contents Plus階層表示
 
目次の階層を表示するかを設定するチェック欄です。目次は階層を表示させた方がとても見やすくなりますので、チェックを入れておきましょう。
 
▼階層表示なし(見出し3のみ使っている場合)
Table of Contents Plus 階層表示なし場合
 
▼階層表示あり(見出し3と見出し4を使っている場合)
Table of Contents Plus 階層表示あり
 
 

番号振り

Table of Contents Plus番号振り
 
目次の階層にあわせ、番号を自動で振るかどうかを選べます。自動で番号がつくようにするのがオススメですが、見出しに番号を含め他場合などは、目次で番号が並んでしまうことになりますので、見出しの使い方に注意が必要です。
 
 

スムーズ・スクロール効果を有効化

Table of Contents Plus「スムーズ・スクロール効果を有効化」
Table of Contents Plusで作られた目次をクリックすると、クリックした箇所に移動できるようになります。そのクリック後の移動方法が、「ジャンプ形式」か「スクロール形式」かを選べます。どちらにするかは好みです(^^)
 
 
つづいて見た目「外観」のカスタマイズです。

外観

Table of Contents Plus 外観

  • 横幅
    目次の横幅を決めます。初期設定で設定されている「自動」で問題ありません。
  • 回りこみ
    目次の設置位置を決めます。以下3つから選択できますが、初期設定の「なし」のままにしておきましょう。パソコンで見てもモバイルで見てもデザインが崩れる恐れを回避できます。

    • なし(デフォルト)
  • 文字サイズ
    目次の文字の大きさを変更できます。通常のサイズよりも少し小さめである、初期設定の「95%」で問題ありません。
  • プレゼンテーション
    目次のデザインを変更できます。好みですね(^^)。ご自身でカスマイズすることもできます。私は「水色」にしています

 
 
 
 

目次を出さなくていい記事ではどうするか。

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

 

目次を表示させたくない場合は
記事中、任意の場所に、
ショートコード[no_toc]を記入

たったこれだけです^^

 

この非表示の仕方は、
ワードプレスソムリエの
村重さんに教えてもらいました!
ありがとうございます^^

 

 

まとめとして

なかなか手作業では
大変ではありますが、
お客様にわかりやすい魅せ方が
実現する「目次」。
ぜひ取り入れてみてくださいね。
WordPressの方でしたら、プラグインにお世話になることもできます。

 

メルマガ最新情報は▼

 

 

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でカイエダ ミエをフォローしよう!

▼▼シェアしてもらえたら嬉しいです!
カイエダ ミエ

3ヶ月であなたのブログを24時間働く営業マンにする「おもてなしブログ専門家」ビジネスデザイン・コンサルタント。2001年よりWeb制作の道に入り、デザイナー、ディレクターを経験したのち、2007年に独立。現在はブログを軸とした集客からの売上アップを得意とする、デザインも手がけるコンサルタント。
お客様のペルソナのニーズを先取りし「デザインはおもてなしである」をコンセプトにサイト構築を手がける。
自らのブログも含め、構築してきたブログ/Webサイトは300件以上。お客様の不安やお悩みを解決するブログで、ブログ読者様を「おもてなし」することを推奨し、どうすればクライアントのビジネスにおいて、確実に集客できて売上アップにつながるのかを日々実践・探求し情報を発信している。