もくじを自動で作成。WordPressプラグイン「Table of Contents Plus」導入&初期設定
2017/01/31
こんにちは、okutani(@okutani_t)です。当ブログvdeepはWordPressを使って運営しているのですが、簡単にもくじを設置できるプラグインがあったらいいなーと思って検索したら、ありました。その名も「Table of Contents Plus」。
Hタグに合わせて自動でもくじを作成してくれる、便利なプラグインです。
また、CSSで簡単にレイアウト設定と、任意の記事だけもくじを設定する方法も合わせて載せておきます。
ではさっそく導入していきましょう。
スポンサーリンク
もくじ
Table of Contents Plusの導入
ダッシュボードから「プラグイン」→「新規追加」をクリック。
右上の検索バーに「Table of Contents Plus」と入力して検索、「いますぐインストール」を選択。
有効化しておきましょう。
Table of Contents Plusプラグインの導入が完了しました。
基本的な設定をおこなう
初期設定を行っていきます。
ダッシュボードから「設定」→「TOC+」をクリック。設定画面が表示されます。
もくじを表示する位置
Main Optionsタブが開いた状態で「Position」からもくじを表示する場所を選択。私は「Before first heading」にしました。
- Before first heading
- After first heading
- Top
- Bottom
一番目の見出しの上に表示
一番目の見出しの下に表示
記事の一番上に表示
記事の一番下に表示
表示タイミングと記事の種類
「Show When」でHタグが◯個以上ある場合に表示する、という設定が行えます。「Auto insert for the following content types」で表示する記事の種類を設定。
今回はブログに設定するので「post」にチェックしました。
もくじのタイトルと表示・非表示
「Heading text」で表示するもくじにタイトルをつけることが出来ます。「Show text」と「Hide text」を設定するとユーザーがもくじを「隠すor開く」が選択できるようになります。
階層表示・番号表示・滑らかなスクロール
それぞれ以下の設定が行えます。
- Show hierarchy
- Number list items
- Enable smooth scroll effect
もくじの階層を表示
もくじに番号をつける
もくじを選択すると滑らかにスクロールしながら移動
全てにチェックを入れました。
横幅・表示位置・文字の大きさ
もくじのデザインをある程度設定出来ます。
- Width
- Wrapping
- Font size
もくじの横幅を選択
もくじの位置を選択。左寄せか右寄せを選ぶことができる
もくじの文字の大きさを選択
今回は特に設定しませんでした。
デザイン設定
「Presentation」からデザインを選択できます。お好きなデザインを選択。
私は「Grey」を選択しました。
表示するHタグの指定
「Advanced」の隣のshowを選択→詳細設定を開きます。
「Heading levels」から表示させたいHタグを選ぶことが出来ます。例えばH2・H3タグだけにチェックを入れれば二階層のもくじが作成されますね。
設定が終わったら「Update Options」を選択して保存。
次のようなもくじが自動で表示されました。
CSSでレイアウトを整える
デフォルトだと少し見にくいので、CSSで装飾します。次のコードをCSSファイルに記述します。
div#toc_container {
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
padding: 15px 20px;
border: 2px solid #E0E0E0;
}
div#toc_container p.toc_title {
font-size: 1.1em;
}
軽く解説。
- margin-bottom
- margin-left, margin-right
- font-size
見出しとの距離を設定
見出しを中央揃えに
もくじタイトルを少し大きく
こんな感じになります。
お好きな様にレイアウトしてみてください。
もくじの表示・非表示を任意で指定する方法
この方法で好きな場所にもくじを挿入できるように。
任意の記事だけもくじを表示
任意の記事を選んで表示するには、先ほどの設定画面にある「Auto insert for the following content types」のチェックを全て外します。
こうすうると全てのページでもくじが非表示になりますが、下記コードを記事内に貼り付けることで、任意の記事にもくじを挿入することができます([]は小文字で入力してください)。
[toc]
任意の記事だけもくじを非表示
常にもくじを表示するが、任意の記事だけ非表示にしたい場合。「Auto insert for the following content types」の「post」にチェック。
もくじが自動的に表示されます。下記コードを非表示にしたい記事に貼り付けることで、任意の記事だけもくじを表示させないようにできます。
[no_toc]
Table of Contents Plusプラグインの設定は以上です。お疲れ様でした。
まとめ
このプラグインを使うことで、簡単にもくじを挿入することができました。
文量が多い記事にもくじは必須かと思われるので、まだ導入していない方はこの機会にどうぞ。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。
「Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク