ブログパーツ生成ツール：コピペボタン付きソースコードブロック

ブログにコードを載せるときにどうやって載せようか悩みませんか？コードを読者に手軽に使ってもらえるように、コピー機能付きのコードブロックを作りました。また、ブログをスマホで更新することが多い方にも便利なように、コードブロック内をその場で編集できる機能も追加してみました。よければ参考にしてください。

コピペ可能：HTMLのコードブロック

コピーボタン付きのコードブロックを生成するための使用手順を説明します。

手順1: コードを入力
入力フォームに自分のコードを貼り付けます。
手順2: 「コードを反映」ボタンを押す
入力したコードが自動的にHTMLエスケープされ、下のコードブロックに反映されます。
手順3: 「コードをコピー」ボタンを押す
コードブロック内のHTMLがそのままコピーされます。あとはHTMLとしてあなたのサイトに貼り付けするとコピーボタン付きのコードブロックになります。
※入力したデータはサーバーに送信していません（JavaScriptのみで処理）。もう一度反映させたい場合は、再度リロードしてください。

<div class="code-container">
    <button class="copy-btn">コードをコピー</button>
	<pre><code>
YourCode
	</code></pre>
</div>
    

ツール使用例

実際に、このツールを使ってソースコードをブログに貼るところまでの使用例を説明します。

1. コードに自分のコードを貼ります。
   

   <div style="display: flex; justify-content: center; margin: auto; max-width: 320px;">
       <a href="画像1" style="width: 45%;margin: 1px;">
           <img src="画像1" style="height: 320px; object-fit: cover; width: 100%;" />
       </a>
       <a href="画像2" style="width: 45%;margin: 1px;">
           <img src="画像2" style="height: 320px; object-fit: cover; width: 100%;" />
       </a>
   </div>

2. コード反映ボタンを押します。
   変な文字になっているように見えますが、そのままコピペできるようにHTML部分がエスケープされています。
   

   <div class="code-container">
       <button class="copy-btn">コードをコピー</button>
   	<pre><code>
   &lt;div style=&quot;display: flex; justify-content: center; margin: auto; max-width: 320px;&quot;&gt;
       &lt;a href=&quot;画像1&quot; style=&quot;width: 45%;margin: 1px;&quot;&gt;
           &lt;img src=&quot;画像1&quot; style=&quot;height: 320px; object-fit: cover; width: 100%;&quot; /&gt;
       &lt;/a&gt;
       &lt;a href=&quot;画像2&quot; style=&quot;width: 45%;margin: 1px;&quot;&gt;
           &lt;img src=&quot;画像2&quot; style=&quot;height: 320px; object-fit: cover; width: 100%;&quot; /&gt;
       &lt;/a&gt;
   &lt;/div&gt;
   	</code></pre>
   </div>

3. コードをコピーのボタンを押します。
4. HTML編集画面で貼り付けます。
   以下のような表示になります
   コードをコピー

   
   <div style="display: flex; justify-content: center; margin: auto; max-width: 320px;">
       <a href="画像1" style="width: 45%;margin: 1px;">
           <img src="画像1" style="height: 320px; object-fit: cover; width: 100%;" />
       </a>
       <a href="画像2" style="width: 45%;margin: 1px;">
           <img src="画像2" style="height: 320px; object-fit: cover; width: 100%;" />
       </a>
   </div>
   	

事前設定：JavaScript

HTMLをコピペする前にコピーボタンの動作のためにJavaScriptを設定しておいてください。コードブロックだけあればよくて、コピーボタンは必要ないという方はHTMLから<button class="copy-btn">コードをコピー</button>を削除すればこの設定は必要ありません。

document.addEventListener('DOMContentLoaded', () => {
    // すべてのコピー用ボタンを取得
    const copyButtons = document.querySelectorAll('.copy-btn');

    // 各ボタンにイベントリスナーを追加
    copyButtons.forEach((copyBtn) => {
        copyBtn.addEventListener('click', () => {
            // 対応するコードブロックを取得（親要素内の<code>タグ）
            const codeBlock = copyBtn.closest('.code-container').querySelector('code');

            // コードのテキストを取得
            const codeText = codeBlock.textContent.trim();

            // クリップボードにコピー
            navigator.clipboard.writeText(codeText)
                .then(() => {
                    // コピー完了メッセージを一時的に表示
                    copyBtn.textContent = 'コピーしました!';
                    setTimeout(() => {
                        copyBtn.textContent = 'コードをコピー';
                    }, 2000);
                })
                .catch((err) => {
                    console.error('コピーに失敗しました:', err);
                });
        });
    });
});
	

事前準備：CSS設定

HTMLをコピペする前にCSSを事前に設定しておいてください。

.code-container {
    position: relative;
    background-color: #ececec; /* 背景を薄い灰色に */
    padding: 2px;
    border-radius: 5px;
    border: 1px solid #dcdcdc; /* 枠を薄灰色に */
    overflow: auto;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.code-container .copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #10a37f;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.2s;
}

.code-container .copy-btn:hover {
    opacity: 1;
    transform: scale(1.05); /* ボタンを少し大きく */
}
.code-container .copy-btn:focus {
    outline: none; /* フォーカス時のアウトラインを削除 */
}
/* コードのスタイル */
.code-container pre {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Courier New', Courier, monospace;
}
	

まとめ

やりたいことはできたので個人的には満足です。今後、ブログのパーツを作るときは今回のように入力フォーム付きで作っていこうと思います。