AFFINGER6の見出し自動カウント(ステップ番号)をリセットする方法

今回は、自動カウントのリセット方法について、詳しく解説します。

見出しに番号を表示させる方法は以下の3つ。

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

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

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

自動カウントの特徴

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

自動カウントには、

1. 見出しの頭に数字が、１，２，３・・・と自動で入力される
2. 見出しに数字が表示されているけど、もくじには表示されない

という2つの特徴があります。

よく使うのが、

「方法は3つ。それぞれを詳しく解説します。」みたいな列挙型の記事構成で、小見出し（H3）に番号を入れるパターン。

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

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

特に細かく手順を解説するような記事だと、番号をリセットできるメリットは大きいんじゃないでしょうか。

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

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

それでは、自動カウントをリセットする方法を解説していきます。

自動カウントをリセットするには、見出し設定の「追加 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

このコードを入力するだけで自動カウントがリセットされます。