アフィーロード

アフィリエイトがあるじゃないか!

*

「Table of Contents Plus」プラグインで目次を簡単に作成!

    2016/05/21

目次

雑誌を読む時は、まず目次から見るという人は多いと思います。

目次を見ると、記事の流れが分かるので、漠然と読み進めるよりも理解しやすく、読みたいページを探すのも楽々できます。

ブログでも記事の内容が濃くなると、読みたい項目をさっと見ただけでは探しづらくなりますよね。

右側のスライダーボタンの大きさが小さいと、「うわ、どんだけ長い記事なんだ。知りたい事ちゃんと書いてるんだろうな。てか探すのだりー。」となって別のブログに行っちゃうかもしれません。。。

せっかく時間をかけて書いた力作でも、面倒というだけで読んでもらえないのは悲しいです。別のブログに行かれて稼ぎ損ねるのはもっと悲しいですw

そこでブログにも目次を付けたい訳ですが、自力で作るのも手間がかかりそうなので、プラグインで楽をします。

 

Table of Contents Plusを導入する

Table of Contents Plus」は、見出しを拾って自動で目次を作ってくれるプラグインです。

クリックすると、見出しの位置まで移動してくれるので、利便性も向上します。

ある程度のカスタマイズもできるので、積極的に利用したいです。

プラグインを追加する

  1. 管理画面のプラグインから新規追加をクリック。
  2. 検索窓にプラグイン名「Table of Contents Plus」を入力してEnter。
  3. 見つかったら、いますぐインストールをクリック。
  4. プラグインを有効化をクリック。

設定方法

設定のTOC+からTable of Contents Plusの設定画面に移動します。

TableOfContentPlus1

Position
目次を表示する位置。
Show when
見出しが何個以上で目次を付けるか。
Auto insert for the following Content types
見出しを付けるコンテンツの種類。
Heading text
目次の先頭に付ける名前。「目次」とか「contents」とか好きなもので。
Show hierarchy
階層を付けるかどうか。
Number list items
目次に番号を付けるかどうか。
Enable smooth scroll effect
クリックで見出しにジャンプする際にゆっくりスクロールするかどうか。

Appearance

見た目をカスタマイズする項目です。

TableOfContentPlus2

Width
目次の幅を指定。
Wrapping
目次を左右どちら寄りに表示するか。
Font size
文字サイズ。
Presentation
目次のデザインを選択。Customを選択すると、背景・ボーダー・タイトル・リンクの色を自由に設定できます。

TableOfContentPlus3

Advanced

TableOfContentPlus4

Heading levels
目次に表示したい見出しを選択できます。
Exclude headings
除外したい見出しに含む文字を設定できます。ワイルドカードに「*」やorに「|」が使えます。
Default anchor prefix
アンカー用のIDですが、デフォルトに i を使用しています。IDの重複になる場合は変更できます。

設定が終わったら、Update Optionsをクリックして設定を保存します。

まとめ

簡単に目次を付けることが出来て見栄えも、ユーザビリティも向上しました。

目次を必要とする程、濃密な記事を作るのは大変ですが頑張りましょう!

 - WordPress, プラグイン

Message

メールアドレスが公開されることはありません。

  関連記事

WordPressをインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …

アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!

記事の先頭に画像があると、見栄えが良さそうだなと思います。 しかし、アイキャッチ …

STINGER5
STINGER5をWordPressのテーマに選んでみた

WordPressをインストールして、まずやるべきは記事を書くことではなく、ブロ …

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

ビジュアルエディタのレイアウトをブログと同じにする

記事を書いてはプレビュー、また書いてはプレビュー・・・・・ 少々几帳面なのか、文 …

ワードプレスのロゴ
エックスサーバーにWordPressをインストールする

サーバーを借りました、ドメインも取りました、次が何をするの? それは、WordP …

TinyMCE Advancedを導入してブログ記事の作成を捗らせよう

ビジュアルエディタは楽で良いですね。 テキストエディタだと、コードとテキストがご …

Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です!

解析ツールの定番Google Analytics(アナリティクス)を導入するとき …

Google ChromeでWPの管理画面が崩れた時の対処方法

みなさん普段、WordPressの作業をどのブラウザでしていますか? 私は、Fi …

「SyntaxHighlighter Evolved」と「SH TinyMCE Button」を使ってコードをスマートに表示する

相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに …