当ページのリンクには広告が含まれています。

AFFINGER6 『追加 CSS クラス』を使わずに『ステップとカウント』見出しをリセットする方法

"ステップとカウント"スタイルの見出しはブロックのグループ化でリセットされる！

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の見出しブロックで「ステップ・カウント」スタイルを使った時に連番が途中でリセットされてしまう原因と逆にその特性を使ったリセット方法をご紹介します。
ちょっとした小技的な手法です。この内容はおそらく当記事だけ！！かも…

  • テキスト：見出し（グループ化）

AFFINGER6の見出しブロックとグループ化の関連性についてご紹介します。
「ステップやカウント」スタイルの見出しブロックで生じる現象と対処方法をご紹介します。

Question
Question

"ステップやカウント"スタイルの見出し番号がリセットされてしまう！？
なんで…？

見出しブロックのスタイル『ステップとカウント』で自動カウントがリセットされる現象。

現象はこんな感じ！

投稿（記事編集）画面：見出しブロック｜ステップ

CSSを使って意図的にカウントをリセットする方法がありますが…それとは違います！

ちなみに…『追加 CSS クラス』に以下のコードを入力するとカウントはリセットされます。
（上書き用のコードです）

ステップ見出しのリセット

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

カウント見出しのリセット

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

上記とは別に気づかないうちに？ステップやカウント見出しをリセットさせるのがブロックのグループ化です。

この記事でわかること！

  • 見出しブロックのスタイル：ステップとカウントについて
  • 自動カウントがリセットされる原因（リセット方法）
    1. 自動カウントがリセットされる手順（コンテンツのグループ化）
    2. 自動カウントがリセットされる手順（見出しのグループ化）
  • 見出しブロックの自動カウントをリセットする方法▶︎まとめ
  • まとめ！

それではご覧ください！

★ 当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

見出しブロックのスタイル：ステップとカウントについて

見出しブロックは、WordPress標準のブロックエディター機能です。
AFFINGER6の場合、専用の拡張機能が用意されていて12種類の見出しスタイルに切り替えが可能です。

※ 投稿（記事編集）画面での作業になります。

ブロック挿入メニューでは、ブロックタブの『テキスト：見出し』です。

yajirusi-sita-80x40

見出しブロックを選択した状態での『設定＞ブロック＞Styles』の順にクリックすると以下のスタイル設定メニューが表示されます。

投稿画面設定：ブロックタブ｜見出しStyles

※ 左記のメニューが投稿（記事編集）画面の右側に表示されます。

赤枠は線：『Styles』タブの スタイル項目に『ステップ』『カウント』という見出しスタイルあります。
この2つが自動カウントに対応しています。

今回は、この…

  • ステップ
  • カウント

2つの見出しスタイルが自動カウントされなくなる（リセットされる）原因と対処方法をご紹介します。

見出しをカスタマイズしたい！方に おすすめです。
見出しの書き方を知りたい！方に おすすめです。

自動カウントがリセットされる原因（リセット方法）「ステップ・カウント」見出しは意図的に使えばCSSはいらない！

この章では、自動カウントがリセットされる原因（リセット方法）を2つご紹介します。

  1. 自動カウントされるコンテンツの中に「グループ化」されたブロックがある場合、後に作成された見出しはリセットされます。
  2. 見出しブロックをグループ化するとその見出し自体がリセットされます。

自動カウントがリセットされる手順（コンテンツのグループ化）「ステップ・カウント」見出し共通

コンテンツをグループ化することで 後に作成された見出しがリセットされるパターンです。

次にご紹介する手順は「ステップ3の見出し」がリセットされる場合です。

以下の画面の「ステップ2の段落」をグループ化します。

見出しサンプル：操作説明1
yajirusi-sita-80x40

手順は以下の通りです。

  1. グループ化するブロック（コンテンツ）を選択します。（サンプルではステップ2の段落）
  2. ツールバーから『オプション』をクリックしてドロップダウンメニューを開きます。
  3. 『グループ化』をクリックします。
見出しサンプル：操作説明2
yajirusi-sita-80x40

以下の画面のように「ステップ3の見出し」のカウントがリセットされて「STEP01」になります。

見出しサンプル：操作説明3

自動カウントのリセット解除は コンテンツのグループを解除すればOKです。

自動カウントがリセットされる手順（見出しのグループ化）「ステップ・カウント」見出し共通

見出しをグループ化することで リセットされるパターンです。
※ 基本的さ操作は全勝と同等です。

次にご紹介する手順は「ステップ3の見出し」がリセットされる場合です。

以下の画面の「ステップ3の見出し」をグループ化します。

見出しサンプル：操作説明4
yajirusi-sita-80x40

手順は以下の通りです。

  1. グループ化する見出しブロックを選択します。（サンプルではステップ３の見出し）
  2. ツールバーから『オプション』をクリックしてドロップダウンメニューを開きます。
  3. 『グループ化』をクリックします。
見出しサンプル：操作説明5
yajirusi-sita-80x40

以下の画面のように「ステップ3の見出し」のカウントがリセットされて「STEP01」になります。

見出しサンプル：操作説明6

自動カウントのリセット解除は 見出しブロックのグループを解除すればOKです。

見出しブロックの自動カウントをリセットする方法▶︎まとめ追加 CSS クラスを使わない方法2個｜追加 CSS クラスを使う方法2個

見出しブロックの自動カウントをリセット▶︎追加 CSS クラスを使わない方法

「ステップ・カウント」スタイル共通

  1. リセットする見出し前のコンテンツ内のブロックいずれか1つをグループ化する
  2. リセットする見出しブロックをグループ化する

見出しブロックの自動カウントをリセット▶︎追加 CSS クラスを使う方法

　1.「ステップ」スタイル CSS

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

　2.「カウント」スタイル CSS

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

★ 当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

まとめ！AFFINGER6 『追加 CSS クラス』を使わずに『ステップとカウント』見出しをリセットする方法

AFFINGER6で 『追加 CSS クラス』を使わずに『ステップとカウント』見出しをリセットする方法をご紹介しました。
「コンテンツ内のブロックをグループ化すると自動カウント機能のある見出し（ステップ・カウント）はリセットされる！」という特性を利用したリセット方法と意図せずこの特性が働いた時の対処方法をご紹介しました。ググっても中々出てこない？！内容かと…覚えておくと使える ^^／ 試してみてくださいね。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／

Kindle本キャンペーン

-機能紹介（使い方）AFFINGER
-