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

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

2023年7月9日

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

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

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

  • テキスト:見出し(グループ化)

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

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

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

現象はこんな感じ!

投稿(記事編集)画面:見出しブロック|ステップ

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 購入 ▶︎ 詳しくはこちら

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

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

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

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

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

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

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

投稿画面設定:ブロックタブ|見出しStyles

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

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

今回は、この…

  • ステップ
  • カウント

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

見出しをカスタマイズしたい!方に おすすめです。

AFFINGER6 見出しタグのカスタマイズ!キャッチコピーを使う。
AFFINGER6 見出しタグのカスタマイズ!キャッチコピーを使う。

AFFINGER6 を使った見出しタグのカスタマイズ方法をご紹介。標準で装備されているスタイルや記事編集中に任意に変更できるスタイル等を画像付きでイメージしやすくご紹介。キャッチコピーを使った「大・小」文字の表示方法や目次への取り込み等、初心者でもこれだけ知ってれば素敵な見出しが作れます!をご紹介。

見出しの書き方を知りたい!方に おすすめです。

SEO に強い! 見出しタグ(hタグ)の書き方【徹底的に調べてみた!】
SEO に強い! 見出しタグ(hタグ)の書き方【徹底的に調べてみた!】

SEOに強い!見出しタグ(hタグ)の書き方をご紹介します。読者に対する効果と検索エンジンに対する効果をそれぞれ解説。h1〜h6まである見出しタグ(hタグ)のSEOに強い書き方について簡素に!的確に!ご紹介します。ブログ初心者必見です。

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

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

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

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

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

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

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

見出しサンプル:操作説明1

手順は以下の通りです。

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

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

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

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

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

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

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

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

見出しサンプル:操作説明4

手順は以下の通りです。

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

以下の画面のように「ステップ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 購入 ▶︎ 詳しくはこちら

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

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

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

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

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





「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1a

ACTION / AFFINGER

コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 ▶︎ 購入はこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

「コード管理・リンク計測」プラグイン