コピーボタンは、短いURLやコードを間違えずに受け渡すために使います。まずテーマの既存機能を確認し、独自の表示が必要な場合は下のデモで「表示→コピー→貼り付け」を試してください。
このブロックの入力欄はText・Toggleですが、見た目とコピー処理はStyles & Scripts（Pro）のCSS・JavaScriptを使います。配布JSONは、その出力機能がある既存環境向けです。コントロールの種類だけを見て「無料版だけで動く」とした以前の案内を訂正します。
Lazy Blocks自体をまだ触ったことがなければ、まず無料版で操作に慣れるところからで大丈夫です。
インストール手順はLazy Blocks使い方完全ガイドにまとめています。
このブロックが向くのは、1行のコマンド、ショートコード、クーポンコードなどを本文の近くに置く場面です。
手入力が必要な文字列は、一文字の違いでも使えなくなることがあります。コピー先で使える状態の文字列を用意し、ボタンから渡せるようにします。
ただし、ボタンの設置だけで離脱が減るとは言い切れません。読者が内容と用途を理解し、コピー後に何をすればよいか分かる説明も必要です。
テーマや既存プラグインにコピー機能がある場合は、まずそれで足りるかを確認します。独自の見た目や完了文言を使い回したい場合に、この実装を検討してください。
ここでは、Lazy Blocks Proで入力欄と表示をまとめた実装を紹介します。
まず、何ができるのか見てほしい
特徴は、短い文字列をコンパクトに置き、ボタンでコピーできることです。まずデモを操作し、必要な表示幅を確かめましょう。
長い文字列は初期表示で省略し、ホバーで展開します。スマホにはマウス操作がないため、公開時にはタッチでの読みやすさも確認してください。
そしてコピーボタンを押した瞬間、アイコンがくるっとチェックマークに回転して、やさしいグリーンに変わる。「コピー完了！」のひと言がスライドインして、2秒後に静かに元に戻る。
説明すると長いけど、実際に触るとわかりやすいです。
KHGNIIUHYIGYUBL
3つの機能を、もう少し詳しく
① 省スペースとホバー展開——「置けない」を「置ける」に変える
長いショートコードをそのまま貼ると、記事の流れがガタッと崩れることがあります。このブロックは、初期状態では最大幅に収まるように自動省略。読者がマウスを乗せると、なめらかなアニメーションで全文が現れます。
省略がある場合は、読者がコピーする内容を誤解しないことも大切です。重要な引数やURLの用途は、本文側で説明しておきます。
マウスオーバーで全文表示されます。長い文字列も表示することができます。
② コピー完了アニメーション——「本当にコピーできた？」をなくす
コピーボタン系のUIで地味に重要なのが、「コピーできたかどうかの手応え」です。何も反応がないと、読者はもう一回押してみたり、不安なまま貼り付けたりする。
コピー完了時はチェックマークとメッセージで結果を示します。導入後は実際にメモ帳などへ貼り付け、元の文字列と一致するか確認してください。
2秒後に元に戻るのも、さりげなく親切な仕様です。
③ 配置とメッセージの自由な設定——サイトの「文脈」に合わせられる
ブロックの配置は左・中央・右から選べるので、記事の文脈に自然に溶け込ませることができます。
さらに地味に便利なのが、コピー完了メッセージを自由に変えられる点。「コードをコピーしました」だけじゃなく、「クーポン取得！」「URLをコピー」「コマンドをコピーしました」など、その場の文脈に合ったひと言を添えられる。
マイクロコピー一つで、読者の「あ、ちゃんとできた」感がぐっと上がります。
TDKSHIWMPJ
中身はどうなっているのか
コピー処理そのものは、navigator.clipboard.writeText()というブラウザ標準のAPIを1行呼んでいるだけです。
if (!navigator.clipboard || !navigator.clipboard.writeText) {
console.error('このブラウザはクリップボードコピーに対応していません');
return;
}
navigator.clipboard.writeText(textToCopy).then(function() {
btn.classList.add('is-copied'); // ここでCSSアニメーションが発火
setTimeout(function() {
btn.classList.remove('is-copied');
}, 2000);
});is-copiedクラスが付くと、実際にはこう変化します。
ここで正直に書いておきたい制限が1つあります。
navigator.clipboardは原則としてHTTPSなどのセキュアコンテキストで利用します。端末やブラウザの制約もあるため、ボタンが動かない場合は、まずURLと権限・エラーを確認してください。
この配布コードでは、失敗時の処理はconsole.error()です。画面に失敗通知が出ないため、コピーできないときにも本文を選択して取得できるか確認しておきましょう。
「既存プラグインじゃダメなの？」という疑問に答えておく
複数行のコードを読ませる用途と、短い文字列をコピーしてもらう用途で選びます。
WordPressの標準コードブロックや、シンタックスハイライター系のプラグインは、複数行にまたがるプログラムコードを「きれいに読ませる」ために作られています。
長いコードの説明には、行番号や構文の色分けがある既存のコード表示機能が便利です。
ただ、今回の用途は違います。「1行のショートコード」「クーポンコード」「URLの一部」——記事に自然に埋め込みたい、小さくてコピーしやすいテキストです。
短い文字列だけを渡す場合は、必要な機能が少ない方が設定と保守を把握しやすくなります。
このブロックは外部ライブラリを使わず、投稿画面から配置や完了メッセージを変更できます。テーマのCSSと競合する可能性はあるため、実際のページで確認してください。
まず一つのコードで「表示→コピー→貼り付け」まで試し、問題がなければ他の記事にも使い回します。
コピーする内容と、設置方法を先に選ぶ
| 目的 | 選び方 |
|---|---|
| 短いURLや一行コード | 今回のコンパクトなブロック。何をコピーするかを本文にも書く。 |
| 複数行の長いコード | 全文を読めるコード欄とコピー機能を組み合わせる。改行とインデントを保つ。 |
| 既存の本文の一部分 | コピー対象を明示し、ボタンごとに対象が混ざらない設計にする。 |
テーマにコピー機能があれば、先にそれを使います。追加プラグインを選ぶ場合は、コピーする範囲・成功と失敗の表示・複数設置への対応で比較します。手書きのHTMLとJavaScriptで実装する場合は、同じIDをページ内で重複させないようにしてください。
Clipboard APIのwriteText()は安全なコンテキストで動作し、許可されない場合はエラーになります。「コピーしました」を先に出すのではなく、書き込みが成功してから表示する必要があります。ここに載せた配布コードは失敗をコンソールへ出すため、表示上の失敗案内が必要な運用では追加実装が必要です。
試す文字列には、日本語・記号・改行・長いURLを含めます。ボタンを押した後にメモ帳へ貼り付け、画面で省略された部分も含めて一致するかを確認してください。コピー後の文字列を意図せず実行させず、コマンドなら何をするものか説明を添えます。
配布用JSONファイルダウンロード
JSONをダウンロードしたら、検証用ページへインポートしてください。コピー対象、完了メッセージ、リンクではないことの分かりやすさを確認してから公開します。
入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。
配布データの動作条件と読み込み手順
この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。
CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。
- 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
- 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
- 見出し・本文・画像・URLを自分の内容へ置き換える。
- PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
- 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。
設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。
