読者に見やすい目次表
wordpressブログに目次表を導入すると、読者の見やすさが改善されます。
たとえば下図は自身ブログで用いている目次表の一例です。
ブログの導入部分に目次表があることで、そのコンテンツの概要が掴めるからです。
今日はそんな目次表のhtml/cssでの作り方を記事にしてみました。
目次表作成のためのhtml/cssコード
自身が使っている目次表は、下記の例示の要領でコードで利用しています。
<div style="display: inline-block; background: #008000; padding: 5px 10px; color: #ffffff;"><strong>目次</strong></div>
<div style="background: #ffffff; padding: 10px; border: 5px solid #008000;"><a href="#a">◇ h1など見出しタグと目次併用の効果</a> <br />
○ <a href="#a1">wordpressブログ見栄え改善には目次を利用する</a><br />
○ <a href="#a2">ワードプレスブログでの目次の使い方</a><br />
○ <a href="#a3">目次とh1など見出しとのレイアウト</a><br />
<a href="#b">◇ 目次からh1やh2、h3見出しリンクでSEO対策</a><br />
○ <a href="#b1">ブログ記事の目次と見出しを紐付ける</a><br />
○ <a href="#b2">ワードプレス記事目次リンクのビジュアルエディタでの作り方</a><br />
○ <a href="#b3">wordpress目次リンクhtmlでの作り方</a><br />
<a href="#c">◇ ブログの印象は目次で決まる</a><br />
○ <a href="#c1">来訪者は目次で読み続けるか否かを判断する</a><br />
○ <a href="#c2">wordpress目次作成にはhtmlとプラグインがある</a></div>
それぞれ文字列部分を記事内容に応じて変更すれば、目次表のテンプレートとして使うことが出来ます。
また、目次表の#a1などとアンカー機能を使うことで、文字列部分から見出しとリンクして飛ばす方法も可能です。
目次表と見出しリンクの作り方
目次表と見出しをリンクさせるには、該当する見出しの段落をクリックしてアクティブ状態にします。
たとえば上図では見出し『wordpressブログ見栄え改善には目次を利用する』の段落頭をクリックして、右上のアンカーアイコンをクリックします。
そして先ほど目次表で登録しておいた#a1とリンクさせるために、ここではアンカーボックスへ『a1』と入力します。
こうすることで目次表の『wordpressブログ見栄え改善には目次を利用する』をクリックすれば、ページ内にある見出し『wordpressブログ見栄え改善には目次を利用する』へジャンプすることが可能となり、読者が見たい部分へすぐ移動することが可能となります。