ブログ記事の目次を美しくデザインするCSSスタイルテクニック

ブログ記事が長い場合、目次を表示してそのブログ記事に記載されている内容を知らせてあげると訪問者も読みやすくなります。WordPressではプラグインを利用することで自動で見出しを設置することは可能ですが、できるかぎりプラグインの使用は避けたいところです。また、すべてのページに目次が必要かというと、そうではないケースも出てきます。

そこで今回は、WordPressプラグインを使用せず自作でマークアップしCSSにてスタイリングする方法をご紹介します。

ブログ記事の目次のベースを用意する

まずは、ブログ記事の目次のベースとなるHTMLとCSSを用意します。かなりシンプルにマークアップしてます。

ベースのHTML

<ol class="heading_list01">
  <li>目次見出し1
      <ol>
        <li>目次見出し1の子1
          <ol>
            <li>目次見出し1-1の子1</li>
            <li>目次見出し1-1の子2</li>
            <li>目次見出し1-1の子3</li>
          </ol>
        </li>
        <li>見出し1の子2
          <ol>
            <li>目次見出し1-2の子1</li>
            <li>目次見出し1-2の子2</li>
            <li>目次見出し1-2の子3</li>
          </ol>
        </li>
      </ol>
  </li>
  <li>目次見出し2</li>
  <li>目次見出し3</li>
</ol>

ベースのCSS

.toc{
	font-size: 1.6rem;
	line-height: 2.0
}

.toc ol{
	counter-reset: hl_count;
	list-style: none;
}
.toc li{
	counter-increment: hl_count;
}
.toc li:before{
	content: counters(hl_count, "-")
}

liの中にolを入れ子にして階層的にマークアップし、CSSにてcontent: counters(hl_count, "-")で指定することにより、『目次見出し1』の子は『1-1』、「目次見出し1-1』の子は『1-1-1』と連番で階層化することができます。

実際の表示

上記のHTMLとCSSの場合、実際の表示は以下のようになります。

目次見出し1
1. 目次見出し1の子1
  1. 目次見出し1-1の子1
  2. 目次見出し1-1の子2
  3. 目次見出し1-1の子3
2. 目次見出し1の子2
  1. 目次見出し1-2の子1
  2. 目次見出し1-2の子2
  3. 目次見出し1-2の子3
目次見出し2
目次見出し3

これをベースとしてスタイリングしていきます。

目次をスタイリングする1

先ほどのHTMLをスタイリングしていきます。連番をふった所に背景をつけてリストマークのように表示させております。また、階層が分かりやすいように階層が深くなる毎にインデントさせて、視覚的に分かりやすくしてみました。

目次の実際の表示

実際の表示が以下のものになります。

目次見出し1
1. 目次見出し1-1
  1. 目次見出し1-1-1
  2. 目次見出し1-1-2
  3. 目次見出し1-1-3
2. 目次見出し1-2
  1. 目次見出し1-2-1
  2. 目次見出し1-2-2
  3. 目次見出し1-2-3
目次見出し2
目次見出し3

HTMLに追記

HTMLは先ほどの同様のものになりますが、サンプルでは連番の部分のみにGoogleフォントを使用して表示させておりますので、<head>〜</head>内などに以下を追記します。

<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">

CSS

CSSを記述します。先ほどのベースのCSSに追加してまとめてご紹介しております。フォントカラーや連番部分の背景色などの変更がしやすいように項目毎に分けてコーディングしてありますので、気になる方は修正してみてください。

.toc{
	margin: 0 auto;
	padding: 3em;
	font-size: 1.6rem;
	background-color: #f2f2f2;
}

/*-- カウントセット --*/
.toc ol{
	counter-reset: hl_count;
	list-style: none;
}
.toc li{
	counter-increment: hl_count;
}
.toc li:before{
	content: counters(hl_count, "-")
}

/*-- base style --*/
.toc ol ol,
.toc li ol li{
	margin-top: .5em;
}

.toc li:before{
	margin-right: .5em;
	padding: .1em .5em;
	text-align: center;
	border-radius: 4px;
	font-family: 'Merienda', cursive;
}

.toc li{
	padding-left: 1em;
	text-indent: -1.7em;
}
.toc li ol li{
	padding-left: 1em;
	text-indent: -3em;
}
.toc li ol li ol li{
	padding-left: 1em;
	text-indent: -4em;
}

.toc li ol{
	margin: 0 0 1em 1.7em;
}
.toc li ol li ol{
	margin-left: 3em;
}

.toc span:after{
	content: ' ';
	display: block;
	height: .6em;
}

/*-- font-color & background --*/
.toc li:before{
	color: #fff;
	background-color: #444;
}

/*-- font-size --*/
.toc li:before{
	font-size: 1.3rem;
}
.toc li{
	font-size: 1.5rem;
	font-weight: bold;
}
.toc li ol li{
	font-size: 1.3rem;
	font-weight: normal;
}

font-family: 'Merienda', cursive;の部分がGoogleフォントの設定です。もし、サイトデフォルトのフォントを使用したい方は削除してください。

目次へ

目次をスタイリングする2

連番部分のスタイルを変えて、括弧がついているように表示させます。

目次の実際の表示

実際の表示が以下のものになります。

見出し1
1. 目次見出し1-1
  1. 目次見出し1-1-1
  2. 目次見出し1-1-2
  3. 目次見出し1-1-3
2. 目次見出し1-2
  1. 目次見出し1-2-1
  2. 目次見出し1-2-2
  3. 目次見出し1-2-3
目次見出し2
目次見出し3

HTMLに追記

連番の部分のみにGoogleフォントを使用して表示させておりますので、<head>〜</head>内などに以下を追記。

<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">

CSS

先ほどのものと同様にスタイルの変更がしやすいように項目毎に分けてコーディングしてあります。気になる方は修正してみてください。

.toc{
	margin: 0 auto;
	padding: 3em;
	font-size: 1.6rem;
	background-color: #f2f2f2;
}

/*-- カウントセット --*/
.toc ol{
	counter-reset: hl_count;
	list-style: none;
}
.toc li{
	counter-increment: hl_count;
}
.toc li:before{
	content: counters(hl_count, "-")
}

/*-- base style --*/
.toc ol ol,
.toc li ol li{
	margin-top: .5em;
}

.toc li:before{
	margin-right: .5em;
	padding: .1em .5em;
	text-align: center;
	font-family: 'Merienda', cursive;
}

.toc li{
	padding-left: 1em;
	text-indent: -2em;
}
.toc li ol li{
	padding-left: 1em;
	text-indent: -3.3em;
}
.toc li ol li ol li{
	padding-left: 1em;
	text-indent: -4.3em;
}

.toc li ol{
	margin: 0 0 1em 1.9em;
}
.toc li ol li ol{
	margin-left: 3.4em;
}

/*-- font-color & border --*/
.toc li:before{
	color: #333;
	border-right: 2px solid #333;
	border-left: 2px solid #333;
	border-radius: 5px;
}

/*-- font-style --*/
.toc li:before{
	font-size: 1.3rem;
}
.toc li{
	font-size: 1.5rem;
	font-weight: bold;
}
.toc li ol li{
	font-size: 1.3rem;
	font-weight: normal;
}

font-family: 'Merienda', cursive;の部分がGoogleフォントの設定です。もし、サイトデフォルトのフォントを使用したい方は削除してください。

目次へ

手作業でのブログ記事の目次マークアップとなりますが、確実に表示させることができる方法だと思います。私もプラグインを利用してみようかと考えましたが、もしプラグインの更新が滞ってしまったら…などと考えていると、目次については手作業が一番いいのかなと今は考えております。

おそらくWordPressプラグインで使用されているHTMLも、今回のものとさほど変わらないかと思います。もしプラグインを使用されている方は、今回の目次スタイルをぜひ使ってみてください。