見出しの頭に自動で番号を入れる方法と自動カウントのリセット方法

AFFINGER6には、「自動カウント」という機能があります。

これは、見出しの頭に数字を入力しなくても、自動で連続した番号を表示してくれるという、非常に便利な機能です。

自動カウントには大きく、

1. 「見出しスタイル（ステップ・カウント）」を使った方法
2. 「連番（CT）」を使った方法

の2種類があり、それぞれ使い方も見た目も異なります。

それぞれ詳しく解説していきます。

自動カウントの特徴

はじめに、自動カウントを知らない方のために、自動カウントの特徴を簡単に説明しておきます。

自動カウントには、以下の2つの特徴があります。

よく使うのが、

列挙型の記事構成で、小見出し（H3）の頭に番号を入れていくパターン。

または、手順系の記事で、ステップごとに詳しく解説していくパターンです。

どちらも小見出し（H3またはH4）に番号を入れることが多いです。

特に細かく手順を解説するような記事だと、番号のリセットが必要になるケースもあります。

大見出し（H2）で一度自動カウントをリセットし、新たに１からカウントをスタートさせれば、すごくわかりやすい記事にすることができますよ。

自動カウントのリセットについては、後ほど詳しく解説します。

見出しスタイルで自動カウントを使う

見出しスタイルとは、見出しのブロック設定にある12個のスタイルのことです。

この中の「ステップ」と「カウント」を使うことで、自動カウントが有効になります。

見出しスタイルの「カウント」と「ステップ」は、スタイルを追加するたびに自動でカウントされるので非常に楽です。

連番（CT）を使って自動カウントを入れる

連番（CT）とは、ブロックツールの中にある機能のことです。

これを使うことで、どの見出しスタイルを使っても自動カウントを有効にできます。

「ステップ」と「カウント」は、数字がダブってしまうので使えません。

連番（CT）の使い方

ここでは「ふきだし」スタイルを使って解説していきます。

１．見出し（H3）を挿入し、スタイルを「ふきだし」に変更します。

２．見出しのテキストを選択した状態で、ブロックツールの「ペンアイコン❶」をクリックし、❷の［連番（CT）］を選択します。

すると、見出しの頭に番号が表示されます。

以上が見出しの頭に自動で番号を入れる方法でした。

自動カウントをリセットする方法

自動カウントをリセットするためには、リセットコードを「追加 CSS クラス」に追加する必要があります。

「追加 CSS クラス」というとむずかしそうに聞こえますが、投稿編集ページで簡単にできるので安心してください。

それでは手順を詳しく解説していきます。

「追加 CSS クラス」の場所は、ブロック設定の一番下にある「高度な設定」を開いた中にあります。

自動カウントが使えるのは、

この3つなんですが、それぞれ追加するコードが異なります。

「ステップ」のカウントをリセットする

ステップ見出しは、以下のコードを「追加 CSS クラス」に追加すると、カウントがリセットされます。

「追加 CSS クラス」にはもともと［is-style-st-heading-custom-step］と記載されています。

このコードの後ろに「半角スペース」を開けて「st-step-reset」を追加します。

全角ではなく「半角スペース」です。間違えると自動カウントがリセットされません。

最終的に、

is-style-st-heading-custom-step st-step-reset

このように記載されていればOKです。

カウントの連続番号をリセットする

以下のコードを「追加 CSS クラス」に追加すれば、カウントがリセットされます。

もともと追加 CSS クラスに記載されている［is-style-st-heading-custom-count］に、半角スペースを開けて［st-heading-count-reset］を追加します。

最終的に、

is-style-st-heading-custom-count st-heading-count-reset

と記載されていればOKです。

連番（CT）の番号をリセットする

連番（CT）は、以下のコードを「追加 CSS クラス」に入力すれば、カウントがリセットされます。

デフォルトの見出しスタイルに連番（CT）を追加した場合、追加CSSクラスは空白になっています。

なので、［st-count-reset］←このコードを入力するだけで自動カウントがリセットされます。