はてなブログでは、記事の見出しから目次を自動的に作成する「目次記法」を利用できます。レビューや論評、技術ブログなど章立てされた長い記事を書いたとき、記事中の見出しにリンクされた目次を、記事の冒頭に簡単に挿入することができます。
※この記事の目次も目次記法で作成しています。
目次記法の使い方
目次を挿入したい行に、次のように[:contents]
と記述します。前後には文字や空白を入れず、1行で指定してください。
[:contents]
記事を「プレビュー」または「公開」すると、ここに見出しの一覧が作成されます。例えば次のように入力すると、記事の冒頭に目次が表示されます。
本文中の見出しそれぞれには、見出しと同じ文字列のIDが付き、目次の各行からページ内アンカーでリンクされます。このため、目的の内容に簡単に移動することができます。アンカーリンクのIDは、見たままモードとはてな記法モードでは、個別にid
属性で指定できます(具体的な方法は下記に説明します)。
[:contents]
を複数箇所に記述した場合、すべて同じ見出しリストが作成されます。
目次を入力補助ツールバーから挿入する
記事の見出しから目次を自動的に作成する「目次記法」をワンクリックで挿入できます。
「目次」ボタンをクリックすると、本文に「目次記法」が挿入される
目次を自動で作成するには、記事編集画面に[:contents]
という文字列(目次記法)を入力する必要があります。入力補助ツールバーの「目次」ボタンをクリックすると、編集中の記事のカーソル位置に目次記法が挿入されます。
記事に見出しを追加するには
記事編集画面の上部にある入力補助ツールバーの「見出し」をクリックすると、記事の本文中に「大見出し」「中見出し」「小見出し」の3種類の見出しを追加することができます。
また、はてな記法モードとMarkdownモードでは、それぞれの簡易記法で見出しを指定できます。
見たままモードで見出しを追加する
見たままモードでは、見出しにしたい行を選択して、入力補助ツールバーで見出しの大きさを選択します。
間違って見出しになってしまった行を元に戻したいときには「標準」を選択してください。
また「HTML編集」タブでh3
などのHTMLを直接入力することもできます。その際に、次のようにid
属性を直接記述すると、目次のアンカーリンクとして使用されます。
<h3 id="id1">この見出しには手動でidを指定しました</h3> <h4 id="id2">ここにはid2と記述しています</h4>
※はてなブログでは、記事本文中の見出しにh3
要素からh5
要素までを使用しています。
はてな記法モードで見出しを追加する
はてな記法モードでは、見出し記法で見出しを記述できます。行頭から*
、**
、**
と記述すると、それぞれ大見出し(h3
)、中見出し(h4
)、小見出し(h5
)になります。入力補助ツールバーを使用した場合にも、これらの記法が入力されます。
大見出しについては、次のように*id*
と記述し、id
属性を指定することができます
*id1*この見出しにはid1というidを指定しています
このはてな記法は、次のようなHTMLに展開されます。
<h3 id="id1">この見出しにはid1というidを指定しています</h3>
※はてな記法では、中見出しと小見出しでid
要素を指定することはできません。
Markdownモードで見出しを追加する
Markdownには、#
から######
まで、それぞれh1
からh6
の6段階に対応した見出しの記法があります。
はてなブログでは、記事内の見出しとしてh3
からh5
を想定しているので、上記のうち###
から#####
を使用して記事を書くとよいでしょう。
※Markdownでは、見出しのid
属性を指定することはできません。