「Table of Contents Plus」プラグインで目次を簡単に作成!
2016/05/21
雑誌を読む時は、まず目次から見るという人は多いと思います。
目次を見ると、記事の流れが分かるので、漠然と読み進めるよりも理解しやすく、読みたいページを探すのも楽々できます。
ブログでも記事の内容が濃くなると、読みたい項目をさっと見ただけでは探しづらくなりますよね。
右側のスライダーボタンの大きさが小さいと、「うわ、どんだけ長い記事なんだ。知りたい事ちゃんと書いてるんだろうな。てか探すのだりー。」となって別のブログに行っちゃうかもしれません。。。
せっかく時間をかけて書いた力作でも、面倒というだけで読んでもらえないのは悲しいです。別のブログに行かれて稼ぎ損ねるのはもっと悲しいですw
そこでブログにも目次を付けたい訳ですが、自力で作るのも手間がかかりそうなので、プラグインで楽をします。
Table of Contents Plusを導入する
「Table of Contents Plus」は、見出しを拾って自動で目次を作ってくれるプラグインです。
クリックすると、見出しの位置まで移動してくれるので、利便性も向上します。
ある程度のカスタマイズもできるので、積極的に利用したいです。
プラグインを追加する
- 管理画面のプラグインから新規追加をクリック。
- 検索窓にプラグイン名「Table of Contents Plus」を入力してEnter。
- 見つかったら、いますぐインストールをクリック。
- プラグインを有効化をクリック。
設定方法
設定のTOC+からTable of Contents Plusの設定画面に移動します。
- Position
- 目次を表示する位置。
- Show when
- 見出しが何個以上で目次を付けるか。
- Auto insert for the following Content types
- 見出しを付けるコンテンツの種類。
- Heading text
- 目次の先頭に付ける名前。「目次」とか「contents」とか好きなもので。
- Show hierarchy
- 階層を付けるかどうか。
- Number list items
- 目次に番号を付けるかどうか。
- Enable smooth scroll effect
- クリックで見出しにジャンプする際にゆっくりスクロールするかどうか。
Appearance
見た目をカスタマイズする項目です。
- Width
- 目次の幅を指定。
- Wrapping
- 目次を左右どちら寄りに表示するか。
- Font size
- 文字サイズ。
- Presentation
- 目次のデザインを選択。Customを選択すると、背景・ボーダー・タイトル・リンクの色を自由に設定できます。
Advanced
- Heading levels
- 目次に表示したい見出しを選択できます。
- Exclude headings
- 除外したい見出しに含む文字を設定できます。ワイルドカードに「*」やorに「|」が使えます。
- Default anchor prefix
- アンカー用のIDですが、デフォルトに i を使用しています。IDの重複になる場合は変更できます。
設定が終わったら、Update Optionsをクリックして設定を保存します。
まとめ
簡単に目次を付けることが出来て見栄えも、ユーザビリティも向上しました。
目次を必要とする程、濃密な記事を作るのは大変ですが頑張りましょう!
関連記事
-
WordPressをインストールした後やっておきたい事のまとめ
新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …
-
アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!
記事の先頭に画像があると、見栄えが良さそうだなと思います。 しかし、アイキャッチ …
-
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」を使ってコードをスマートに表示する
相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに …
- PREV
- Googleアナリティクスから自己アクセスを除外する方法
- NEXT
- ブログのファビコンを変更しました