記事に目次を作るプラグインTable of Contents Plusの中央表示と使い方

記事に目次があるブログ、ありますよね。本のもくじのようで見栄えも良いですね。

いま読んでいるこのブログにもあります。

table-of-contents-plus%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9

「私ももくじを作ってみたい!でも難しそう…。」

大丈夫です。ワードプレスのプラグイン「Table of Contents Plus」を使えば簡単に目次を表示させることができますよ。

今回は目次を簡単に生成できるプラグイン「Table of Contents Plus」の使い方と中央表示の仕方についてお伝えします。

一度設定するだけなので便利ですよ。

Table of Contents Plusの使い方

まずはTable of Contents Plus(通称TOC+)をインストールしていきます。

ワードプレスのプラグインは基本的にどれもインストールの仕方は同じです。

ブログのダッシュボード(管理画面)から

%e6%96%b0%e8%a6%8f%e8%bf%bd%e5%8a%a0

”プラグイン→新規追加”

table-of-contents-plus

”「プラグインの検索」窓にお目当てのプラグイン名Table of Contents Plusを入力してエンターキー”

で表示されます。

お目当てのプラグインが表示されたら【今すぐインストール】をクリックします。

プラグインの有効化が終わったら

ダッシュボード内の【設定】からTOC+を選びます。

ここからはTable of Contents Plusの設定の方法をご紹介します。

Table of Contents Plusの設定方法

設定するのは【基本設定】のみで大丈夫です。

基本設定の画面を表示させて以下のように設定していきます。

・表示する場所

記事上や記事下などかなり自由に設定できますが一般的には

最初の見出しの前(デフォルト)

です。

最初の見出しの前(デフォルト)
を選択します。

・表示条件

見出しがいくつ以上あったら目次を表示させるか決めます。

2つ以上あるとき

が一般的です。

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

目次を表示させる記事の種類を選びます。

post(記事)page(固定ページ)にチェックを入れます。

固定ページに目次を表示させたくない方はpageのチェックをはずしてください。

・見出しテキスト

「目次の上に見出しを表示」にチェックを入れます。チェックを入れないと見出し名が表示されません。

次に、見出しの名前を入力します。

基本的には【見出し】や【目次】で良いです。

・表示非表示切り替えボタンのテキスト

チェックを入れます。

次に表示ボタンの名前、非表示ボタンの名前を決めます。

スポンサーリンク

【表示する】【表示しない】で良いでしょう。

・初期状態非表示

チェックを入れると目次が非表示になります。最初から目次を公開したい場合はチェックを入れないでください。

・階層表示

見出しを段落に分ける(h2タグの下のh3タグなどを階層表示)ことができます。

チェックを入れます。

・番号振り

見出しに番号を付けます。自動で番号が付けられますが好みが分かれるので付けたくない人はチェックをはずしてください。

・スムーススクロール

チェックを入れると目次をクリックすると目的の見出しまでなめらかにスクロールします。こちらもお好みで。

・デザイン

目次の見た目をカスタマイズすることができます。

はじめはデフォルト状態で確認し、もう少し見た目を変えたいってときだけ変更しましょう。

・上級者向け

ここでは目次を表示させたくない記事やCSSデザインを反映させないようにするなど細かな設定ができます。基本的にはそのままで問題ないでしょう。

TOC+の設定例

僕のブログの設定を載せておきますので参考にしてみてくださいね。

toc-%e3%83%9d%e3%82%b9%e3%83%88%e3%83%ad%e3%82%b8%e3%82%af%e3%82%b9-wordpress

中央に表示させる方法

最初の見出しの上にアドセンスなど広告を表示させている方も多いと思います。

広告を中央表示にしているのに目次が左寄りだと見栄えも良くないですよね。

TOC+の設定内には中央表示の項目は無いのでCSSで記入します。

以下のCSSを

#toc_container { 
  margin-left: auto; 
  margin-right: auto; 
}

ダッシュボード→外観→CSS編集

に入力すると中央表示になります。プレビューボタンでかならず表示を確認し問題なければ保存します。

これが↓

table-of-contents-plus%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9

こうなります↓

table-of-contents-plus%e3%81%a7%e4%b8%ad%e5%a4%ae%e8%a1%a8%e7%a4%ba

ちゃんと真ん中に表示されていますね。

まとめ

TOC+は長い記事を書いて見出しが増えたときに役に立ちます。

また、見出しがあることで読者さんがすばやく目的の情報にたどり着くことができますよね。

時間短縮はユーザビリティー向上にも役に立つのでぜひ参考にしてみてくださいね。

スポンサーリンク



まだデータがありません。