ブログにコピーをボタンを置く

スポンサーリンク

スクリプトやサンプルHTML、CSSなどを記事で書く場合にコピーボタンを置いて利便性を上げるための方法です。WordPressでも使える内容です。

コピーを行いたい! という場合にご活用ください。

スクリプトをコピー

まず最初に、ボタンが押された際の動きを定義するスクリプトを作ります。

以下のサンプルをコピーし、WordPressの場合は「カスタム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です。次の項目の「ボタン」の近くにある必要はありません。

ボタンを作る

次にコピーを行うボタンを作ります。ここではボタンを作る方法を2種類紹介します。

いずれかの方法でボタンを作ってください。※ボタンが表示できたら次の「コピー元テキストの設定」にいきましょう。

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″」という項目があるので、そこの数字を変更してください!

最後に

以上がコピーボタンのためのスクリプトでした!

記事内でサンプルを多く使う場合、ぜひ導入してみてください! この記事の下に念のため貼り付けテストをできるエリアを置いています。ご活用ください。

( ゚д゚)!<見つかった!) 最後までお読みいただき感謝です! その他の記事もぜひ見ていってくださいませ。