ワードプレスで目次を作る方法！サイドバーに表示する方法も！CSSでデザインも変えれるよ

こんにちは。今回はブログに目次を作っていきたいと思います。目次を作るとブログを見に来てくれた人に喜んでもらえます。ブログが読みやすくなり、見たいところだけすぐに見ることもできます。

あつおさん

でも目次を作るの大変そう💦

毎回HTMLで目次を作ることもできますが面倒ですので、自動で作ってくれるプラグインを使うことにしました。

ワードプレスには目次が作れるプラグインがたくさんあります。

• Easy Table of Contents
• Table of Contents Plus
• TOC

名前からして簡単そうなEasy Table of Contentsというプラグインを使うことにしました。

「Easy Table of Contents」をインストールする

まずはプラグインをインストールします。

1. ダッシュボードを開き左端の「プラグイン」を開きます。
2. 上の方のプラグインと書かれたすぐ隣の「新規追加」をクリックします。
3. 検索欄に「Easy Table of Contents」と入力し検索します。
4. 「Easy Table of Contents」をインストールします。

これでインストールするできました。

プラグインの設定をする

ダッシュボードの左端の「設定」を開いてください。すると「目次」というところがありますので開きます。ここで自分のイメージに合うように設定してみてください。

デフォルトでこんな感じの雰囲気になりました。もうこれで十分です。

おすすめの設定を考えてみました。

1. 「折りたたみ表示」はチェックを外します
2. 「幅」は50%で。

あとはCSSで変更するのが良さそうです。

あつおさん

簡単だったね。もうできたよ。

サイドバーに目次を表示する方法

デフォルトでは目次は記事の中に表示されますが、サイトの両サイドに表示することもできます。これは人によりブログのデザインが違うので全く同じではありませんが、大体同じなのでその方法を紹介します。

1. まずはダッシュボードを開きます。
2. 左側のメニューから「外観」をクリックします。
3. 「ウィジェット」をクリックします。
4. 「利用できるウィジェット」に「目次」というウィジェットがあるので探します。
5. ウィジェットをドラッグ＆ドロップでサイドバーに配置します。

横にあると見やすいですね！

あつおさん

工員・ブロガー

XContact

工場勤務の工員です。お給料が少ない＆奨学金地獄で奮闘中。実家暮らしで何とか生存中！結婚は断念して第二の人生を満喫！趣味はDIY・お買い物・ゲームです。自然が好きで木を育てたり野菜を育てたりしてます。BBQも好きです。できるだけお金をかけずに生きてます。しくよろ！