WordPressブログに「コピーボタン」を実装！Lazy Blocks Proで作る最強スニペット

先に訂正しておきます。

このブロックが使っているコントロールはText・Toggleだけ。
種類の面ではたしかに無料版の範囲です。

ただ、コピーボタンの見た目と「クリックでコピー」の処理は、ブロック定義のCSS/JSタブ（Styles & Scripts）に書いています。

この欄はPro版でしか出力されません。
無料版は値を保存できても、ページへ書き出す処理そのものを持っていないからです。

以前ここに「無料版だけで動きます」と書いていましたが、コントロールの種類しか見ていませんでした。訂正します。
配布JSONをそのまま読み込んで動かすにはPro版が必要です。

Lazy Blocks自体をまだ触ったことがなければ、まず無料版で操作に慣れるところからで大丈夫です。
インストール手順はLazy Blocks使い方完全ガイドにまとめています。

ブログを書いていて、こんな場面、ありませんか。

「このショートコード、ぜひ使ってみてください」と記事に載せたものの、読者が手入力でポチポチ…途中で間違える…そっとブラウザバック。

伝えたい情報はちゃんとある。なのに「コピーしにくい」というたった一つの不便さで、読者との縁が切れてしまう。地味に悔しいですよね。

かといって、コピーボタン一つのためにプラグインを何個も入れるのは気が引きるし、テーマのコードブロックはなんとなく無骨で、デザインに馴染まない。

そんなジレンマを解消してくれたのが、Lazy Blocks PRO でした。

まず、何ができるのか見てほしい

今回作ったカスタムブロック、ひと言で言うと「小さくて、賢い」です。

初期状態ではインラインにコンパクトに収まっていて、長いテキストは「…」でさりげなく省略。邪魔にならない。でも、ホバーするとスルッと全文が展開される。記事のレイアウトを一切乱さないまま、情報は全部そこにある、という設計です。

そしてコピーボタンを押した瞬間、アイコンがくるっとチェックマークに回転して、やさしいグリーンに変わる。「コピー完了！」のひと言がスライドインして、2秒後に静かに元に戻る。

説明すると長いけど、実際に触るとわかりやすいです。

3つの機能を、もう少し詳しく

① 省スペースとホバー展開——「置けない」を「置ける」に変える

長いショートコードをそのまま貼ると、記事の流れがガタッと崩れることがあります。このブロックは、初期状態では最大幅に収まるように自動省略。読者がマウスを乗せると、なめらかなアニメーションで全文が現れます。

「全部見せたいけど、邪魔にはなりたくない」という、ちょっとわがままな願いを叶えてくれる機能です。

② コピー完了アニメーション——「本当にコピーできた？」をなくす

コピーボタン系のUIで地味に重要なのが、「コピーできたかどうかの手応え」です。何も反応がないと、読者はもう一回押してみたり、不安なまま貼り付けたりする。

このブロックでは、ボタンを押した瞬間にアイコンが回転してチェックマークへ変化、ボタン全体がグリーンになり、完了メッセージがスライドイン。「確実に届いた」という安心感が生まれます。

2秒後に元に戻るのも、さりげなく親切な仕様です。

③ 配置とメッセージの自由な設定——サイトの「文脈」に合わせられる

ブロックの配置は左・中央・右から選べるので、記事の文脈に自然に溶け込ませることができます。

さらに地味に便利なのが、コピー完了メッセージを自由に変えられる点。「コードをコピーしました」だけじゃなく、「クーポン取得！」「URLをコピー」「コマンドをコピーしました」など、その場の文脈に合ったひと言を添えられる。

マイクロコピー一つで、読者の「あ、ちゃんとできた」感がぐっと上がります。

中身はどうなっているのか

コピー処理そのものは、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化されたサイト（正確には「セキュアコンテキスト」）でしか使えないブラウザの仕様です。
常時SSL化していないサイトだと、ボタンを押しても何も起きません。今は常時SSLが当たり前なので実務上ほぼ困りませんが、知らずにハマると原因が分かりにくいので書いておきます。

もう1つ、コピーに失敗したときの処理はconsole.error()だけです。
読者の画面には何のエラーメッセージも出ません。致命的ではありませんが、「気づかれないまま無言で失敗する」設計だという点は、使う前に知っておいて損はないと思います。

「既存プラグインじゃダメなの？」という疑問に答えておく

正直に言います。用途が違います。

WordPressの標準コードブロックや、シンタックスハイライター系のプラグインは、複数行にまたがるプログラムコードを「きれいに読ませる」ために作られています。

複雑なコードをじっくり読んでほしいとき、あれ以上のものはないと思う。

ただ、今回の用途は違います。「1行のショートコード」「クーポンコード」「URLの一部」——記事に自然に埋め込みたい、小さくてコピーしやすいテキストです。

そこに大型プラグインを持ち込むのは、画鋲を打つのにハンマーを使うようなもの。

Lazy Blocks PROで作ったこのブロックなら、外部ライブラリの読み込みもなく、テーマの仕様にも依存しない。サイドバーから配置もメッセージも変えられるから、使い回しも楽です。

「痒いところに手が届く」——ブログ運営でこの感覚は意外と大事だと思うんです。

配布用JSONファイルダウンロード

以下のリンクから、今回作成した「コピー付きスニペット」の設計図（JSONファイル）をダウンロードしてください。

※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください

なお、当サイトのリンク経由でPro版を購入された方には、Pro版で動くブロックをまとめた限定ページをお渡ししています。

【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」

ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。

一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。

当サイトのこのシリーズで配布しているブロックは、いずれもLazy Blocks Proが必要です。

コントロールの種類自体は無料版の範囲のものが中心なのですが、見た目と動きを作っているCSS・JSをブロック定義の「Styles & Scripts」欄に置いており、この欄をページへ出力できるのがPro版だけだからです。

無料版プラグインのソースを確認したところ、この欄の値を保存する処理はあっても、出力する処理そのものが入っていませんでした。
無料版で読み込むと、HTMLは出るのに装飾も動作も効かない状態になります。

CSSとJSはどちらも素のコードなので、テーマの「追加CSS」やフッターへ手で移し替えれば無料版でも再現はできます。
ただ「JSONを読み込むだけ」で済ませたいなら、Pro版が前提になります。

Pro版を買うほどではない、という場合はLazyblocks 無料版で使えるブロックテンプレート集をどうぞ。
あちらはCSS・JSをブロック本体に直接埋め込んであるので、無料版のままで動きます。

Pro版があると、条件分岐(Controls Conditions)でこの記事のような複雑なブロックの編集画面を整理できたり、CSSとJSをブロックごとに分離できたりします。
1つのブロックのためだけでなく、今後も自作ブロックを増やしていく予定なら検討する価値があります。

プラン名	ライセンス数	価格 (年額)	主な機能
Personal	1 サイト	$49 （税込み$53.90）	すべてのPro機能 1年間の更新
Freelancer	20 サイト	$169 （税込み$185.90）
Agency	無制限	$299 （税込み$328.90）

Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。

デザインを導入する手順

導入は非常に簡単です。

「プラグインのじかん」からの提案

「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」

私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。

しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。

当サイト「プラグインのじかん」では、この記事のブロック以外にもカスタムブロックを作り続けています。

記事を1本ずつ回って集めなくても、Pro版で動くブロック36種を1か所にまとめてあります。
このページのリンク経由でPro版を購入された方に、そこを開くパスワードをお渡しする形です。

しかも渡して終わりではありません。新しく作ったブロックは同じ場所に追加していくので、一度受け取れば、あとから増えたぶんも追加料金なしで取りに来られます。

特典の中身と受け取り方を見る

※今後も随時追加していきます。

また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！

• お問い合わせはこちら

さらに詳しく知りたい方へ

Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。