ホーム / Bloggerに「コピーボタン付きコードブロック」を埋め込む方法 /

Bloggerに「コピーボタン付きコードブロック」を埋め込む方法

ブログでHTMLやCSSコードを紹介する際、「見やすくてコピーしやすいコードブロック」があると便利です。今回はこれを簡単に実装する方法をご紹介します。


このようなコードプロックを作成できます。

✅ 手順①：CSS（コピーボタンのスタイル）を追加

テーマの「カスタマイズ」→「高度な設定」→「追加CSS」に以下を貼り付けてください。


.code-block {
  position: relative;
  margin: 2em 0;
}
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #66d9ef;
  color: #272822;
  border: none;
  padding: 0.4em 0.8em;
  font-size: 0.85em;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
}
.copy-btn:active {
  background: #a1efe4;
}
詳しい設定方法はこちら→【bloggerでCSSを設置する方法】

✅ 手順②：JavaScriptとPrism.jsを読み込む

HTML/JavaScriptガジェット、もしくはテーマHTMLの </body> の直前に以下を追加します。


<!-- Prism.js本体とプラグイン -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

<!-- コピーボタン追加スクリプト -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const codeBlocks = document.querySelectorAll('.code-block');
  codeBlocks.forEach(block => {
    const btn = document.createElement('button');
    btn.className = 'copy-btn';
    btn.innerText = 'コピー';
    btn.addEventListener('click', () => {
      const code = block.querySelector('code').innerText;
      navigator.clipboard.writeText(code).then(() => {
        btn.innerHTML = 'コピーしました!';
        setTimeout(() => btn.innerText = 'コピー', 1500);
      });
    });
    block.insertBefore(btn, block.firstChild);
  });
});
</script>
詳しい設定方法はこちら→BloggerのHTML構造とJavaScriptの挿入方法【初心者向け解説】

✅ 手順③：コードブロックのHTMLを記事に挿入



<div class="code-block">
  <pre class="line-numbers"><code class="language-html">
<h1>こんにちは</h1>
  </code></pre>
</div>
上記コードをHTML編集画面で貼り付けると、以下のように表示されます
　　　　　　　　　　　　↓


こんにちは

🎁 おまけ：自動でHTMLを生成したい方へ

コードを自分で手書きしなくても、HTMLをサクッと作成できる便利なツールを用意しています。

👉コードブロックジェネレーターはこちら

これで、あなたのブログに見栄えのよいコードブロックとコピーボタンが簡単に導入できます。お疲れさまでした！

QooQ