WordPressにコピー機能を簡単設置！右上にコピーボタンをつけるHTMLテンプレート配布

講座やブログ記事の中で「例文をコピーしてそのまま使ってほしい」
そんなときに便利なのが コピー機能付きテンプレート です。

ボタンを押すだけでテキストがコピーされるため、
受講生や読者がすぐに使えてとても親切です。

この記事では、WordPressにそのまま貼って使える
HTMLのコピー機能テンプレートと、その使い方を解説します。

コピー機能付きテンプレートの使い方

以下のHTMLをコピーしてWordPressの「カスタムHTMLブロック」に貼り付けてください。

1. 最初の設定（ページに1回だけ）

最初の1ブロックだけは、スクリプト付きの基本形を入れます。
これをページ内に1回だけ置けば、同じページ上のすべての「コピー」ボタンが動きます。

<!-- 最初の設定：スクリプト付き（ページに1回だけ） -->
<div class="copy-box" style="position: relative; border: 1px solid #ddd; padding: 10px; border-radius: 6px; background: #f9f9f9; margin-bottom: 1em;">
  <pre class="copy-target" style="white-space: pre-wrap; margin: 0; font-size: 14px; font-family: monospace;">
ここにコピーさせたい文章を書きます。
複数行でもOKです。
  </pre>
  <button type="button" class="copy-btn" style="position: absolute; top: 10px; right: 10px; padding: 5px 10px; background: #0073aa; color: #fff; border: none; border-radius: 4px; cursor: pointer;">
    コピー
  </button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.copy-btn').forEach(function(btn){
    btn.addEventListener('click', async function(){
      const box = btn.closest('.copy-box');
      const pre = box && box.querySelector('.copy-target');
      if(!pre) return;
      const text = pre.innerText;

      const original = btn.textContent;
      btn.disabled = true;

      try {
        if (navigator.clipboard && window.isSecureContext) {
          await navigator.clipboard.writeText(text);
        } else {
          const r = document.createRange();
          r.selectNodeContents(pre);
          const s = window.getSelection();
          s.removeAllRanges();
          s.addRange(r);
          document.execCommand('copy');
          s.removeAllRanges();
        }
        btn.textContent = 'コピーしました';
      } catch (e) {
        console.error('コピーに失敗:', e);
        btn.textContent = '失敗しました';
      } finally {
        setTimeout(() => { btn.textContent = original; btn.disabled = false; }, 1200);
      }
    });
  });
});
</script>

---

2. 二つ目以降のテンプレート & 使い方の解説

2つ目以降は、スクリプトなしのブロックだけを増やします。
下のテンプレートを必要な数だけコピペして、文章部分だけ差し替えてください。

<!-- 二つ目以降：スクリプトなし（必要な数だけ増やす） -->
<div class="copy-box" style="position: relative; border: 1px solid #ddd; padding: 10px; border-radius: 6px; background: #f9f9f9; margin-bottom: 1em;">
  <pre class="copy-target" style="white-space: pre-wrap; margin: 0; font-size: 14px; font-family: monospace;">
ここにコピーさせたい文章を書きます。
複数行でもOKです。
  </pre>
  <button type="button" class="copy-btn" style="position: absolute; top: 10px; right: 10px; padding: 5px 10px; background: #0073aa; color: #fff; border: none; border-radius: 4px; cursor: pointer;">
    コピー
  </button>
</div>

---