このページではそのh2を利用して、目次を自動的に生成する方法について取り上げます。
手動でページ内リンクを作成しなくても目次が出来上がるので、時間がない方やブログ運営を少しでも楽にしたいと思っていらっしゃる方はご利用くだざい。
導入するためにほんのちょっとだけ手間がかかりますが、一度導入してしまえばその後が楽になりますよ。
もくじ
このページで作るもくじの概要
- 目次に表示させる文は記事中で使われているh2タグで囲まれた見出しの文です
- その見出し文をリスト形式（<li></li>）に変換して目次に表示させています
- 目次に表示されたリストをクリックすると、該当するh2タグにジャンプします（ページ内リンク）
- 目次の開閉ボタンは用意していません（初めからもくじが開いている状態）
- h2タグにidが設定されている場合、そのid名はページ内リンクを生成するための新たなid名に上書きされ、消えてしまいます
もくじに開閉ボタンを付けたり、h3やh4を含めて表示することも可能ですが、すべてを紹介すると記事が複雑になってしまうので、ここでは一番シンプルなもくじだけを紹介することにしています。
もくじの使用方法
以下の手順１と手順２のコードを貼り付け、さらにもくじのデザインをスタイルシート部分に指定して下さい。
最後に手順４で挙げる「もくじを生成するためのコード」を記事ページのHTMLに記述するともくじが出来上がります。
手順１ jQueryのCDNを<head>内に貼り付ける
※jQueryをすでにご利用の場合はこの手順１は不要です。
「テーマ」→「HTMLの編集」をクリックし、以下のjQueryのCDNを</head>のすぐ上に貼り付けます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"/>
貼り付ける場所
上記のCDNは２０１９年４月現在で最新のものであることを確認していますが、気になる方は以下のアドレスから最新のバージョンをご確認ください。
https://developers.google.com/speed/libraries/
https://code.jquery.com/
そもそも「jQueryが使われているかどうかさえ分からない」という場合は、検索欄に「jquery」と打ち込んで、上記コードと似たものがないか探してみてください。
海外製のテンプレートでは初めからjQueryのCDNが使用されているものもあります。
（CDNが二重になるとページの読み込み速度が遅くなります）
手順２ もくじのコードを<body>内に貼り付ける
番号なしリスト（ul）と番号ありリスト（ol）の両方のコードを以下で載せています。
どちらかコピーして「HTMLの編集」の中の</body>の上に貼り付けてください。
テンプレートにもよりますが</body>の場所はHTMLの一番下、</html>のひとつ上に位置していることが多いので，編集画面を一番下まで移動させてしまうと探すのが簡単です。
貼り付ける場所
もくじのコード（ul）
<script>
//<![CDATA[
$(function(){var toc = '<div class="toctitle">もくじ</div><ul>';var count = 0;$('.post-body h2').each(function (){count++;this.id = 'chapter-' + count;toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';});toc += '</ul>';$('#toc').html(toc);});
//]]>
</script>
もくじのコード（ol）
<script>
//<![CDATA[
$(function(){var toc = '<div class="toctitle">もくじ</div><ol>';var count = 0;$('.post-body h2').each(function (){count++;this.id = 'chapter-' + count;toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';});toc += '</ol>';$('#toc').html(toc);});
//]]>
</script>
コードを展開したものも載せておきます。
もくじのコード（ul）
<script>
//<![CDATA[
$(function(){
var toc = '<div class="toctitle">もくじ</div><ol>';
var count = 0;
$('.post-body h2').each(function (){
count++;
this.id = 'chapter-' + count;
toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';
});
toc += '</ol>';
$('#toc').html(toc);
});
//]]>
</script>
もくじのコード（ol）
<script>
//<![CDATA[
$(function(){
var toc = '<div class="toctitle">もくじ</div><ul>';
var count = 0;
$('.post-body h2').each(function (){
count++;
this.id = 'chapter-' + count;
toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';});
toc += '</ul>';
$('#toc').html(toc);
});
//]]>
</script>
手順３ スタイルシートにデザインを指定する
検索窓に]]></b:skin>と入力し、このコードの上にもくじのデザインを指定します。
シンプルなもくじの例を1つ挙げておきますが、サルカワさんのサイトではおしゃれなリストがたくさん紹介されているので参考にしてみてください。
以下のページで紹介されているコードのセレクターに#tocを付けるともくじのリストに対応させることができます。
https://saruwakakun.com/html-css/reference/ul-ol-li-design
以下のページの場合はh1と書かれている所を、もくじ全体を表す#tocに変えるか、もくじのタイトル部分を表す.toctitleに変更すると対応させることができます。
https://saruwakakun.com/html-css/reference/h-design
シンプルなもくじの例
もくじ
- 見出し
- 見出し
- 見出し
#toc{/*もくじ全体*/
background:#f8f9fa;/*背景色*/
border:1px solid #a2a9b1;/*枠線*/
border-radius:1px;/*枠線の角の丸み*/
font-size:90%;/*文字の大きさ*/
padding: 7px;/*もくじの枠線ともくじ内の文字の距離*/
width:80%;/*もくじの幅*/
}
.toctitle{/*もくじの一番上に表示する文字列*/
margin:0.5em 0 0.5em 1em;
}
#toc ol, #toc ul{
padding: 0;
margin:0 0 0 2em;
}
#toc ol li, #toc ul li{/*もくじのリスト*/
margin:0 0 0.5em 2em;
background:inherit;
line-height:1em;
}
#toc a{/*リストに生成されるタグの最も内側はaタグになります*/
text-decoration:none;/*アンダーラインを消す場合*/
color:inherit;/*別のところでリンク色を指定している場合に、もくじに生成されるリストの文字色だけ変える場合は色を指定する*/
}
手順４ もくじを表示させたい場所に<div id="toc"></div>を記述する
ここまで「HTMLの編集」を開いてコードを変更してきましたが、この手順4のコードは、もくじを表示させたい記事ページの「HTML」に記述します。
もくじを表示させたい場所に、以下のように<div id="toc"></div>を書き込みます。
毎回記述せずに済ませる方法
毎回ブログを書くたびに<div id="toc"></div>を記述したり、別な所からコピーして貼り付けるのは面倒という場合は、以下のように設定しておくと便利です。
- 「設定」をクリック
- 「投稿・コメント・共有」をクリック
- 「投稿テンプレート」の空欄に<div id="toc"></div>と記述
- 「設定を保存」をクリック
投稿テンプレートにコードを記述しておくと、そのコードが記事ページのHTMLに毎回記述された状態で新しい記事を書き始めることができます。
記事を書き終えた後に、生成されている<div id="toc"></div>を範囲選択し、ctrl+xで切り取って、もくじを表示させたい場所でctrl+Vで貼り付ければ、毎回コードを記述せずに済みますね。
これでもくじの生成方法の基本的な説明は終わりです。
「もくじ」という表記を変更する場合
もくじの一番上に表示される文字列は、コード内の<div class="toctitle"> </div>で囲まれた「もくじ」と書かれている箇所です。
var toc = '<div class="toctitle">もくじ</div><ul>';
この「もくじ」という表記を「目次」「概要」「この記事の目次」「この記事の要約」「もくじで要約」「index」「contents」などに変更する場合は「もくじ」という記述を削除して、お好みの文字に変えてください。
「もくじ」にh2を設定する場合
初期設定ではもくじの一番上に表示する文字列（「もくじ」）にdivタグを使用しています。
ここにh2やh3を設定し、見出しとして扱うには、jQueryのコードの中の
<div class="toctitle">もくじ</div><ol>
<h2 class="toctitle">もくじ</h2><ol>ちなみにwikipediaのもくじでは、この場所に<h2>使われていますね。
idに関する注意点
このページで紹介しているもくじを生成するコードは、記事中のh2のidに「chapter-○○」という値を付与することでページ内リンクを生成させています。
たとえば以下のHTMLにもくじを導入すると、さらにその下にあるようにh2タグにidが自動で付与されます。
もくじ導入前と導入後のid名の変化 例１
もくじ導入前
<h2>見出し</h2>
<h2>見出し</h2>
<h2>見出し</h2>
もくじ導入後
<h2 id="chapter-1">見出し</h2>
<h2 id="chapter-2">見出し</h2>
<h2 id="chapter-3">見出し</h2>
この変化はh2タグにidが設定されていない場合は特に問題ありません。
しかしすでに何らかのidがh2タグに付与されている場合、そのid名がchapter-○○に上書きされてしまうため、思わぬ問題が生じます。
例えばcssのセレクターにh2タグのid名を指定してデザインを整えている場合、そのデザインが崩れてしまいます。
あるいはページ内リンクの移動先にh2タグを使用していて、なおかつそれをid名で指定している場合、そのリンクは機能しなくなります。
h2にidが設定されている場合のidの変化 例２
もくじ導入前
<h2>idがない見出し</h2>
<h2 id="midasi">midasiというid名が付いているみだし</h2>
<h2 id="mezasi">mezasiというid名が付いているみだし</h2>
もくじ導入後
<h2 id="chapter-1">idがない見出し</h2>
<h2 id="chapter-2">midasiというid名が付いているみだし</h2>
<h2 id="chapter-3">mezasiというid名付いているみだし</h2>
ページ内リンクを設定している場合のid名の変化 例３
もくじ導入前
<span><a href="#midasi">見出しに飛びます</a></span>
<h2 id="midasi">見出し</h2>
もくじ導入後
<span><a href="#midasi">見出しに飛びます</a></span>
<h2 id=chapter-1">見出し</h2>
こういった想定外のことが起きないようにするため、もくじを導入する際はh2タグにidが使われていないかご確認ください。
HTMLの設計上、ひとつのタグに複数のidを設定することはできないので、新たなid名を付与すると、それまで使用していたid名が上書きされて消えてしまうのは仕方がないんですよね・・・
ではすでに使用しているid名を残したまま目次を利用することはできないの？ということですが、それについては下記の記事で取り上げています。
見出しに付けたid名を流用して目次を作る
hタグにidを設定している場合やidを設定する可能性のある場合は、こちらを参考になさってください。
おわりに
たとえばページ内リンクや余白の設定、親要素と子要素の関係、id属性に関するルールとif文による条件分岐、さらにもくじにアイコンを挿入するためにfontawesomeの知識が必要になったりと、習字に例えるならもくじは永字八法みたいなものですね。
思い描いているもくじをウェブ上で再現できたら初心者卒業かな・・・
参考にさせていただいたサイト
http://10251.net/jquery-toc-without-plugins
0 件のコメント:
コメントを投稿