ブログを書いていて、こんな場面、ありませんか。
「このショートコード、ぜひ使ってみてください」と記事に載せたものの、読者が手入力でポチポチ…途中で間違える…そっとブラウザバック。
伝えたい情報はちゃんとある。なのに「コピーしにくい」というたった一つの不便さで、読者との縁が切れてしまう。地味に悔しいですよね。
かといって、コピーボタン一つのためにプラグインを何個も入れるのは気が引きるし、テーマのコードブロックはなんとなく無骨で、デザインに馴染まない。
そんなジレンマを解消してくれたのが、Lazy Blocks PRO でした。
まず、何ができるのか見てほしい
今回作ったカスタムブロック、ひと言で言うと「小さくて、賢い」です。
初期状態ではインラインにコンパクトに収まっていて、長いテキストは「…」でさりげなく省略。邪魔にならない。でも、ホバーするとスルッと全文が展開される。記事のレイアウトを一切乱さないまま、情報は全部そこにある、という設計です。
そしてコピーボタンを押した瞬間、アイコンがくるっとチェックマークに回転して、やさしいグリーンに変わる。「コピー完了！」のひと言がスライドインして、2秒後に静かに元に戻る。
説明すると長いけど、実際に触るとわかりやすいです。
KHGNIIUHYIGYUBL
3つの機能を、もう少し詳しく
① 省スペースとホバー展開——「置けない」を「置ける」に変える
長いショートコードをそのまま貼ると、記事の流れがガタッと崩れることがあります。このブロックは、初期状態では最大幅に収まるように自動省略。読者がマウスを乗せると、なめらかなアニメーションで全文が現れます。
「全部見せたいけど、邪魔にはなりたくない」という、ちょっとわがままな願いを叶えてくれる機能です。
マウスオーバーで全文表示されます。長い文字列も表示することができます。
② コピー完了アニメーション——「本当にコピーできた？」をなくす
コピーボタン系のUIで地味に重要なのが、「コピーできたかどうかの手応え」です。何も反応がないと、読者はもう一回押してみたり、不安なまま貼り付けたりする。
このブロックでは、ボタンを押した瞬間にアイコンが回転してチェックマークへ変化、ボタン全体がグリーンになり、完了メッセージがスライドイン。「確実に届いた」という安心感が生まれます。
2秒後に元に戻るのも、さりげなく親切な仕様です。
③ 配置とメッセージの自由な設定——サイトの「文脈」に合わせられる
ブロックの配置は左・中央・右から選べるので、記事の文脈に自然に溶け込ませることができます。
さらに地味に便利なのが、コピー完了メッセージを自由に変えられる点。「コードをコピーしました」だけじゃなく、「クーポン取得！」「URLをコピー」「コマンドをコピーしました」など、その場の文脈に合ったひと言を添えられる。
マイクロコピー一つで、読者の「あ、ちゃんとできた」感がぐっと上がります。
TDKSHIWMPJ
「既存プラグインじゃダメなの？」という疑問に答えておく
正直に言います。用途が違います。
WordPressの標準コードブロックや、シンタックスハイライター系のプラグインは、複数行にまたがるプログラムコードを「きれいに読ませる」ために作られています。
複雑なコードをじっくり読んでほしいとき、あれ以上のものはないと思う。
ただ、今回の用途は違います。「1行のショートコード」「クーポンコード」「URLの一部」——記事に自然に埋め込みたい、小さくてコピーしやすいテキストです。
そこに大型プラグインを持ち込むのは、画鋲を打つのにハンマーを使うようなもの。
Lazy Blocks PROで作ったこのブロックなら、外部ライブラリの読み込みもなく、テーマの仕様にも依存しない。サイドバーから配置もメッセージも変えられるから、使い回しも楽です。
「痒いところに手が届く」——ブログ運営でこの感覚は意外と大事だと思うんです。
配布用JSONファイルダウンロード
以下のリンクから、今回作成した「コピー付きスニペット」の設計図（JSONファイル）をダウンロードしてください。
※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください
【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」
ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。
一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。
このデザインをあなたのブログで実装するには、Lazy Blocks PRO が必要です。
| プラン名 | ライセンス数 | 価格 (年額) | 主な機能 |
|---|---|---|---|
| Personal | 1 サイト | $49 （税込み$53.90） | すべてのPro機能 1年間の更新 |
| Freelancer | 20 サイト | $99 （税込み$108.90） | |
| Agency | 無制限 | $199 （税込み$218.90） |
Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。
プラグインの有効化
Lazy Blocks公式サイトのヘッダーまたはページ内にある「Go Pro」ボタンをクリックします。
2. プランを選択して決済
用途に合わせてPersonal ($49)、Freelancer、Agencyから選択し、クレジットカードやPayPalで決済を完了させます。
ダウンロード & 入手
決済完了後の画面、または届いたメールのリンクから「lazy-blocks-pro.zip」をダウンロードします。
2.WPへアップロード
WP管理画面「プラグイン ＞ 新規追加 ＞ アップロード」からZIPを選択してインストール・有効化します。
ライセンス有効化
インストール後、管理画面のメニューにある Lazy Blocks ＞ Updates を開きます。
2.キーを入力して完了
購入時のメールに記載されている「License Key」をコピー＆ペーストし、有効化ボタンを押せばPro版の機能が解放されます。
デザインを導入する手順
導入は非常に簡単です。
Updetesを開く
JSONファイルをインポート
プラグインの有効化
「プラグインのじかん」からの提案
「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」
私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。
しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。
当サイト「プラグインのじかん」では、今回紹介したボタン以外にも、成約率を上げるための高品質なカスタムブロックを多数公開しています。 PRO版を1つ持っておくだけで、これらのデザインがすべてあなたのサイトで使い放題になるので、ぜひチェックしてみてください。
他の Lazy Blocks PRO 専用デザインを見てみる
※今後も随時追加していきます。
また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！
さらに詳しく知りたい方へ
Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。
