ボタンでコピーできる仕組み（JavaScriptの豆知識）

豆知識：ボタンで「自動コピー」するやり方（JavaScriptあり）

※これは「説明用」です。無料配布ページはJavaScriptなし運用なので、ここでは知識として紹介します。

やりたいこと

• ボタンを押したら、コードを自動でコピーする

仕組み（かんたん）

• HTMLに「コピーしたい文字（コード）」を置く
• ボタンにJavaScriptをつけて「コピーしてね」と命令する

サンプル（最小）

下は例です。自分のサイト（HTMLが置ける場所）なら動きます。

<button type="button" id="copyBtn">コピー</button>

<pre><code id="copyText">&lt;div&gt;ここにコピーしたいコード&lt;/div&gt;</code></pre>

<script>
  document.getElementById('copyBtn').addEventListener('click', function () {
    const text = document.getElementById('copyText').innerText;
    navigator.clipboard.writeText(text);
    alert('コピーしました');
  });
</script>

注意

• 環境によって動かないことがあります（ブラウザのルール）
• JavaScriptが使えない場所（Bloggerの一部など）では動きません
• 広告やテンプレ配布ページは、シンプル運用の方が壊れにくいです

無料テンプレが「ボタンでコピー」できない理由

結論：このページはJavaScriptを使っていないので、ボタンで自動コピーはできません。

なぜJavaScriptを使わないの？

• 安全（変な動きが出ない）
• シンプル（環境で壊れにくい）
• 誰でも同じ見た目になりやすい

じゃあどうやってコピーするの？

• PC：文字をなぞる → Ctrl + C → Ctrl + V
• スマホ：長押し → コピー → 貼り付け

注意：このブログにはアフィリエイト/広告を含むことがあります。