WordPress

WordPress で目次を作る方法:サイドバーに追従する目次を作ろう(TOC+プラグインを使う)

広告:ページ内にてアフィリエイト広告を利用しています。

WordPress 目次を作る方法

記事内に目次を用意することで、読者がスムーズに記事を読み進めることができるだけでなく、SEOにも大きな効果を発揮します。

さらに、効果的に目次を配置することで、読者がストレスなく記事を読むことができ、ユーザビリティを高めることができます。

ポイント

本記事では、

WordPressで目次を作成する方法と、

サイドバーで追従型の目次を作成する方法を紹介します。

目次があると記事が読みやすくなりますね。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

目次を作ろう(目次の作成例)

記事内の目次と、サイドバーに設置する目次(かつ縦スクロールしても表示され続ける追従型)などを作成することができます。サイトや記事の内容、雰囲気に合わせて利用することで、よりよいサイトにしていく一つの方法です。

追従型の目次を利用した記事のイメージを動画で紹介します。

目次の作り方

WordPress で目次を作る方法は大きく分けて3種類あります。

  • JavaScript で自作する
  • 目次用プラグインを使う
  • テーマ付属の目次を使う(ある場合)

いずれも一長一短がありますが、自作はかなり難易度が高くコスパが悪いため、操作が簡単で比較的オシャレに作れる 「TOC+」 プラグインを利用する方法を紹介します。

■ 「TOC+」 プラグインを使う

とても簡単に目次を作ることができるプラグイン 「Table of Contents Plus」(TOC+) は、 WordPress のプラグインの新規追加で検索すると出てきます。

確認して有効化します。

■ 記事内目次を作る

プラグインを有効化することで目次の設定画面を表示できます。

WordPress の管理画面から、「設定」 → 「TOC+」 をクリックすることで設定画面を表示しますので、目次の表示設定を行います。

「TOC+」 では、標準で5種類のスタイルと、カスタムスタイルが用意されていますので、見た目を選ぶのが便利です。

■ サイドバー追従型目次を作る

WordPress の管理画面から 「外観」 → 「ウィジェット」を選択し、「スクロール広告用」に「TOC+ 目次」ウジェットを配置します。

(追従型ではなくサイドバーに設置する場合は、サイドバー領域にウィジェットを配置してください)

サイドバーに配置する「目次」は、標準だと、テキストを並べたような雰囲気です。

若干、おしゃれ感を出したい場合は、CSS を使って工夫することができます。

目次の周りに枠線を付けて、各目次にドット線を引く場合は、次のCSSを利用してください。

サイドバーの目次の CSS のクラス名は「toc_widget_list」です。

.toc_widget_list {
    border : 1px solid #f5b090;
    border-radius: 10px;
    padding: 20px;
}
.toc_widget_list li a{
    text-decoration: none;
    font-size: 14px;
    border-bottom: 2px dotted;
}

ポイント

目次はトップページなどの一部のページを除きサイト内のほぼすべての記事で表示する項目になりますので、CSSは、WordPress の管理画面「外観」→「カスタマイズ」→「追加CSS」で記述するのが良いでしょう。

目次の完成です。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

まとめ

目次は、記事内の構成をサマリーで表示することで読者が目的(検索意図)の内容にすぐにアクセスできるなど便利なことが多く、かつ、SEO 的にも効果が大きいです。

サイトに目次を効果的に配置することで、ユーザビリティ(使い勝手)を向上させ、読者が読みやすい記事を作成することができます。

ポイント

  • 目次の作成は「Table of Contents Plus」が使いやすい
  • 記事内の目次は設定するだけで利用できる
  • サイドバーの目次はCSSを追加するとオシャレさが増します

目次が記事に入ると、自分で見直すときもとても便利です。

ぜひ使ってみてください。

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 65 番

”末吉"


今日のメッセージ

「時間」は全ての人間に平等に与えられたチャンスです。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記