ワンタッチでテキストをコピーするボタンを設置できるプラグインをご紹介いたします。
テキストやURL、クーポンコードなどをコピーすることは多いと思いますが、対象にカーソルを合わせる必要がなく、ワンタッチでコピーできるのでノンストレスでスムーズにテキストを再利用いただけます。特にタップで選択しにくいスマホで効果を発揮すると思います。
「Copy Anything to Clipboard」とは
コピーボタンを設置するだけのシンプルなプラグインですが、ECサイトなどで限定のクーポンコードを配ったり、間違わずにコピペしてもらいたい記述やテキストがある場合にご活用いただけます。主な機能は以下の通りです。
- タグで挟むだけでどこでも設置可
- 3種類からスタイルを選べる
- 各種表示テキストも変更可
3種類のスタイルはそれぞれこのように表示されます。
管理画面から「Copy Anything to Clipboard」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
「Copy Anything to Clipboard」の使い方
有効化したらプラグインの画面から「Add new」を押してコピーボタンを設置するタグを設定します。
下記ページでそれぞれ設定していきますが、右側にプレビューされるのでとても簡単です。デフォルトのままでも使えますが、各機能を解説いたします。
6つの項目を上から順に解説いたします。
| 項目名 | 用途 |
| Selector | ここに設定されているタグで対象のテキストを囲むことでコピーボタンを設置できます。デフォルトではpreになっており、特に変更しなくても使えますが、お使いのテーマによっては干渉する場合があるので、任意のものに変更してもいいかもしれません。 |
| Style | ボタンのスタイルを3種類から選択いただけます。当記事冒頭でご覧いただいた3種類です。
サイトのデザインやテキストの長さなどに合わせて適宜変更してみてください。 |
| Button Position | ボタンの位置をテキストエリアの中か外か変更できます。StyleでButtonかSVG Iconを選択時のみ表示されます。 |
| Button Text | ボタンに表示するテキストを変更できます。「コピーする」などに書き換えられます。 |
| Button Copy Text | コピー後に表示するテキストを変更できます。「コピーしました！」などに書き換えられます。 |
| Button Title | ボタンホバー時に表示するテキストを変更できます。StyleでButtonを選択時にのみ表示されます。目立たない箇所ですが、「クリップボードにコピーします」などに書き換えられます。 |
あとは、最下部の「Create」をクリックして完了です。「Selector」で設定したタグで任意のテキストを囲んでみてください。フロント画面でコピーボタンが表示されます。投稿記事はもちろん、固定ページでもお使いいただけます。
至ってシンプルな機能ですが、使えるシーンは多いと思います。例えば以下のような感じですね。
- プログラミング系のサイトで、ソースコードをコピーするボタンとして
- 語学関連のサイトで、表現やフレーズをコピーするボタンとして
- スマホユーザーが多いサイトで、タップでコピー可能なボタンとして
- ECサイトで、クーポンコードのコピーボタンとして
特にスマホでは思い通りの箇所をタップして選択しにくいので、ワンタッチでコピーできるボタンがあるだけでユーザーのストレスを軽減できると思います。
ソースコードに特化したものであれば、下記のプラグインも便利なので参考にご覧ください。
まとめ
コピーボタンを設置できるシンプルなプラグインですが、ユーザー体験を少し向上させられるかもしれません。コピーボタンの有無というわずかな差とはいえ、ユーザーの操作を1ステップ省略できるからです。
細部の操作感を追求していくことは、サイトやサービス全体の使いやすさの向上にも繋がると思います。