AFFINGER6専用機能 使い方

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

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

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

  1. ステップ(見出しスタイル)
  2. カウント(見出しスタイル)
  3. 連番(CT)

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

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

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

自動カウントの特徴

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

自動カウントには、

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

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

よく使うのが、

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

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

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

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

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

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

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

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

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

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

  • 見出しスタイルの場合
    • ステップ
    • カウント
  • ブロックツールの場合
    • 連番(CT)

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

<見出しスタイル>「ステップ」のカウントをリセットする

ステップスタイル見出し

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

追加するコード

st-step-reset

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

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

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

最終的に、

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

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

<見出しスタイル>カウントの連続番号をリセットする

カウントスタイル見出し

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

追加するコード

st-heading-count-reset

もともと追加 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 クラス」に入力すれば、カウントがリセットされます。

追加するコード

st-count-reset

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

なので、

st-count-reset

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

デフォルト以外のスタイルを使っている場合

デフォルト以外の見出しスタイルを使っている場合は、そのスタイルのコードが追加CSSクラスに入力されているはずです。

この場合は、入力されているコードの後ろに「半角スペース」を入力し、先ほどのリセットコード st-count-reset を追加してください。

その他スタイル例

<ふきだしスタイルの場合>
<斜線スタイルの場合>

「半角スペース」を入力し、リセットコード「st-count-reset」を追加すればOK。

-AFFINGER6専用機能, 使い方
-