[toc heading_levels="1,2,3"]

[icon name="book" class="" unprefixed_class=""] WordPressにおける目次導入の意義

なぜ見出しや目次をつけるのか？
目次はシンプルな方がよい
WordPressは目次が作りやすい
h1〜h3の見出しを階層的に並べる
見出しの大きさにもバランスを考える
プラグインのインストール
上級者向けの設定
目次カスタマイズのためのCSSコード
ショートコードの活用

なぜ見出しや目次をつけるのか？

本の場合と同じように、WordPressにおいても「目次」や「見出し」は大事だ。読者の注目を集めるとともに、読者の労力を節約してくれるからだ。必要なところだけを拾い読みするためにも、書き手は目次や見出しをわかりやすくつけることに腐心する。

第二の理由は、著者が記事全体の構成をきちんと頭に入れておいた上で書き進めることができるという利点もある。そのおかげで、議論が脱線したり、構成が偏ったり、尻切れトンボになったりすることを防ぐことができる。

ただし、紙の本や論文では、このことがかなり意識されるが、WordPressでは、あまり意識されず、だらだらと書き進めてしまうことも少なくない。それは、見出しのつけかたがかなり恣意的になるからではないかと思う。そこには、WordPress（というかWeb全体）のアーキテクチャの問題も関連しているだろう。そもそも、Webには「ページ」とか「章節」の概念が希薄である。「改ページ」の機能はあるが、それは本のような厳密なページとは違う。目次をつくっても、ページをまたぐと章節が更新されてしまう。かといって、PDFにするのは、スマートフォン・ファーストの時代には好ましくない。

だからこそ、WordPressでは見出しや目次を絶えず意識しながら書き進めることが必要だと思う。とくに、いま「iシニアのブログ」で目次のついた記事をこれから増やしていこうと思っているので、「目次の美しい見出しのつけ方」にこだわりたいところだ。

目次はシンプルな方がよい

紙の本とは違って、WordPressの目次はあまり細かすぎない方がよい。紙媒体だと目次をとばして本文を読む進むことができるが、WordPressだと、目次をとばしてという読み方ができにくい。長い目次だと画面のスクロールに時間をとられ、ストレスになりかねない。したがって、WordPressでは、なるべく簡潔な目次の方が好まれるだろう。

もう一つ、WordPressの目次がシンプルにならざるを得ない理由のひとつは、目次の階層の深さが、通常3つまでと制限されているからということもあるかもしれない。　CSSで工夫すればもっと階層を増やせるのかもしれないが、わざわざそこまでして増やすこともないという気がする。見出しでいえば、h1からh3まで（記事タイトルがh1の場合はh2からh4まで）と限定して、見出しを考えるのが賢い見出しのつけかたではないかと思う。

WordPressは目次が作りやすい

紙の本や論文の場合、目次を作るのは一苦労である。編集者がもっともエネルギーを割く部分でもあるのではと思う。その点、WordPressならプラグインを適用するだけで、「見出し」のHTMLを手がかりとして、美しい目次を自動的に生成してくれるので便利だ。記事を執筆しながら、適当な見出しをつけていけば、その端から目次ができていくので、全体の構成を考えながら書き進めることもできる。専用エディターの「下書き保存」「プレビュー」機能を使えば、読者の見えないところで、この作業を行うことができる。

そのために欠かせないツールが、「プラグイン」だ。目次生成用のプラグインとして圧倒的な人気を誇るのは、「Table of Contents Plus」（以下、TOC+と略記）だ。私も愛用している。CSSを併用すれば、自分好みのスタイルの目次をつくり、文章中の好きな場所に挿入することができるので、大変便利である。詳しくは第4章で説明したいと思う。

ちなみに、この記事もTOC+で目次をつくりながら書き進めている。まだ実験段階だが、WordPressでは将来、こうした執筆方法が一般化するかもしれない。いや、すでにこのような方法で執筆しているブロガーの方も少なからずいるのではないかと推察される。

[phoe-icon name="fa-clipboard"] 見出しの大きさとHTML

これまで、私自身はブログを書くときに、目次がどんなものになるか、ということなどほとんど考えてこなかった。しかし、いざ目次つきのブログを本格的につくりたいと思ったとき、見出しのHTML要素をきちんと階層的に並べなければならないことに改めて気づいた。実際、TOC+を既存のブログ投稿記事に適用してみたところ、いわば「グジャグジャ」な状態の目次ができてしまい、ショックを受けた。これではいかん、と思い直しているところだ。

h1〜h3の見出しを階層的に並べる

これは、TOC+で目次をつくるときの原則だと思う。h1はタイトルのような大きな見出しだ。その次の中見出しはh2要素でつくる。そして、3番目の階層にくる下位見出しはh3でつくる。それ以下の見出しは、h4〜h6でつくる。ただし、h4〜h6の見出しは目次には表示されないないようにしておく。実際、h4〜ｈ6の見出しまで目次に含めると、目次が非常に見にくくなるだろうし、長くなりすぎるので冗長な印象を与えかねない。本の目次とはそこが異なっている。

見出しの階層は、必ずh1→h2→h3の順序で並べなければいけない。そうしないと、目次の見栄えが悪くなるからだ。私はCSSを使って、h1の見出しを何種類もつくっている。うっかりすると、h1見出しを異なる階層のように複数並べてしまいかねないので、注意が必要だ。この見出しはh1見出し、この見出しはh2見出しというように、きちんと覚えておかねばならない。

見出しの大きさにもバランスを考える

もう一つ注意したいのは、h1〜h3の見出しの大きさのデザインだ。CSSを使えば、同じh1でも、見出しのフォントの大きさを自由に変えられる。しかし、目次との関係を考えると、h1はいちばん大きくし、h3はいちばん小さくするというように、階層に応じたフォント・サイズを設定することが必要だろう。また、見出しのデザインも階層にふさわしいものにすることがのぞましい。見出しは、とにかく見た目が大事なのである。

「Table of Contents Plus」プラグインの適用

さて、見出しをHTMLによって階層的に並べることができたら、いよいよ「Table of Contens Plus」のプラグインを適用する。

プラグインのインストール

まずは、WP管理画面の「プラグイン」からTable of Contents Plusを検索して、WordPressにインストールする。インストールしたら、「設定」画面で、基本的な設定を行う。あるいは、WordPressの公式サイトからプラグインをダウンロードして目的のブログにインストールする。複数のブログにインストールする場合には、この方がよいだろう。

Table of Contents Plus

ja.wordpress.org

インストールが終わると、WP管理画面の「設定」からTOC+を選択すると、次のような設定画面が表示される。

基本設定では、

表示見出しの数がいくつ以上のときに目次を作るかの指定
「投稿記事」「ページ」のいずれか、あるいは両方を指定
目次の上につけるタイトル名を指定（日本語あるいは外国語）
ユーザーによる目次の表示、非表示の切り替えを許可するかどうかを指定
階層表示の有無の指定
番号ふりの有無の指定
目次のカラーを指定

などを行う。このうち、かなりの部分は、のちに述べるように、CSSでカスタマイズが可能である。デフォルトのデザインが気に入らなかったら、CSSで自分好みのデザインにするとよいだろう。

上級者向けの設定

TOC+のデフォルトで提供されている仕様は、無難ではあるが、どちらかというと無味乾燥で、あまり見栄えがいいとはいえない。また、好きなところに好きな仕様の目次を表示させたいときには、もう少し上級の設定をする必要がある。

あとで説明するように、CSSで目次のデザインをカスタマイズする場合には、上級設定で、「見出しレベル」のチェックをすべてはずしておいたほうがいいようだ。チェックを入れておくと、見出しの表示が乱れることがある。

TOC+のカスタマイズ

TOC+をカスタマイズすることによって、目次のデザインを変えるだけではなく、ブログの記事中の好きな位置に、好きな階層の見出しを目次として表示させることが可能になる。これは、執筆者が見てほしい内容を適切な位置に表示させることができるので、紙の本にはないWordPressならではの大きなメリットといえるだろう。

目次カスタマイズのためのCSSコード

それには、追加CSSの画面に次のようなCSSコードを書き込めばよい。

/* 目次 Table of Contents カスタマイズ  */

@import url('https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet2"'); 

#toc_container {
  margin-top: 25px;
  margin-bottom: 40px;
  padding: 15px 20px;
  background: #fff;
  border: 5px solid #e1eff4;
  border-radius: 2px;
  color: #666; }

#toc_container .toc_title {
  font-family: 'Dosis', "sans-serif", cursive; 
  text-align: center;
  margin-bottom: 35px;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0px;
  font-size: 1.5em;
  border-bottom: 2px solid #dedede; }

#toc_container .toc_list {
  list-style-type: none !important;
  counter-reset: li; }

#toc_container .toc_list > li {
  position: relative;
  margin-bottom: 15px;
  margin-left: 6px;
  line-height: 1.3em;
  font-size: 0.9em; }

#toc_container .toc_list > li:after {
  counter-increment: li;
  content: "0" counter(li) " |";
  position: absolute;
  left: -40px;
  top: 0px;
  background: none;
  font-family: "Unica One", cursive;
  font-size: 1.4em;
  letter-spacing: -1px;
  color: #008db7; }

#toc_container .toc_list > li a {
  text-decoration: none !important; }

#toc_container .toc_list > li a:hover {
  text-decoration: underline !important; }

#toc_container .toc_list > li ul {
  list-style-type: disc;
  margin-top: 15px;
  padding-left: 20px;
  color: #008db7; }

#toc_container .toc_list > li > ul li {
  font-size: 0.9em;
  margin-bottom: 8px; }

@media only screen and (min-width: 641px) {
  #toc_container {
    padding: 25px 40px; }

  #toc_container .toc_title {
    font-size: 2em; }

  #toc_container .toc_list > li {
    margin-bottom: 18px;
    margin-left: 12px;
    font-size: 1em; }

  #toc_container .toc_list > li:after {
    left: -48px;
    top: 0px;
    font-size: 26px; } }

目次において、フォントのデザインは見た目を決める重要なポイントになる。上のCSSコードでは、Googleフォントを活用している。次のサイトで自分の好きなフォントを選び、CSSコードを簡単に取得することができるので、入れ替えることによってバリエーションを楽しみたい。

https://fonts.google.com/

ショートコードの活用

次のショートコードをブログ内の任意の位置に挿入することによって、目次の表示位置や、含めたい見出しの種類を自由に指定することができる。ただし、1ブログ内に表示できる目次は1箇所のみである。

 [toc heading_levels="1,2,3"]

h1見出しだけを表示させたい場合には、"1"とすればいいし、h2とh3の見出しだけを表示させたい　場合には、"2,3"とすればよい。

このようにして、h1〜h3の見出しを階層的に並べておけば、TOC+のカスタマイズ設定により、好きな位置に好きな階層の見出しを表示させることができるのである。本ブログでも、必要に応じて適切な形でTOC+目次を有効に活用していきたいと思う。

美しい目次のためのHTMLの作法