目次
目次
ゴール
WordPressのプラグインであるTable of Contents Plusを使って下の画像のような目次を生成することを目指します。
必要なもの
必要なもの | 価格(円) | ||
---|---|---|---|
1 | PC | ピンキリ | |
備考 | インターネット接続可能なこと | ||
2 | WordPressのアカウント | 無料 | |
備考 | 持っていない場合は、こちらを参照→WordPressのインストール方法 | ||
3 | Table of Contents Plus | 無料 | |
備考 |
Table of Contents Plusで目次作成
Table of Contents Plusのインストール
Table of Contents Plusのインストール方法をまとめます。
WordPressにログインし、左側のメニューでプラグインを選択します。
下の画像の様にプラグインの画面で”新規追加”ボタンをクリックします。
するとプラグインを追加する画面が表示されるので、右上にある検索フォームにTable of Contents Plusと入力します。
検索結果で下の画像の様に表示されたTable of Contents Plusをインストールします。
Table of Contents Plusの設定
Table of Contents Plusがインストールできたら基本設定を設定します。
基本設定項目
Table of Contents Plusの基本設定項目はいくつかあります。
概略をまとめました。
基本設定項目 | 概要 | |
---|---|---|
1 | 位置 | 目次の表示の位置を選ぶことができます。好みで決めましょう。本記事では”最初の見出しの後”にしています。 |
2 | 表示条件 | 目次を表示させる条件として見出しの個数を設定できます。本記事では”2つ”にしています。 |
3 | 自動挿入するコンテンツタイプ | post/page/custom.css/customize_changeset/feedbackを選択できます。基本的にはpost/pageのみでいいでしょう。 |
4 | 見出しテキスト | 目次のタイトルを設定できます。本記事では”目次”としています。 |
5 | 階層表示 | 目次を階層表示にするか/しないかのチェックボタンです。本記事ではチェックしています。 |
6 | 番号振り | 自動で目次の項目に対して章番号をつけるかどうかのチェックボタンです。本記事ではチェックしています。ただし、自分で章を作成すると目次上で二重に表示されてしまうので注意が必要です。 |
7 | スムーズ・スクロールの有効化 | 目次に表示されている項目をクリックしたときの移動方法としてジャンプかスクロールのどちらかを選択できます。好みで決めましょう。本記事はジャンプにしてます(チェックなし) |
8 | 横幅 | 目次の横幅のサイズを設定できます。デフォルトで問題ないと思います。 |
9 | 回り込み | 目次を左右に回り込み設定できます。デフォルト(なし)で問題ないと思います。 |
10 | 文字サイズ | 目次の文字サイズを指定できます。デフォルトで問題ないと思います。 |
11 | プレゼンテーション | 目次の文字色と背景色を選択できます。(グレー/水色/白/黒) 本記事はグレーです。 |
目次作成
基本設定がすんだらさっそく目次を作ってみましょう。
以下のサンプルコードを投稿画面に入力し、プレビューしてみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h2>目次</h2> 目次です。 <h2>ゴール</h2> 本記事の目標はxxxです。 <h2>必要なもの</h2> 必要なものはxxxです。 <h2>Table of Contents Plusで目次作成</h2> Table of Contents Plusで目次作成します。 <h3>Table of Contents Plusのインストール</h3> Table of Contents Plusをインストールします。 <h3>Table of Contents Plusの設定</h3> Table of Contents Plusの設定をします。 <h4>基本設定項目</h4> 基本設定項目は・・・・ <h4>目次作成</h4> 最後に目次作成しましょう。 |
下のように最初のh2タグ(目次)のしたに目次が自動でできあがるはずです。
以上!