スクリプトやサンプルHTML、CSSなどを記事で書く場合にコピーボタンを置いて利便性を上げるための方法で、WordPressでも使える内容です。
コピーを行いたい！ という場合にご活用ください。
動きの確認
まずはお使いの環境でこのコピーボタンがしっかりと機能するかをチェックしたいと思います。以下のサンプルを「カスタムHTML」のブロックに貼り付けてください。
<p class="copytxt-1">サンプル･:*+.\(( °ω° ))/.:+</p>
<button style="font-size:20px; color:#ffffff; background-color: #505050; padding:10px 45px; margin-top:0px; border-radius:10px;" type="button" class="copybtn-1">Copy</button>
<script>
$(function() {
$('.copybtn-1').on('click', function(){
let mytxt = $('.copytxt-1').text();
let $myarea = $('<textarea></textarea>');
$myarea.text(mytxt);
$(this).append($myarea);
$myarea.select();
document.execCommand('copy');
$myarea.remove();
alert("コピー完了");
});
});
</script>以下のように全てのコードをカスタムHTMLのブロック内に貼り付けます。
※カスタムHTMLのブロックが見つからない場合以下の手順で検索を！
タイトルを作る時のようにブロックの追加を行います。「カスタムHTML」が表示されているならそれを選び、表示されていない場合は「ブロックの検索」に「カスタム」と入力します。
貼り付けが完了したら、プレビューでページを表示しコピーボタンを押してください。上手く機能する環境なら、クリップボードにサンプルの文字列がコピーされます。（テキストファイルなどに貼り付けを行って確認してください）
コピーが上手くいった場合は、作り方を一つずつ解説していきます！ 今動きの確認のために貼り付けてもらった上の内容を消して、次の項目に進んでください。
スクリプトをコピー
まず最初に、ボタンが押された際の動きを定義するスクリプトを作ります。
以下のサンプルをコピーし、「カスタムHTML」のブロックに貼り付けてください。
<script>
$(function() {
$('.copybtn-1').on('click', function(){
let mytxt = $('.copytxt-1').text();
let $myarea = $('<textarea></textarea>');
$myarea.text(mytxt);
$(this).append($myarea);
$myarea.select();
document.execCommand('copy');
$myarea.remove();
alert("コピー完了");
});
});
</script>スクリプトはボタンが押された際の動きを定義する項目なので、プレビュー画面では見えない要素になっています。
スクリプトはカスタムHTMLに貼った後は、記事の下の方に置いておけばOKです。次の項目の「ボタン」の近くにある必要はありません。
ボタンを作る
次にコピーを行うボタンを作ります。ここではボタンを作る方法を２種類紹介します。
いずれかの方法でボタンを作ってください。※ボタンが表示できたら次の「コピー元テキストの設定」にいきましょう。
HTMLで作る
このサイトで使っているボタンです。下のサンプルをそのまま「カスタムHTML」のブロックに貼り付けるだけでOKです。
ボタンの見た目ですが、本来ならCSSで表示を整えるところですが、今回はサンプル内の「style」の項目で直接やってます。（ちょっと長いのは許してください。すいません。）
それぞれ文字の大きさや色を変更したい場合は、下のサンプルの「font-size」や「color」の項目で設定できます。
<button style="font-size:20px; color:#ffffff; background-color: #505050; padding:10px 45px; margin-top:0px; border-radius:10px;" type="button" class="copybtn-1">Copy</button>WordPressのボタンを使う
WordPressの場合、ブロックの中に「ボタン」があると思います。（テーマによって用意されていないかも……）
このボタンのブロック設定で、「高度な設定」項目に追加CSSクラスとして、今回のスクリプトで設定しているボタン用のクラス名を設定します。
今回のスクリプトでは「copybtn-1」としています。
※クラス名の設定の際、ボタンの文字入力を行う部分をクリックすると正しい場所が選択されます。ボタンブロックは「ボタンのグループ」にも高度な設定を行える場所があるので注意しましょう！
コピー元テキストの設定
コピー元のテキストにも「高度な設定」でクラス名を設定します。今回のスクリプトでは「copytxt-1」としています。
これを、下の例では「段落」のブロックに対して行っています。動きを確認したい場合は、段落でサンプルを作り「高度な設定」にクラス名を入れてみてください。
このほかにもコードのブロックやタイトルなども、コピー元テキストとして使えます。
これで、設定は完了です。実際にプレビューなどで動かせば、コピーを試せると思います。ボタンを押して確認してみてください！
使い方の応用
コピーボタンを、同じ記事内で複数回使う場合の方法についてです。そのまま使うと動きがおかしくなりますので、以下の点を変更した上でお使いください。
「元のスクリプト（この記事内のサンプルスクリプト）」をコピペで別のブロックとして増やします。その後赤枠内の数字を「 1 → 2 」に変更します。
あとはコピー元テキストの高度な設定に入れるクラス名を「copytxt-2」としてください。ボタンの方のクラス名は「copybtn-2」です。
ちなみにボタンをこの記事内のサンプルHTMLを使っていただいている場合は、HTML内に「class=”copybtn-1″」という項目があるので、そこの数字を変更してください！
最後に
以上がコピーボタンのためのスクリプトでした！
記事内でサンプルを多く使う場合、ぜひ導入してみてください！ この記事の下に念のため貼り付けテストをできるエリアを置いています。ご活用ください。
( ﾟдﾟ)！＜見つかった！） 最後までお読みいただき感謝です！ その他の記事もぜひ見ていってくださいませ。
