PR AFFINGER6専用機能

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

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

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

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

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

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

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

自動カウントの特徴

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

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

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

よく使うのが、

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

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

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

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

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

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

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

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

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

カウント
スタイル

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

カウント
ステップ

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

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

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

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

連番(CT)の使い方

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

1.見出し(H3)を挿入し、スタイルを「ふきだし」に変更します。

2.見出しのテキストを選択した状態で、ブロックツールの「ペンアイコン」をクリックし、の[連番(CT)]を選択します。

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

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

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

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

「追加 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専用機能
-

PAGE TOP