WordPressでWikipedia風の目次を作りたい時はTable of Contents Plusプラグインを導入すれば簡単に作れてしまう

シェアボタンを押して情報を共有しましょう。

スクリーンショット_031816_121024_PM

どどどどどどどど!どもぉ~!橋尾渡でっす!

5日間もブログを更新できてなかったんですけど、その理由が本を読んでいたらからなんです。その本は何かというと、堀江貴文さんの「君がオヤジになる前に」という本を読んでいました。僕はわからない言葉がたくさんあるのでそれを一つ一つ辞書で調べながら読むのでとても時間がかかるのですw

まず、オヤジの定義とは考える事をやめてしまった人の事を言います。例えば今日何を食べたいとか今日どの服を着ようかとかを面倒くさがって適当なものを選んでしまうという事がオヤジ化するということなんです。

だから若い人でも考えることをしない人はれっきとしたオヤジです(笑)逆に思考のフル回転をさせている中年層の人は全くオヤジではありません。僕が歳を重ねていったら思考の停止だけはさせずオヤジ化回避に尽力したいものですw

と、いうことで今回はWordpressのプラグイン「Table of Contents Plus」についての記事を書いていきたいと思います!

スポンサーリンク
レクタングル(大)広告

Table of Contents Plusとは

Table of Contents Plusとはなんなの?ってことで詳しく書いていきますね。ざっくり言いますと、簡単に目次を作れてしまうプラグインです。よくわからないと思いますので、まずはWikipediaの目次を見てみましょう。

スクリーンショット_031816_010340_PM

おわかりいただけますか?シンプルなデザインの目次がありますね。この目次をワードプレスのブログで使えるプラグインが「Table of Contents Plus」なんです。しかも、自動的に目次を作ってくれるというとても有難いプラグインなのです。

僕のブログにもTable of Contents Plusを導入しているので見てみましょう。

Simplicityに必ず入れておくべき18個のプラグインリスト大公開!
どうもこんにちは!橋尾渡(はしお わたる)です!今回は僕がSimplicityのテーマに入れているプラグインを公開してみたいと思いま...

スクリーンショット_031816_020846_PM

すごいですね!Wikipedia風の目次ができていますw

スクリーンショット_031816_021006_PM

ご覧ください。サイドバーにもTable of Contents Plusを付けることができるんです。そしてスクロールと同時に目次も動くようになっています。

このプラグインの味噌はやはり自動的に目次を作ってくれるという所でしょうか。面倒なHTMLやCSSを設定しなくても勝手に目次を作ってくれるのでプログラミングの素人でも簡単に目次を作れてしまうプラグインになっています。

それと、ワードプレスでブログをやっている人を見ていると「Table of Contents Plus」を導入しているブログがたくさんありますね。とても人気の高いプラグインということがわかります。

目次があると、訪問者にとってブログでどこに何の情報があるのかをより理解しやすくなると思われます。ユーザービリティー向上のために是非導入するべきです。なのでこれを機にあなたもTable of Contents Plusのプラグインをインストールしていきましょう!

Table of Contents Plusをインストールする

では、さっそくプラグインの追加画面に移動してください。

スクリーンショット_031816_024454_PM

碇のマークがでてきましたね、では「今すぐインストール」を押しましょう。

スクリーンショット_031816_025407_PM

インストールが完了したらプラグインの有効化を押します。

スクリーンショット_031816_025659_PM

プラグインリストに追加されました。次に設定をいじってみましょう。

Table of Contents Plusの設定

設定の方法ですが、プラグインリストに設定ボタンがありますのでそれを押しましょう。

スクリーンショット_031816_030617_PM

押していただくと設定画面がでてきます。

スクリーンショット_031816_031148_PM

いろいろでてきましたねぇ~、それでは上から順番に説明していきます。

表示する場所

これは目次をどこに表示させるかの設定です。基本的にデフォルトのままでいいでしょう。

スクリーンショット_031816_040536_PM

このように見出しの前に目次が表示されます。4つ設定できますので、任意で好きな位置に設定してみましょう。

表示条件

表示条件は見出しが何個あったら目次を表示させるかの設定になります。僕の場合は2個見出しがあったら表示させるようにしています。

スクリーンショット_031816_041611_PM

目次は滅多にいらないというのであれば表示条件の数を増やしてみましょう。

次の投稿タイプのときに表示

「post」と「page」というチェック項目がありますが、postは通常の投稿に目次を表示させる設定で、pageとは固定ページに目次を表示させる設定になっています。

スクリーンショット_031816_042128_PM

僕は固定ページに目次が必要ないと思ったので、投稿ページだけにTable of Contents Plusを有効化する設定にしました。

見出しテキスト

ここで目次のタイトルと非表示切り替えができます。

スクリーンショット_031816_050506_PM

タイトルという場所に好きな名前を入れてあげましょう。僕の場合は「もくじ」と設定しています。それから表示の切り替えボタンですが、僕は必要ないと思いチェックを外しています。

スクリーンショット_031816_050741_PM

階層表示と番号振りと

これはどちらもチェックを入れたままにしておいたほうがいいです。

スクリーンショット_031816_051129_PM

実際にチェックを入れておくと…。

スクリーンショット_031816_051244_PM

このように見出し1~6で設定してやると階層になり、番号振りにチェックしておくと番号が表示されます。邪魔というのであればチェックを外してもかまいません。

スムーススクロール

デフォルトではチェックが入っていませんが、基本的にチェックはいれなくていいでしょう。

スクリーンショット_031816_051702_PM

チェックを入れると瞬間に指定の位置に飛ぶことはせずにグワァーといった感じにスクロールされて指定の位置に移動します。説明でよくわからなかったら実際にチェックを入れて確認してみましょう(笑)好みが分かれると思うので、任意でチェックしましょう。

続きましてデザイン編です。

横幅

横幅に関しては基本的にデフォルト(自動)で大丈夫です。

スクリーンショット_031816_052624_PM

自動でサイズ調節してくれるので一番オススメの設定です。

スクリーンショット_031816_052749_PM

25%設定にしてみました。文字がぐちゃぐちゃになり読みづらいです。25%はオススメできません。

スクリーンショット_031816_052859_PM

100%表示です。記事サイズいっぱいに表示されていますね。見やすいっちゃ見やすいですけど、こんなに必要ありませんね(笑)やはりデフォルトが一番いいでしょう。

回り込み

回り込みの設定についてなんですが、これはデフォルトのままにしておいたほうがいいでしょう。下手に回り込ませる設定をするとレイアウトが崩れ見た目が悪くなります。なのでここは特に設定必要なしです。

スクリーンショット_031816_053350_PM

文字サイズ

デフォルトは95%になっていますね。これは好みにわかれますので好きな文字サイズにしてみましょう。95%のままのほうが見やすいと思うので特に設定はいじっていません。

スクリーンショット_031816_053521_PM

デザイン(5種類とカスタム)

いいですねぇ、デザインを選べる項目になりました。

スクリーンショット_031816_053648_PM

5つのパターンとカスタムデザインが選べるようになっています。デフォルトから見ていきましょう。

Grey(デフォルト)

スクリーンショット_031816_053841_PM

いつも通りのデザインですね。当たり障りない無難なデザインです。面白みに欠けますね。

Light blue

スクリーンショット_031816_054011_PM

薄い青色になりました。特筆すべきことはないでしょう。

White

スクリーンショット_031816_054146_PM

タイトルの通り真っ白です。背景が白いとかぶってしまいますね。

Black

スクリーンショット_031816_054343_PM

先程とはま逆の真っ黒なデザインです。黒が好きな人にはオススメですね。

Transparent

これは背景と一緒になる設定です。今は記事内の色が真っ白なので白いままです。要するに、バックグラウンドカラーがない状態ですね。個人的にはあまりおすすめはできません、見づらくなってしまう可能性があるからです。

カスタム

スクリーンショット_031816_054907_PM

カスタムを選んでいただくとこのように自分の好きな色に設定することができます。自分であれやこれやしたい人はカスタムで色を変えてみましょう!

まとめ

基本的な設定は以上になります。Table of Contents Plusの使い方を把握してきてもっと細かく設定したいよ!という方は上級者用の設定を触ってみるといいでしょう。そして、設定が完了したら一番下にあるボタンを押して更新したらブログに反映されます。

スクリーンショット_031816_055324_PM

これでWikipedia風の目次が簡単に作れるようになりましたね。訪問者がいち早く見たい情報を選択できるようにこういった目次設定は特に役立つでしょう。ブログの管理者であるあなた自身も見やすくなるので良いこと尽くめですねw

それではそろそろTable of Contents Plusについての記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
WordPressでWikipedia風の目次を作りたい時はTable of Contents Plusプラグインを導入すれば簡単に作れてしまう
この記事をお届けした
HASHIO_LOGの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事