ワンタッチでテキストをコピーするボタンを設置できるプラグインをご紹介いたします。
テキストや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サイトのクーポンコードのコピーボタン
特にスマホでは思い通りの箇所をタップして選択しにくいので、ワンタッチでコピーできるボタンがあるだけでユーザーのストレスを軽減できると思います。
ソースコードに特化したものであれば、下記のプラグインも便利なので参考にご覧ください。
プログラミングのハウツー系のブログ記事では、ソースコードのサンプルを記載することも多いと思います。ただ、WordPressデフォルトでは、色が変わらず、行数も表示されないので見やすいとはいえません。 そこで今回は、記事内のソースコードを見やすくするプラグイン「Highlighting Code...
まとめ
コピーボタンを設置できるシンプルなプラグインですが、ユーザー体験を少し向上させられるかもしれません。コピーボタンの有無というわずかな差とはいえ、ユーザーの操作を1ステップ省略できるからです。
細部の操作感を追求していくことは、サイトやサービス全体の使いやすさの向上にも繋がると思います。
説明の一部に画像が少なくてとても分かりにくいです。
ご意見ありがとうございます。画像を追加いたしました。スムーズに設定いただけますと幸いです。