WEBサイトの見出しを色で強調できるブックマークレットの作り方

// Webページ上の見出しを目立たせるブックマークレット

// 1. Webページ上のH1からH5までの見出しを取得
var headings = document.querySelectorAll('h1, h2, h3, h4, h5');

// 2. 各見出しに対してデザインの処理を実行
headings.forEach(function (heading) {
// 3. 見出しの種類ごとに適切なデザインを設定
	var highlightColor, tagText;
  
	// 4. 見出しの種類ごとにデザインを設定
	//下記 #～6桁はカラーコード一覧表で好きな色に変更可能
	//例：#FF0000赤色→#7FFFd4アクアマリン色
	switch (heading.tagName){
		case 'H1':
			highlightColor = '#FF0000';  // 赤色でメイン見出し
			tagText = 'H1';
			break;
		case 'H2':
			highlightColor = '#0000FF';  // 青色でサブタイトル
			tagText = 'H2';
			break;
		case 'H3':
			highlightColor = '#800080';  // 紫色で小見出し
			tagText = 'H3';
			break;
		case 'H4':
			highlightColor = '#008000';  // 緑色で詳細情報
			tagText = 'H4';
			break;
		case 'H5':
			highlightColor = '#FFA500';  // オレンジ色でサブ情報
			tagText = 'H5';
		break;
	}
	// 5. 見出しにデザインを適用
	heading.style.backgroundColor = highlightColor;　//各見出し毎に背景を指定した色に設定
	heading.style.color = '#FFFFFF';  // 見出しの文字を白色に変更

	// 6. タグの要素を作成
	var tagElement = document.createElement('span');
	tagElement.style.backgroundColor = highlightColor;
	tagElement.style.color = '#FFFFFF';  // 白字に設定
	tagElement.style.padding = '2px';
	tagElement.style.marginLeft = '5px';
	tagElement.style.borderRadius = '3px';
	tagElement.textContent = tagText;

	// 7. タグの要素を見出しの隣に表示
	heading.parentNode.insertBefore(tagElement, heading.nextSibling);
});