G Tips

Bloggerの目次の作り方

  • Release

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で目次を手動で作成する方法をご紹介します。

作業時間:5分

新しい投稿ボタンを押す

新しい投稿ボタンを押す

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

プルダウンを選択する

見出しを作成する

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

見出しを選択する

見出しを選択する

見出しを選択します。

見出しを作成する

タイトルを入力する

見出しにしたい文章(例:見出し1)を入力します。

プルダウンを選択する

2つ目の見出しを作成する

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

小見出しを選択する

小見出しを選択する

小見出しを選択します。

2つ目の見出しを作成する

見出し2を作成する

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

HTMLビューを選択する

HTMLビューを選択する

HTMLビューを選択します。

idを入力する

idを入力する

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

HTMLを貼り付ける

目次のCSSを貼り付ける

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

作成ビューを選択する

作成ビューを選択する

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

パーマリンクを取得する

パーマリンクを取得する

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

リンクを挿入する

リンクを選択する

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

目次の項目を設定する

目次の項目とリンクを設定する

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

見出しを追加できた

目次に見出しを追加できた

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

目次を作成できた

公開ボタンを押す

目次に全ての見出しを追加できました。目次内のリンクを選択すると、その項目に移動できるかどうか実際に確認してみましょう。動作を確認するには、画面右上の公開ボタンを押します。

確定を選択する

確定を選択する

「投稿を公開しますか?」ダイアログボックスが表示されます。確定を選択します。

表示を選択する

表示を選択する

自動的にBloggerの管理画面に切り替わります。先ほど公開した投稿の表示を選択します。

見出しを選択する

見出しを選択する

目次内の見出し(例:見出し2)を選択します。

選択した見出しに移動できた

見出しに移動した

目次内の見出しを選択すると、選択した見出しまで画面が自動的にスクロールします。これで目次を作成することができました。

目次を自動表示するテンプレート

Blogger用有料テンプレート「Orange ZELO」「Prime ZELO」には、目次を自動で生成する機能があります。

目次

投稿の中に見出しが3つ以上あると、上記画像のような目次が自動で生成されます。

目次を手動で作成する手間を省くことができるため、見出しの多い記事を書くときは非常に便利です。

「Orange ZELO」「Prime ZELO」は、下記リンクから2つセット3,000円(税込)で購入できます。

テーマ単体の価格は2,000円(税込)ですので、セットで購入するとお得です。

テーマの詳細についても説明していますので、ぜひ一度チェックしてみてください。

Bloggerテーマセット【Orange ZELO】・【Prime ZELO】

このページを見ている人におすすめの商品