こんにちは!橋尾渡(@hashio_wataru)です!
今回はWordpressのプラグイン「Table of Contents Plus」についての記事を書いていきたいと思います!
もくじ
Table of Contents Plusとは
Table of Contents Plusとはなんなの?ってことで詳しく書いていきますね。ざっくり言いますと、簡単に目次を作れてしまうプラグインです。よくわからないと思いますので、まずはWikipediaの目次を見てみましょう。
おわかりいただけますか?シンプルなデザインの目次がありますね。この目次をワードプレスのブログで使えるプラグインが「Table of Contents Plus」なんです。しかも、自動的に目次を作ってくれるというとても有難いプラグインなのです。
Wikipedia風の目次ができています。
ご覧ください。サイドバーにもTable of Contents Plusを付けることができるんです。そしてスクロールと同時に目次も動くようになっています。
このプラグインの味噌はやはり自動的に目次を作ってくれるという所でしょうか。面倒なHTMLやCSSを設定しなくても勝手に目次を作ってくれるのでプログラミングの素人でも簡単に目次を作れてしまうプラグインになっています。
それと、ワードプレスでブログをやっている人を見ていると「Table of Contents Plus」を導入しているブログがたくさんありますね。とても人気の高いプラグインということがわかります。
目次があると、訪問者にとってブログでどこに何の情報があるのかをより理解しやすくなると思われます。ユーザービリティー向上のために是非導入するべきです。なのでこれを機にあなたもTable of Contents Plusのプラグインをインストールしていきましょう!
Table of Contents Plusをインストールする
では、さっそくプラグインの追加画面に移動してください。
碇のマークがでてきましたね、では「今すぐインストール」を押しましょう。
インストールが完了したらプラグインの有効化を押します。
プラグインリストに追加されました。次に設定をいじってみましょう。
Table of Contents Plusの設定
設定の方法ですが、プラグインリストに設定ボタンがありますのでそれを押しましょう。
押していただくと設定画面がでてきます。
いろいろでてきましたねぇ~、それでは上から順番に説明していきます。
表示する場所
これは目次をどこに表示させるかの設定です。基本的にデフォルトのままでいいでしょう。
見出しの前に目次が表示されます。4つ設定できますので、任意で好きな位置に設定してみましょう。
表示条件
表示条件は見出しが何個あったら目次を表示させるかの設定になります。私の場合は2個見出しがあったら表示させるようにしています。
目次は滅多にいらないというのであれば表示条件の数を増やしてみましょう。
次の投稿タイプのときに表示
「post」と「page」というチェック項目がありますが、postは通常の投稿に目次を表示させる設定で、pageとは固定ページに目次を表示させる設定になっています。
私は固定ページに目次が必要ないと思ったので、投稿ページだけにTable of Contents Plusを有効化する設定にしました。
見出しテキスト
ここで目次のタイトルと非表示切り替えができます。
タイトルという場所に好きな名前を入れてあげましょう。私の場合は「もくじ」と設定しています。それから表示の切り替えボタンですが、私は必要ないと思いチェックを外しています。
階層表示と番号振りと
これはどちらもチェックを入れたままにしておいたほうがいいです。
実際にチェックを入れておくと…。
このように見出し1~6で設定してやると階層になり、番号振りにチェックしておくと番号が表示されます。邪魔というのであればチェックを外してもかまいません。
スムーススクロール
デフォルトではチェックが入っていませんが、基本的にチェックはいれなくていいでしょう。
チェックを入れると瞬間に指定の位置に飛ぶことはせずにグワァーといった感じにスクロールされて指定の位置に移動します。説明でよくわからなかったら実際にチェックを入れて確認してみましょう(笑)好みが分かれると思うので、任意でチェックしましょう。
続きましてデザイン編です。
横幅
横幅に関しては基本的にデフォルト(自動)で大丈夫です。
自動でサイズ調節してくれるので一番オススメの設定です。
25%設定にしてみました。文字がぐちゃぐちゃになり読みづらいです。25%はオススメできません。
100%表示です。記事サイズいっぱいに表示されていますね。見やすいっちゃ見やすいですけど、こんなに必要ありませんね(笑)やはりデフォルトが一番いいでしょう。
回り込み
回り込みの設定についてなんですが、これはデフォルトのままにしておいたほうがいいでしょう。下手に回り込ませる設定をするとレイアウトが崩れ見た目が悪くなります。なのでここは特に設定必要なしです。
文字サイズ
デフォルトは95%になっていますね。これは好みにわかれますので好きな文字サイズにしてみましょう。95%のままのほうが見やすいと思うので特に設定はいじっていません。
デザイン(5種類とカスタム)
いいですねぇ、デザインを選べる項目になりました。
5つのパターンとカスタムデザインが選べるようになっています。デフォルトから見ていきましょう。
Grey(デフォルト)
いつも通りのデザインですね。当たり障りない無難なデザインです。面白みに欠けますね。
Light blue
薄い青色になりました。特筆すべきことはないでしょう。
White
タイトルの通り真っ白です。背景が白いとかぶってしまいますね。
Black
先程とはま逆の真っ黒なデザインです。黒が好きな人にはオススメですね。
Transparent
これは背景と一緒になる設定です。今は記事内の色が真っ白なので白いままです。要するに、バックグラウンドカラーがない状態ですね。個人的にはあまりおすすめはできません、見づらくなってしまう可能性があるからです。
カスタム
カスタムを選んでいただくとこのように自分の好きな色に設定することができます。自分であれやこれやしたい人はカスタムで色を変えてみましょう!
まとめ
基本的な設定は以上になります。Table of Contents Plusの使い方を把握してきてもっと細かく設定したいよ!という方は上級者用の設定を触ってみるといいでしょう。そして、設定が完了したら一番下にあるボタンを押して更新したらブログに反映されます。
これでWikipedia風の目次が簡単に作れるようになりましたね。訪問者がいち早く見たい情報を選択できるようにこういった目次設定は特に役立つでしょう。ブログの管理者であるあなた自身も見やすくなるので良いこと尽くめですね。
それではそろそろTable of Contents Plusについての記事を終わりたいと思います。ぐっばい!