MENU
お問い合わせ

サイト内の「class名」一覧を1秒で取得！一括コピー＆ダウンロードできるブックマークレット

広告

WebサイトのカスタマイズやCSS設計をしているとき、「このページで使われているクラス名を全部把握したい」と思ったことはありませんか？

デベロッパーツールで一つずつ確認するのは時間がかかるし、書き出しも面倒……。 そこで、ブラウザのボタン一つでページ内の全クラス名を抽出し、コピーやCSV・TXT保存まで完結する超軽量なブックマークレットを作成しました！

SWELL、Cocoon、AFFINGER6などの主要テーマはもちろん、どんなサイトでも動作します。

「そもそもブックマークレットって何？」という方はこちら 今回配布するツールを安全に使うための基礎知識を以下の記事でまとめています。初めての方はまずこちらをチェックしてください。

ブックマークレットとは？
目次

実装マニュアル

① 以下のコードをコピー

以下のJavaScriptコードをすべてコピーしてください。

javascript:(function(){
  const classSet = new Set();
  document.querySelectorAll('*').forEach(el => {
    el.classList.forEach(cls => classSet.add(cls));
  });
  const sortedClasses = Array.from(classSet).sort();
  const content = sortedClasses.join('\n');

  /* パネルの作成 */
  const container = document.createElement('div');
  container.style.cssText = 'position:fixed;top:10px;right:10px;width:320px;max-height:90vh;background:#222;color:#eee;z-index:999999;padding:20px;overflow-y:auto;font-family:sans-serif;font-size:13px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);border:1px solid #444;';

  const header = document.createElement('div');
  header.innerHTML = `<h3 style='margin:0 0 10px 0;font-size:16px;'>Class List (${sortedClasses.length})</h3>`;
  
  const btnArea = document.createElement('div');
  btnArea.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px;';

  const createBtn = (text, bg, onClick) => {
    const btn = document.createElement('button');
    btn.innerText = text;
    btn.style.cssText = `cursor:pointer;padding:8px;border:none;border-radius:4px;background:${bg};color:white;font-weight:bold;font-size:11px;`;
    btn.onclick = onClick;
    return btn;
  };

  const copyBtn = createBtn('コピー', '#444', () => {
    navigator.clipboard.writeText(content);
    copyBtn.innerText = 'コピー完了！';
    setTimeout(() => copyBtn.innerText = 'コピー', 2000);
  });

  const downloadFile = (data, filename, type) => {
    const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), data], {type: type}); /* BOMを追加して文字化け防止 */
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  };

  const csvBtn = createBtn('CSV保存', '#28a745', () => {
    /* Excelでの数式誤認を防ぐため、="値" の形式に変換 */
    const csvContent = "Class Name\n" + sortedClasses.map(cls => `="${cls}"`).join("\n");
    downloadFile(csvContent, 'classes.csv', 'text/csv;charset=utf-8');
  });

  const txtBtn = createBtn('TXT保存', '#007bff', () => {
    downloadFile(content, 'classes.txt', 'text/plain;charset=utf-8');
  });

  const closeBtn = createBtn('閉じる', '#dc3545', () => container.remove());

  btnArea.append(copyBtn, txtBtn, csvBtn, closeBtn);
  container.appendChild(header);
  container.appendChild(btnArea);

  const listPre = document.createElement('pre');
  listPre.style.cssText = 'background:#333;padding:10px;border-radius:5px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:0;';
  listPre.innerText = content;
  container.appendChild(listPre);

  document.body.appendChild(container);
})();
JavaScript

② ブラウザに登録する

  1. ブラウザのブックマークバーで右クリックし、「ページを追加」または「新規ブックマーク」を選択。
  2. 名前： Class一覧取得 など任意の名称に設定。
  3. URL（アドレス）： 先ほどコピーした javascript: から始まるコードを貼り付けて保存。

このツールのメリット

1. プラグイン不要で分析ができる

デザインの修正や競合サイトの分析、自作CSSの整理などに役立ちます。

プラグインを入れないので、サイトが重くなる心配もありません。

2. 3種類の書き出しに対応

  • コピー： そのままCSSファイルやメモ帳に貼り付けたいとき。
  • TXT保存： シンプルなリストとして手元に残したいとき。
  • CSV保存： クラス名の重複チェックや、スプレッドシートで管理したいとき。

運用のコツと注意点

  • 「閉じる」ボタンでスッキリ： 実行すると画面右側に黒いパネルが出ますが、「閉じる」を押せばすぐに消えます。ページをリロードする必要はありません。
  • 全角スペースに注意： コードを自分で書き換える際は、必ず「半角英数」で行ってください。全角スペースが混ざると動作しなくなります。
  • 一部のサイトでの制限： 銀行や非常に強固なセキュリティ（CSP）を設定しているサイトでは、ブックマークレットの実行がブロックされる場合があります。その場合は標準のデベロッパーツールを併用してください。

あとがき

無事に動作しましたでしょうか？ WordPressのカスタマイズをしていると、特定のクラス名がどこに使われているか探す作業が意外と発生します。このツールを使って「今このページで何が使われているか」を可視化することで、作業効率は格段にアップします。

もしこの記事が役に立ったら、ぜひブックマークして活用してくださいね！

お問い合わせ先

不具合やカスタマイズのご相談は、こちらからお気軽にご連絡ください。

お問い合わせ先
便利ツール
ブックマークレット
  • URLをコピーしました！
目次