ためセル！では、広告を掲載しています。

記事内のテキストや掲載したコードをコピーするためのコピーボタンを導入する方法

サイトでためセル！

2023.09.302023.10.21

この記事は約10分で読めます。

この記事は2人の方が役に立ったと答えています。

サイト内で「〇〇を検索してください。」とご案内したり、エクセルマクロのコードやCSS、JavaScriptなどのコードを掲載しているときに、ボタンひとつでコピーができると、使い勝手のいいサイトだと思います。

ためセル！でも、下の例のようにエクセル関数をご紹介するときには、コピーボタンが表示されるようにしています。

=SUM(A1:A10)

ということで、このページでは記事内のテキストや掲載したコードをコピーするためのコピーボタンを導入する方法についてご紹介します。

スグにためセル！ – ここを読めばすぐ使える

コピーボタンを追加する方法

Step1
JavaScriptコードをコピペする

ここをクリックしてJavaScriptコードに移動
Step2
CSSをコピペする

ここをクリックしてCSSに移動
Step3
コピーボタンをつけたいテキストをで囲む

役に立った

※　より詳しい解説はここから下に続きます。

コピーボタンの実装例

最初にサンプルをお見せしましょう。

下にあるのは、ためセル！のURLですが、コピーのアイコンをクリックすると、URLがコピーされます。

https://tamecell.net

しかも、ボタンを押すと「コピーしました」って吹き出しが出てくるようになっていますね。

それでは、ちゃんとコピーできたのか、下のテキストボックスに貼り付けてみてください。

どうですか？ちゃんとコピーできているでしょ？

文章の途中でも「こんな感じ」でコピーボタンを追加することができます。

また、コードエリアの場合は、下のように右上にコピーボタンが表示されます。これをクリックすることでコード全体のコピーができます。

<script type="text/javascript">
  alert('Hello World');
</script>

ためセル！

貼り付けテストはこちらにどうぞ。

ここまで見てわかるように、１つのページに複数のコピーボタンを設置することも可能なのです。
そのため、下のようなリストの項目それぞれにもコピーボタンをつけることができます。

これまで導入したWordPressプラグイン

Broken Link Checker
Edit Author Slug
EWWW Image Optimizer

コピーボタンの導入方法

では、ここまで実装例を見ていただいたので、ここから導入方法をご紹介していきましょう。

このコピーボタンはJavaScriptで動いています。そのため、下のコードを貼り付けるとコピーボタンが使えるようになります。

ここからは、テーマファイルやHTMLファイルなどを直接編集します。この編集を間違えると、最悪サイトが表示されなくなる場合もありますで、編集するファイルは必ずバックアップを取り、自己責任の上で作業を行ってください。

ヒント

WordPressでは、管理メニューの「外観」の中にある「テーマファイルエディター」で、直接テーマファイルやHTMLファイルを編集できます。

また、「WP Editor」というプラグインを導入することで、テーマファイルエディターを使いやすくすることができます。

「WP Editor」プラグインについては、下のページで詳しく解説していますので、こちらをご覧いただき、プラグインを導入してみてください。

JavaScriptコード

コピーボタンを追加するJavaScriptはこちらです。
WordPressサイトの場合は、テーマファイルフォルダにある「javascript.jp」ファイルにこのコードを追記してください。

var cpytxt = $('.cpytext, .wp-block-code');
cpytxt.append('<button class="cpybtn"><i class="far fa-copy"></i></button>'); 
var btn = $('.cpybtn');
btn.on('click', function() {
  var cpytxt = $(this).parent().text();
  navigator.clipboard.writeText(cpytxt);
  $(this).parent().prepend('<span class="balloon_top">コピーしました！</span>');
  setTimeout(() => $(this).parent().find('span.balloon_top').remove(), 1000);
});

ためセル！

せっかくなので、このコードは、右上のコピーボタンを使ってコピーしてね。

CSSコード

次に「style.css」を開いて、次のコードを貼り付けます。

/************************************
** コピーボタン関係
************************************/
.cpytext{
    position: relative;
}
button.cpybtn{
    cursor: pointer;
    color: #8d8989;
    font-size: 17px;
    border: 1px solid #333;
    margin: 0px 5px;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
}
.balloon_top {
    width: 150px;
    position: absolute;
    bottom: 100%;
    margin-bottom: 15px;
    padding: 8px;
    border-radius: 10px;
    background-color: #666666c7;
    font-size: 0.7em;
    color: #fff;
    text-align: center;
    z-index: 1;
}
.balloon_top::before {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 12px solid #666666c7;
    position: absolute;
    top: 99%;
}
pre.wp-block-code {
    position: relative;
}
pre button.cpybtn{
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #333;
    color: #fff;
    border: 1px solid #666;
    border-radius: 8px;
}
pre .balloon_top {
    bottom: initial;
    right: 60px;
    top: 5px;
    background-color: #333;
}
pre .balloon_top::before {
    border: 10px solid transparent;
    border-left: 12px solid #333;
    right: -22px;
    top: initial ;
}

これで準備は完了です。

コピーボタンの使い方

それでは、実際に記事内にコピーボタンを追加する方法をご紹介します。

本文中にコピーボタンを追加する方法

基本的な使い方としては、コピーしたい文字に「cpytext」クラスを付けてあげるだけです。

例えば、ブロックエディタを使っている場合は、下の図のように、まずは文字を入力して、上のメニューから「HTMLとして編集」をクリックします。

そして、コピーしたい用語を「」と「」で囲んであげます。

こうして公開してみると、下のようにコピーボタンが追加されます。

例えば、りんごをコピーする。

ためセル！

ただ、HTMLとして編集するのは少しめんどくさいです・・・。

現状、ブロックエディタでは、このような方法でコピーボタンを追加するしかありませんが、プラグインを追加することで、もっと楽に入力することができますので、今後、ご紹介したいと思います。

コードにコピーボタンを追加する方法

コードエリアにコピーボタンを追加する方法については、特に何もする必要はありません。

というのも、コードブロックを追加すると、自動的にコピーボタンが表示されるようになっています。

そのため、下の図のようにコードブロックを追加して、公開すると、コピーボタンが表示されているはずです。

注意点としては、コピーボタンが追加されるのは「wp-block-code」クラスのコードエリアだけです。
そのため、上の方法で追加したコードエリアに「wp-block-code」クラスがついていない場合は、「cpytext」クラスを追加してあげる必要があるので、その点は注意してください。

コードのちょっとした解説

カスタマイズできるように、少しだけコードの解説を行いましょう。

JavaScriptの解説

このスクリプトでは、最初に「cpytext」クラスと「wp-block-code」クラスにコピーボタンを追加しています。

var cpytxt = $('.cpytext, .wp-block-code');
cpytxt.append('<button class="cpybtn"><i class="far fa-copy"></i></button>');

上の１行目が、対象としているクラスを指定している部分です。

そのため、クラスを変更したい場合は、ここを変更してください。

変更するときの記述方法ですが、CSSなどと同じように最初にピリオド「.」を入れてクラス名を入力してください。例えば、「cpytext」クラスであれば、「.cpytext」となります。

また、複数のクラスを追加したい場合は、半角コンマ「,」で区切って入力してください。

２行目の「」は、コピーボタンに使うアイコンを示しています。

アイコンは下のサイトから検索できます。WordPressテーマ「Cocoon」を使っている場合は、特に設定することなく、アイコンが使えるはずです。

Font Awesome v.4.7.0 | Bootstrap Cheat Sheets

また、アイコンではなく、テキストにすることも可能です。
例えば「Copy」や「コピー」などに変更しても構いません。
（この場合は、CSSファイルでbutton.cpybtnのwithを変更しないと文字がはみ出してしまうことに注意。）

次は後半部分のコードです。

var btn = $('.cpybtn');
btn.on('click', function() {
  var cpytxt = $(this).parent().text();
  navigator.clipboard.writeText(cpytxt);
  $(this).parent().prepend('<span class="balloon_top">コピーしました！</span>');
  setTimeout(() => $(this).parent().find('span.balloon_top').remove(), 1000);
});

後半は、コピーボタンを押したときの処理を記述しています。

４、５行目で、ボタンが押されたら、そのボタンが追加されているHTML要素のテキストを取得しています。

６行目では、そのテキストをクリップボードに書き込んでいます。こうすることで、結果的にコピーしたことになるのです。

７行目は、「コピーしました！」の吹き出しを表示する処理です。
吹き出しの表現を変えたい場合は、ここを修正してください。

８行目は、この吹き出しを表示する時間を設定しています。「1000」の部分が時間を表しており、単位としてはミリ秒になっています。つまり、ここでは１秒間だけ吹き出しを表示するように設定しているということです。

ためセル！

こちらも、好みに合わせて時間を変更してください。

CSSの解説

CSSは、コピーボタンとコピーした後に表示される吹き出しのスタイルを設定しています。
「button.cpybtn」がコピーボタン用のスタイルで、「.balloon_top」が吹き出し用のスタイルです。
「.balloon_top::before」は、吹き出しのしっぽの部分のスタイルです。

また、本文中のスタイルとコードブロック用のスタイルで分けて記述しており、「pre」とついている方がコードブロック用のスタイルです。

CSSの中身についての説明は省略しますが、背景色や文字色などを好みに合わせて変更してもいいでしょう。

まとめ

コピーボタンを導入しておけば、サイトを見た方が、わざわざテキストを選択してコピーする必要がなくなり、ボタンひとつでテキストをコピーできるので、サイトの使い勝手が向上すると思います。

また、サイト管理者側からしても、コピーさせたい部分を示すことができるという面もあります。
さらに、仮にサイト上で右クリックを禁止している場合は、意図的にコピーできる箇所を制限することもできます。

ためセル！のようにエクセルの計算式をご紹介したり、プログラムのコードなどをご紹介しているサイトでは、とても便利な機能だと思いますので、ぜひ参考にしてください。

以上、このページでは記事内のテキストや掲載したコードをコピーするためのコピーボタンを導入する方法についてご紹介しました。