【簡単】SWELLサイドバーの目次をハイライト表示するカスタマイズ方法

April 20, 2025April 23, 2025

SWELLには標準で目次機能がありますが、今どこを読んでいるのか分かりやすくするためのハイライト機能はありません。(2025年4月時点)

そこで本記事では、SWELLのサイドバーの目次をハイライト表示するカスタマイズ方法を紹介します。

カスタマイズ方法はいくつかありますが、

function.phpを編集する
追加CSSを編集する
専用の子テーマを導入する

などは、サイト制作の初心者にとってはハードルが高め・・・。

操作をまちがえるとサイトの動作がおかしくなったり、SWELLのバージョンアップのたびにカスタマイズをやり直す必要が出たり・・・といった不安があります。

そこで今回は、function.phpやCSSを編集することなく、簡単にカスタマイズできる方法を紹介しました。

1分で変更できるのでぜひお試しあれ！

とはいえ、カスタマイズは自己責任でおねがいします。

完成イメージ：目次をハイライトさせる

こんな感じ

目次を追尾サイドバーに表示させる方法

ハイライト方法をお伝えする前に、目次を追尾サイドバーに表示させる方法を紹介します。

WordPressの管理画面の左メニューで、外観＞ウィジェット をクリックします。

利用できるウィジェットの中から『【SWELL】目次』を『追尾サイドバー』にドラッグアンドドロップします。

以上で、目次が追尾サイドバーに表示されるようになります。

追尾サイドバーに表示された目次はこんな感じ

今回紹介するカスタマイズ方法は簡単

SWELLのサイドバーの目次をハイライト表示するカスタマイズ方法としては、いくつかあります。

たとえば、

function.phpを編集する
追加CSSを編集する
専用の子テーマを導入する

など。

しかし、上記はいずれもサイト制作の初心者にとってはハードルが高め・・・。

そこで今回は、function.phpやCSSを編集することなく、簡単にカスタマイズできる方法を紹介します。

目次をクリックするとジャンプできます

	ハイライトタイミングを遅らせる	ハイライト文字を白抜きにする	ハイライト上下幅を広くする
方法1
方法2
方法3
方法4
方法5

では順に見ていきましょう。

カスタマイズ方法①：SWELLサイドバーの目次をハイライト表示する

WordPressの管理画面で、カスタマイザー＞高度な設定＞ bodyタグ終了直前に出力するコード の部分にコードを入力します。

上記の赤枠部に、以下のコードをコピペして、[公開]をクリックします。

<script>
	const highlightColor = "#d3d3d3"; //ハイライト時の背景色 (ここで好きな色に変更可能)
	const resetColor = "";

	let mokuji_links;
	let modal_mokuji_links;

	// 初期化
	function init() {
		mokuji_links = document.querySelectorAll('.widget_swell_index a');
		modal_mokuji_links = document.querySelectorAll('.-modal a');
	}

	// 背景色を設定する関数
	function setBackgroundColor(elements, color) {
		elements.forEach(element => {
			element.style.backgroundColor = color;
		});
	}

	function handleScroll() {
		if (!mokuji_links || !mokuji_links.length) return;
		const y = document.documentElement.clientHeight;

		mokuji_links.forEach((link, i) => {
			const targetElement = document.getElementById(link.hash.slice(1));
			if (!targetElement) return;

			const targetPosition = targetElement.getBoundingClientRect().top;

			if (y > targetPosition) {
				setBackgroundColor([link, modal_mokuji_links[i]], highlightColor);
				if (i > 0) {
					setBackgroundColor([mokuji_links[i - 1], modal_mokuji_links[i - 1]], resetColor); // 前のリンクの背景色をリセット
				}
			} else {
				setBackgroundColor([link, modal_mokuji_links[i]], resetColor);
			}
		});
	}

	window.addEventListener('DOMContentLoaded', init);
	window.addEventListener('scroll', handleScroll);
</script>

すると、以下のように、今読んでいる箇所の目次がグレーでハイライトされます。

ハイライト色を変更したい場合

const highlightColor = "#d3d3d3"; //ハイライト時の背景色 (ここで好きな色に変更可能)

コードの一番上の、上記の部分を好きなカラーコードに変更すればOK。

たとえば、#ededaf (黄色)に変更すると、以下の感じになります。

カスタマイズ方法②：方法①＋ハイライトのタイミングを遅らせる

カスタマイズ方法その2を紹介します。

前記で紹介したその1の方法は、「画面の下端」に見出しが入った時点でハイライトが行われるため、ハイライトされるタイミングが早すぎると感じることがあります。

解決策として、画面内の特定の位置（たとえば画面の上端から50%程度の位置）を基準にすることで、ハイライトのタイミングを遅くできます。

手順は方法その1と同じで、貼り付けるコードは以下をコピペしてください。

<script>
	const highlightColor = "#d3d3d3"; // ハイライト時の背景色
	const resetColor = "";

	let mokuji_links;
	let modal_mokuji_links;

	// 初期化処理：目次のリンクを取得
	function init() {
		mokuji_links = document.querySelectorAll('.widget_swell_index a');
		modal_mokuji_links = document.querySelectorAll('.-modal a');
	}

	// 背景色を設定する関数
	function setBackgroundColor(elements, color) {
		elements.forEach(element => {
			element.style.backgroundColor = color;
		});
	}

	// スクロール処理（改善版）
	function handleScroll() {
		if (!mokuji_links || !mokuji_links.length) return;

		// 基準位置を画面の50%（上端から50%）に設定
		const viewportHeight = document.documentElement.clientHeight;
		const highlightThreshold = viewportHeight * 0.5;

		mokuji_links.forEach((link, i) => {
			const targetElement = document.getElementById(link.hash.slice(1));
			if (!targetElement) return;

			const targetPosition = targetElement.getBoundingClientRect().top;

			// 基準位置を過ぎたらハイライト
			if (targetPosition <= highlightThreshold) {
				setBackgroundColor([link, modal_mokuji_links[i]], highlightColor);

				// 前のリンクをリセット
				if (i > 0) {
					setBackgroundColor([mokuji_links[i - 1], modal_mokuji_links[i - 1]], resetColor);
				}

				// 現在リンク以降のリンクの背景色をリセット（複数同時ハイライト防止）
				for (let j = i + 1; j < mokuji_links.length; j++) {
					setBackgroundColor([mokuji_links[j], modal_mokuji_links[j]], resetColor);
				}
			} else {
				// 基準位置をまだ過ぎていないリンクはリセット
				setBackgroundColor([link, modal_mokuji_links[i]], resetColor);
			}
		});
	}

	window.addEventListener('DOMContentLoaded', init);
	window.addEventListener('scroll', handleScroll);
</script>

ハイライトのタイミングを変えたい場合

const highlightThreshold = viewportHeight * 0.5;

上記の「0.5」の数値を変更すればOK。

カスタマイズ方法③：方法①＋白抜きにする

カスタマイズ方法その3を紹介します。

方法1との違いは、ハイライト表示したときに、文字を白抜きにするということ。

手順は方法その1と同じで、貼り付けるコードは以下をコピペしてください。

<script>
	const highlightColor = "#696969"; // ハイライトの背景色
	const resetColor = "";            // リセット時の背景色（通常は透明）
	const highlightTextColor = "#ffffff"; // ハイライト時の文字色（白抜き）
	const resetTextColor = "";            // リセット時の文字色（元の色）

	let mokuji_links;
	let modal_mokuji_links;

	// 初期化
	function init() {
		mokuji_links = document.querySelectorAll('.widget_swell_index a');
		modal_mokuji_links = document.querySelectorAll('.-modal a');
	}

	// 背景色と文字色を設定する関数
	function setHighlight(elements, bgColor, textColor) {
		elements.forEach(element => {
			element.style.backgroundColor = bgColor;
			element.style.color = textColor;
		});
	}

	function handleScroll() {
		if (!mokuji_links || !mokuji_links.length) return;
		const y = document.documentElement.clientHeight;

		mokuji_links.forEach((link, i) => {
			const targetElement = document.getElementById(link.hash.slice(1));
			if (!targetElement) return;

			const targetPosition = targetElement.getBoundingClientRect().top;

			if (y > targetPosition) {
				// 現在のリンクをハイライト
				setHighlight([link, modal_mokuji_links[i]], highlightColor, highlightTextColor);
				if (i > 0) {
					// 前のリンクをリセット
					setHighlight([mokuji_links[i - 1], modal_mokuji_links[i - 1]], resetColor, resetTextColor);
				}
			} else {
				// 現在のリンクをリセット
				setHighlight([link, modal_mokuji_links[i]], resetColor, resetTextColor);
			}
		});
	}

	window.addEventListener('DOMContentLoaded', init);
	window.addEventListener('scroll', handleScroll);
</script>

すると、以下のように、今読んでいる箇所の目次がグレーでハイライトされ、かつ文字が白抜きになります。

ハイライト色を変更したい場合

const highlightColor = "#696969"; // ハイライトの背景色

コードの一番上の、上記の部分を好きなカラーコードに変更すればOK。

カスタマイズ方法④：方法②(ハイライトタイミングを遅らせる)＋方法③(文字を白抜き)

カスタマイズ方法その4を紹介します。

方法2(ハイライトのタイミングを遅らせる)と方法3(文字を白抜き)を合体しました。

手順は方法その1と同じで、貼り付けるコードは以下をコピペしてください。

<script>
	const highlightColor = "#696969"; // ハイライトの背景色
	const resetColor = "";            // リセット時の背景色（通常は透明）
	const highlightTextColor = "#ffffff"; // ハイライト時の文字色（白抜き）
	const resetTextColor = "";            // リセット時の文字色（元の色）

	let mokuji_links;
	let modal_mokuji_links;

	// 初期化
	function init() {
		mokuji_links = document.querySelectorAll('.widget_swell_index a');
		modal_mokuji_links = document.querySelectorAll('.-modal a');
	}

	// 背景色と文字色を設定する関数
	function setHighlight(elements, bgColor, textColor) {
		elements.forEach(element => {
			element.style.backgroundColor = bgColor;
			element.style.color = textColor;
		});
	}

	function handleScroll() {
		if (!mokuji_links || !mokuji_links.length) return;

		// ハイライトの基準位置を画面の上端から50%の位置に設定
		const viewportHeight = document.documentElement.clientHeight;
		const highlightThreshold = viewportHeight * 0.5;

		mokuji_links.forEach((link, i) => {
			const targetElement = document.getElementById(link.hash.slice(1));
			if (!targetElement) return;

			const targetPosition = targetElement.getBoundingClientRect().top;

			if (targetPosition <= highlightThreshold) {
				// 現在のリンクをハイライト
				setHighlight([link, modal_mokuji_links[i]], highlightColor, highlightTextColor);

				// 前のリンクをリセット
				if (i > 0) {
					setHighlight([mokuji_links[i - 1], modal_mokuji_links[i - 1]], resetColor, resetTextColor);
				}

				// 現在のリンク以降のリンクをリセット
				for (let j = i + 1; j < mokuji_links.length; j++) {
					setHighlight([mokuji_links[j], modal_mokuji_links[j]], resetColor, resetTextColor);
				}
			} else {
				// 現在のリンクをリセット
				setHighlight([link, modal_mokuji_links[i]], resetColor, resetTextColor);
			}
		});
	}

	window.addEventListener('DOMContentLoaded', init);
	window.addEventListener('scroll', handleScroll);
</script>

ハイライトのタイミングを変えたい場合

const highlightThreshold = viewportHeight * 0.5;

上記の「0.5」の数値を変更すればOK。

カスタマイズ方法⑤：方法④＋ハイライトの上下幅を広くする

カスタマイズ方法その5を紹介します。

方法4に対して、ハイライトの上下幅を広くする変更を加えました。

手順は方法その1と同じで、貼り付けるコードは以下をコピペしてください。

<script>
	const highlightColor = "#696969"; // ハイライトの背景色
	const resetColor = "";            // リセット時の背景色（通常は透明）
	const highlightTextColor = "#ffffff"; // ハイライト時の文字色（白抜き）
	const resetTextColor = "";            // リセット時の文字色（元の色）

	let mokuji_links;
	let modal_mokuji_links;

	// 初期化
	function init() {
		mokuji_links = document.querySelectorAll('.widget_swell_index a');
		modal_mokuji_links = document.querySelectorAll('.-modal a');
	}

	// 背景色、文字色、上下の余白を設定する関数
	function setHighlight(elements, bgColor, textColor, paddingVertical) {
		elements.forEach(element => {
			element.style.backgroundColor = bgColor;
			element.style.color = textColor;
			element.style.paddingTop = paddingVertical;
			element.style.paddingBottom = paddingVertical;
		});
	}

	function handleScroll() {
		if (!mokuji_links || !mokuji_links.length) return;

		// ハイライトの基準位置を画面の上端から50%の位置に設定
		const viewportHeight = document.documentElement.clientHeight;
		const highlightThreshold = viewportHeight * 0.5;

		mokuji_links.forEach((link, i) => {
			const targetElement = document.getElementById(link.hash.slice(1));
			if (!targetElement) return;

			const targetPosition = targetElement.getBoundingClientRect().top;

			if (targetPosition <= highlightThreshold) {
				// 現在のリンクをハイライト（上下余白を少し広く）
				setHighlight([link, modal_mokuji_links[i]], highlightColor, highlightTextColor, "6px");

				// 前のリンクをリセット（余白を標準に戻す）
				if (i > 0) {
					setHighlight([mokuji_links[i - 1], modal_mokuji_links[i - 1]], resetColor, resetTextColor, "2px");
				}

				// 現在のリンク以降のリンクをリセット（余白を標準に戻す）
				for (let j = i + 1; j < mokuji_links.length; j++) {
					setHighlight([mokuji_links[j], modal_mokuji_links[j]], resetColor, resetTextColor, "2px");
				}
			} else {
				// 現在のリンクをリセット（余白を標準に戻す）
				setHighlight([link, modal_mokuji_links[i]], resetColor, resetTextColor, "2px");
			}
		});
	}

	window.addEventListener('DOMContentLoaded', init);
	window.addEventListener('scroll', handleScroll);
</script>

すると、以下のように、ハイライトの上下幅が広くなります。