見出し（タイトル）に階層の見出し番号を付ける
<h2>概要</h2>
<h3>背景</h3>
<h3>目的</h3>
<h2>方法</h2>
<h3>手順1</h3>
<h3>手順2</h3>
<h4>詳細</h4>
1. 概要
1.1 背景
1.2 目的
2. 方法
2.1 手順1
2.2 手順2
2.2.1 詳細
のようにしたい。
Elimentor CSSで見出し番号は無理そう
Elementor の場合は、
<div>
<h3> ……….</h3>
</div>
のように <div>で区切られると、カウンターの値を引き継ぐことができないのはCSSの仕様のようです。（バージョンアップ等で変更されるかもしれないが）
なので、H2 のカウンターのみ使えるが、H3 H4 …. は、うまく機能しなかった。（実は、数日間悩んだことは秘密です。）
※ ちなみに、ブロックエディタで書かれたコンテンツでは、CSSで簡単に見出し番号を記すことができます。
JSを（JavaScript ）使って見出しカウンター
JavaScript 見出しカウンター
JS は、<script> … </scrippt>
- カウンターリセット
- h2Counter 加算 他はリセット h2表示
- h3Counter 加算 h4はリセット h3表示
- h4Counter 加算 h4表示
<style> …</style> で
- 見出しの番号に色を付けた。color: #9A185F;
- フォントをボルドー
- 番号の右側にマージン
<script>
document.addEventListener("DOMContentLoaded", function() {
let h2Counter = 0;
let h3Counter = 0;
let h4Counter = 0;
const headings = document.querySelectorAll(".main .elementor-heading-title");
headings.forEach(heading => {
const tag = heading.tagName.toLowerCase();
if(tag === "h2") {
h2Counter++;
h3Counter = 0;
h4Counter = 0;
heading.innerHTML = '<span class="heading-number">' + h2Counter + '. </span>' + heading.textContent;
}
else if(tag === "h3") {
h3Counter++;
h4Counter = 0;
heading.innerHTML = '<span class="heading-number">' + h2Counter + '.' + h3Counter + ' </span>' + heading.textContent;
}
else if(tag === "h4") {
h4Counter++;
heading.innerHTML = '<span class="heading-number">' + h2Counter + '.' + h3Counter + '.' + h4Counter + ' </span>' + heading.textContent;
}
});
});
</script>
<style>
/* 番号の色や太さを変更 */
.main .heading-number {
color: #9A185F; /* 赤色 */
font-weight: bold;
margin-right: 0.5em;
}
</style>
作ったJSを html に貼り付け
ダッシュボード -> Elementor -> Custorm Code
NEW CODE
コード名 : Title Counter （適当な名称）
Location : </body> – END （JSを挿入する場所）
として、上記の JSをコピーアンドペーストする。
[公開/更新]ボタンをクリック
PUBLISH SETTINGS
公開/更新ボタン で「PUBLISH SETTINGS」のウインドが開くので、
Includes -> Singular -> All singular -> [Save & Close]
登録したJava Script を投稿ページに適用して、他のページに見出し番号が出ないことにしたい。
Post Content を編集
JSが及ぼす範囲を Post Content だけに制限したいので、適当にクラスを「 .main」 とした。
あらかじめ 見出し番号を付ける Java Scriptには、
const headings = document.querySelectorAll(".main .elementor-heading-title");
クラス「 .main .elementor-heading-title」 を指定している。
Post Content ウィジェットのクラスを main（適当な文字列で良い） に設定を行うことで適用範囲を Post Content に制限したい。
これを設定することで、同じページのPost Content 以外にあるh2 , h3 , h4に番号が付くことを防ぐことができます。
CSS クラスを作る
Post Content -> 高度な設定 -> レイアウト -> CSS クラス [ main ]
結果
想定通りになった。
今回は、h2 -h4 までの連番で、h5 h6 は数字がウザくなるので止めた。
難点だが
この場合（JSの見出し番号）、Elementor の編集中には、見出し番号が表示されない。
まあ、いっか！
