公開日：2022/10/11
更新日：2023/06/08

Bloggerの目次の作り方

Googleが提供する無料ブログサービス「Blogger」には、標準で目次を表示する機能がありません。

この記事では、Bloggerで目次を手動で作成する方法を説明します。

目次を自動表示するテンプレートもご紹介しますので、合わせてご覧ください。

目次を作成するHTML

ここではBloggerでHTMLを編集して、目次を手動で作成する方法をご紹介します。

HTMLを編集と言っても、実際にはコピー&ペーストの簡単な作業で目次を作成できますのでご安心ください。

今回作成する目次の参考画像と使用するHTMLは、以下の通りです。

<div style="border-bottom: 1px solid #333; border-top: 1px solid #333;  margin: 10px 20px; padding: 28px 24px;">
<div style="color: #333; font-size: 18px;">目次</div>
</div>

上下の罫線は、「border-top（上）」「border-bottom（下）」で指定できます。

線の太さ（例：1px）、種類（例：solid）、色（例：カラーコードの#333）をそれぞれ変更できます。

線の種類は、シンプルなsolidの他にも「double（2本線）」「dashed（破線）」「dotted（点線）」などがありますので、お好みに合わせて変更してください。

上下左右の余白は「margin（外側）」「padding（内側）」で指定できます。

見出しの上にある「目次」の文字は、「color（文字色）」「font-size（文字の大きさ）」で変更してください。

本記事「Bloggerの目次の作り方」セクションでは、実際に上記のHTMLを使用して、目次を作成する手順を説明しています。

Bloggerの目次の作り方

Bloggerで目次を手動で作成する方法をご紹介します。

Bloggerの管理画面を開き、新しい投稿ボタンを押します。

見出しを作成するため、①見出しを作成したい位置にカーソルを置き、②ツールバーの段落プルダウンを選択します。

見出しを選択します。

見出しにしたい文章（例：見出し1）を入力します。

今回は例として2つ見出しを作成します。①見出しを作成したい位置にカーソルを置き、②ツールバーの標準プルダウンを選択します。

小見出しを選択します。

①見出しにしたい文章（例：見出し2）を入力し、②画面左上の鉛筆アイコンを選択します。

HTMLビューを選択します。

目次に追加したい見出しのタグ（例：h2,h3）に①id="toc1"、②id="toc2"とそれぞれ画像を参考に入力します。このとき、idの前後には「半角スペース」を入れて入力するようにしてください。

①目次を設置したい場所に「目次を作成するHTML」セクションにあるHTMLをコピーし、画像を参考にペーストします。②画面左上のコードアイコンを選択します。

作成ビューを選択します。

①画面右側のパーマリンクを選択し、②リンクを選択してCtrl + Cでコピーします。

①目次の下にカーソルを置き、②ツールバーの「リンクを挿入または編集」を選択します。

①表示するテキストに「目次に追加したい見出し（例：見出し1）」、②リンクを貼り付けまたは検索に「コピーしたパーマリンクと見出しのid」を入力します。ここでは見出し1を追加するため、idは「id="toc1"」のtoc1に#を付けた「#toc1」を入力します。③入力を終えたら適用を選択します。

これで目次に見出しを追加できました。今回は2つ見出しを作成したため、同じ手順で見出しを追加していきます。