閲覧履歴 マイ注目リスト
おかげ様でご利用5万社突破!ノベルティグッズ名入れ制作は実績No1の卸売りセンターへ。周年記念、卒業記念品もご相談ください。

販促レポート

WordPress小技:プラグインを使って記事に目次を設置する方法

投稿日:2018/09/28 カテゴリ: ワードプレス

ブログ記事に目次をつけたいけど、いちいち書き込むのは本当に面倒ですよね。WordPressには「Table of Contents Plus」というプラグインでがあり、全ての投稿に目次を簡単設置することができます。本日は、この便利なプラグインの使い方を解説。

 

目次をつけるメリットは?
WordPress小技:プラグインを使って記事に目次を設置する方法

目次をつけるメリットは、ずばり「読者の離脱率が下がる」こと。
ユーザー全員が、ブログ記事やサービス紹介ページを最初から最後までくまなく読むことはありません。あるユーザーは「A」という見出しの部分を、あるユーザーは「B」という見出しの部分を・・・というように、人によって求めているニーズは異なります。

スマホだと画面が小さいため、1500文字を超えてくるとなれば面倒になり、要点だけを斜め読みしたくなります。特に、目次のない長文記事であれば、なおさらです。

しかし、目次があれば、記事を読む前にあらかじめ内容を把握することができるので、自分の読みたい情報だけを手早く取得できるというメリットがあります。

一方で読者にとって便利な目次ですが、執筆者側の立場になれば、それぞれの投稿に手動で目次設置するのはとても骨が折れる作業。そこで活用できるのが「Table of Contents Plus」という無料の公式プラグインとなります。

「Table of Contents Plus」は、全ての記事に目次を設置できるだけでなく、目次に見出しへのリンクを自動で設置してくれる優れものです。次段以降では、このプラグインの設定方法や使い方について解説いたします。


プラグインを使って記事に目次を設置する方法
WordPress小技:プラグインを使って記事に目次を設置する方法
プラグイン「Table of Contents Plus」をダウンロードして有効化したら、管理画面の[設定]メニューから、[TOC+]をクリックします。
Table of Contents Plus

WordPress小技:プラグインを使って記事に目次を設置する方法
[基本設定]タブに入り、以下のように設定します。
  • 位置・・・最初の見出しの前(デフォルト)
  • 表示条件・・・2つ以上に設定
  • 以下のコンテンツタイプを自動挿入・・・post、page
  • 見出しテキスト(目次の上にタイトルを表示)・・・任意の文字
  • 階層表示・・・どちらでも可
コンテンツタイプのpostは投稿記事、pageは固定ページになります。見出しテキストは、目次の上に表示されるタイトルのことで、「目次」や「要約」といった文字を入力するとわかりやすいです。

WordPress小技:プラグインを使って記事に目次を設置する方法
続いて、下にスクロールし、以下のように設定します。
  • 番号振り・・・どちらでも可
  • スムーズ・スクロール効果を有効化・・・どちらでも可
  • 横幅・・・自動(デフォルト)
  • 回り込み・・・なし(デフォルト)
  • 文字サイズ・・・任意のサイズ
  • プレゼンテーション・・・任意のデザイン
「横幅」と「回り込み」については、スマホで見た時にレイアウトが崩れる可能性があるので、上記の通りに設定することを推奨します。

WordPress小技:プラグインを使って記事に目次を設置する方法
ちなみに、一番下にある[上級者向け]の[見出しレベル]では階層表示に関してさらに細かく設定できます。「heading」とは見出しタグのことを指し、一般的にはh1(大見出し)→h2(中見出し)→h3(小見出し)と設定します。全ての見出しタグにチェックをいれると目次が長くなってしまうので、h3くらいまでにしておくのがベストです。全ての設定が完了したら、[設定を更新]をクリックします。

WordPress小技:プラグインを使って記事に目次を設置する方法
すると、このように記事の先頭に目次を設置することができました。


いかがでしたか?
ちょっと設定が手間ですが、一度設定してしまえば、設定後に新しく作成した記事や固定ページにも自動で反映されます。ぜひご活用ください。なお、サイト制作について最初からおさらいしたい場合は、バックナンバーをどうぞ。


担当ライター:ryusuke
WordPressサイト制作/Web集客の専門家。大手広告代理店にて、百貨店や出版社のリスティング広告運用を担当。その後独立、広告代理店で培ったSEOやデータ分析の知見を活かし、個人メディアを運営する傍らフリーのコンテンツライターとして活動中。執筆テーマは、集客やマーケティングなどビジネス関連、グルメや音楽関連。
公式ブログ
公式フェイスブック

 

 

販促レポートは、特集記事や販売促進コラム、オフィスでの問題解決など、皆さんのビジネスに少しでも役立つ情報をお届け。編集長の弊社代表と様々な分野で活躍する若手ライター陣によって、2008年より地道に運営されております。

 

 

 

このレポートと併せてオススメしたいノベルティグッズ

ノベルティ:<アウトレット売切廃盤> ステンレスサーモボトル(250ml)

<アウトレット売切廃盤> ステンレスサーモボトル(250ml) 白

1,100円 ⇒ 375円

名入れ対応品 スピード印刷  名入れ制作事例 ノベルティ:<アウトレット売切廃盤> ステンレスサーモボトル(250ml)の関連レビュー 

注目リストでお見積り

ノベルティ:<アウトレット売切廃盤> ステンレスボトル/420ml

<アウトレット売切廃盤> ステンレスボトル/420ml 黒

1,500円 ⇒ 350円

名入れ対応品 スピード印刷  ノベルティ:<アウトレット売切廃盤> ステンレスボトル/420mlの関連レビュー 

注目リストでお見積り

ノベルティ:ステンレスダブルウォールボトル 500ml

ステンレスダブルウォールボトル 500ml 黒

2,450円 ⇒ 1,225円

名入れ対応品 推奨品 

注目リストでお見積り

ノベルティ:[粗品/お土産] 和柄ふせんセット 椿/つばき

[粗品/お土産] 和柄ふせんセット 椿/つばき

320円 ⇒ 140円 ⇒ 138円

値引き品 推奨品 フルカラー名入れ対応品 

注目リストでお見積り

 

 

 

こちらの関連記事もいかがでしょうか?

<WordPress> ワードプレスで企業サイト制作|リニューアル実践編

<WordPress> ワードプレスで企業サイト制作|リニューアル基本編

WordPress小技:ワードで書いた文章をそのまま投稿する方法

WordPress小技:セキュリティ対策、管理画面への不正アクセスを防ぐ

WordPress小技:特定の文章やURLを一括で置き換える方法

WordPress小技:プラグインを使ってリンク切れをチェックする方法

WordPress小技:プラグインを使って記事に目次を設置する方法

カテゴリ: <ワードプレス> の一覧

 

 

 

もしよければ共有をお願いいたします

 

[お探しの検索ワードはコチラですか?]

マグボトルタンブラー金封ふくさ シヤチハタ靴べらアウトドアタウントート電子辞書PCバッグクリップライト写真立て売切廃盤


[特集] 特急7営業日!名入れスピード印刷、お急ぎのお客様は諦めずにご相談ください

[特集] 写真も綺麗に印刷!フルカラー対応ノベルティ インクジェット、昇華転写など

[特集] 格安ウェットティッシュ 1,000個よりオリジナルラベル対応

[特集] 名入れができる「卒業記念品」と「卒園記念品」<2017年春> 卒業記念品の納入実績 新着

スペシャルカテゴリ/各種イベント

2020年新作商品

注目の新作商品

名入れ!エコバッグ・マグカップ・ボトルなど新着

イベント用食品

注目!イベント用食品

冷やし中華、うどん、調味料。最短翌日出荷!新着

フォールディングファン

フォールディングファン

夏の新定番!無料サンプル差し上げます新着

格安ウェットティッシュ

格安ウェットティッシュ

オリジナルラベル対応!33円~送料無料

熨斗(のし)ノベルティ特集

熨斗(のし)ノベルティ

時節柄を問わない新アイテム 粗品・ご挨拶

不織布バッグ新シリーズ

不織布バッグ新シリーズ

お手頃で優しい風合い
選べる7カラー

防災グッズ

防災・防犯グッズ特集

名入れ対応!非常用ライト・救急セットなど

無料サンプル差し上げます

サンプル差し上げます

クリアファイル、ウェットティッシュ、付箋など

名入れスピード印刷

スピード印刷対応品

ご相談下さい!名入れ印刷、特急7営業日

マタニティマークグッズ

マタニティマークグッズ

厚生労働省推進!思いやりグッズで好感度アップ

名入れ対応、注目のスマホ関連グッズをまとめてみました

スマホ関連グッズ

注目!スタンド、チャージャー、ポーチ...

フルカラー対応ノベルティ

フルカラー印刷対応品

写真も綺麗に印刷!フルカラー対応ノベルティ

プライスカテゴリ/価格別

カタログ請求フォーム

ノベルティグッズ・販促品・記念品の無料カタログ

ノベルティグッズ・販促品・記念品の無料カタログ請求

FOLLOW @pqnavi
LIKE @pqnavicom

ページTOP

管理用