jQueryライブラリclipboard.jsでできるタイトルとURLのコピーボタン

8分

clipboardのイラスト

SHARE

国産で主流のWordPressテーマなら、SNSシェアボタンなど記事のURLのコピーが簡単にできますが、そんな機能がない場合、そこまで時間がかかる作業ではないですが、記事を共有する為にコピペが必要です。

この記事は、記事のタイトルとURLをボタン1個でコピーできるjQueryライブラリ clipboard.js について紹介します。

実装後のデザインサンプル

早速、実装後のサンプルです。

以下のボタンをクリックすると、その記事のタイトルとURLをコピーして、ボタンの表示テキストも「コピーしました」と変更になります。

この記事のタイトルとURLをコピーする

かかかず
かかかず

ボタンをクリックしたらテキストもコピーできているので、貼り付けしてみてください。

実装の手順と方法

手順の解説

実装の手順と方法について解説していきます。基本コピペの4つのSTEPで完了します。

かかかず
かかかず

順に解説していきます。

jQuery本体の読み込み

jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

clipboard.jsの記述

タイトルとURLのコピーには、ライブラリのclipboard.jsを使います。

ライブラリは、CDNで配信されているので以下のコードを<head>〜</head> に記述します。その際、jQuery本体より下に記述しましょう。

HTML 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

PHPの記述

ボタンを設置したい場所に、PHPで以下を設置します。

PHP 

<div class="copytext" data-clipboard-text="<?php the_title(); ?>
<?php the_permalink(); ?>">
<p>この記事のタイトルとURLをコピーする</p>
</div>

PHPのコードは、記事のエディタなどにそのまま記述しても出力されません。その為、ショートコード化や、テンプレートファイル化する必要がありますが、ショートコード の方が取り回しも良くオススメです。

以下の記事を参考にして作るなどして、貼り付けしましょう。

関連記事 プラグインなしでページ内にPHPを読み込む方法

CSSのコピペ

次にCSSをコピペします。

デザインは、サイトによって異なるので3種類用意してみましたので、自分のサイトにあったCSSをコピペください。

アイコン付きのフラットなボタン

この記事のタイトルとURLをコピーする

コードを表示する

CSS 

/* 001 */
.copytext {
    cursor: pointer;
    display: block;
    text-align: center;
    position: relative;
    background: #f1f1f1;
    padding: 10px 0;
    transition: 0.3s ease-in-out;
    font-weight: 400;
    max-width: 500px;
    margin: 30px auto;
}
.copytext p,  .copytext.isCopied p{
    position: relative;
    margin: 0;
    font-size: 0.95rem;
}
.copytext p:before {
    content: "\f0c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #aaaa;
    margin-right: 3px;
}

.copytext:hover {
    background: #ebfcfe;
    color: #6bb6ff;
}
.copytext:before, .copytext:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.copytext:before {
  top: 0;
  left: 0;
}
.copytext:after {
  bottom: 0;
  right: 0;
}
.copytext:hover:before, .copytext:hover:after {
  width: 100%;
  height: 100%;
}
.copytext:hover:before {
  border-top-color: #6bb6ff;
  border-right-color: #6bb6ff;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.copytext:hover:after {
  border-bottom-color: #6bb6ff;
  border-left-color: #6bb6ff;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}
.copytext.isCopied:before, .copytext.isCopied:after {
    width: 100%;
    height: 100%;
    border-color: #6bb6ff;
}
.copytext.isCopied {
    background: #6bb6ff;
    color: #FFF;
}
.copytext.isCopied p:before {
    content: "\f00c";
    color: #FFF;
}

アイコン部分はFontAwesome

このデザインのアイコン部分にはFontAwesomeを使っています。なので、このCSSではFontAwesomeとセットににしてお使いください。

立体的なボタン

この記事のタイトルとURLをコピーする

コードを表示する

CSS 

/* 002 */
.copytext {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #fcfcfc;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px -2px rgb(33 37 56 / 25%);
    border-radius: 0.45rem;
    border-color: rgb(80,80,80,0.1);
    cursor: pointer;
    text-align: center;
}
.copytext p {
    margin-bottom: 0;
}
.copytext:hover {
    opacity: 0.7;
}

線のボタン

この記事のタイトルとURLをコピーする

コードを表示する

CSS 

/* 003 */
.copytext {
    position: relative;
    display: block;
    margin: 30px auto;
    text-align: center;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    cursor: pointer;
}
.copytext p {
    margin-bottom: 0;
    position: relative;
}

.copytext:before,
.copytext:after {
	content: '';
	width: 18px;
	height: 18px;
	border-color: #313131;
	box-sizing: border-box;
	border-style :solid;
	display: block;
	position: absolute;
	transition: all 0.3s ease-in-out;
}
.copytext:before {
	top: -6px;
	left: -6px;
	border-width: 2px 0 0 2px;
	z-index: 5;
}
.copytext:after {
	bottom: -6px;
	right: -6px;
	border-width: 0 2px 2px 0;
}
.copytext:hover:before,
.copytext:hover:after {
	width: calc(100% + 12px);
	height: calc(100% + 12px);
	border-color: #313131;
}
.copytext:hover {
	color: #fff;
	background-color: #313131;
	border-color: #313131;
}

jQueryを記述

最後に、jQueryのコードを<body>〜</body> のクロージングタグ直前に記述します。

jQuery 

var clipboard = new Clipboard('.copytext');

clipboard.on('success', function(e) {
    $(".copytext").addClass('isCopied').html('<p>コピーしました</p>');
});

clipboard.on('error', function(e) {
    $(".copytext").addClass('isCopied').text('お使いのブラウザはこの機能に対応していません');
});

かかかず
かかかず

これで完成です！

コピペ用コード一式

上記手順で紹介のコードと同じものですが、実装に必要なPHP・CSS・jQueryです。

コードを表示する

HTML 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

PHP 

<div class="copytext" data-clipboard-text="<?php the_title(); ?>
<?php the_permalink(); ?>">
<p>この記事のタイトルとURLをコピーする</p>
</div>

CSS 

/* 001 */
.copytext {
    cursor: pointer;
    display: block;
    text-align: center;
    position: relative;
    background: #f1f1f1;
    padding: 10px 0;
    transition: 0.3s ease-in-out;
    font-weight: 400;
    max-width: 500px;
    margin: 30px auto;
}
.copytext p,  .copytext.isCopied p{
    position: relative;
    margin: 0;
    font-size: 0.95rem;
}
.copytext p:before {
    content: "\f0c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #aaaa;
    margin-right: 3px;
}

.copytext:hover {
    background: #ebfcfe;
    color: #6bb6ff;
}
.copytext:before, .copytext:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.copytext:before {
  top: 0;
  left: 0;
}
.copytext:after {
  bottom: 0;
  right: 0;
}
.copytext:hover:before, .copytext:hover:after {
  width: 100%;
  height: 100%;
}
.copytext:hover:before {
  border-top-color: #6bb6ff;
  border-right-color: #6bb6ff;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.copytext:hover:after {
  border-bottom-color: #6bb6ff;
  border-left-color: #6bb6ff;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}
.copytext.isCopied:before, .copytext.isCopied:after {
    width: 100%;
    height: 100%;
    border-color: #6bb6ff;
}
.copytext.isCopied {
    background: #6bb6ff;
    color: #FFF;
}
.copytext.isCopied p:before {
    content: "\f00c";
    color: #FFF;
}

jQuery 

var clipboard = new Clipboard('.copytext');

clipboard.on('success', function(e) {
    $(".copytext").addClass('isCopied').html('<p>コピーしました</p>');
});

clipboard.on('error', function(e) {
    $(".copytext").addClass('isCopied').text('お使いのブラウザはこの機能に対応していません');
});

ざっくりとしたコードの解説

最後に、コピペ用コードについてざっくりですが解説していきます。

CSS：.isCopiedのclass

.copytext がクリックされる前のclassで、クリックすることで .isCopied が付与されます。

その時に、.copytext.isCopied のclassでクリック後のデザインを整えています。

jQuery：トリガーになる要素を指定してコピー

jQueryの構造はシンプルで、以下の一文でトリガーとなる要素を指定してコピーをします。

jQuery 

var clipboard = new Clipboard('.copytext');

上記の一文で定義して、そのあとはクリックでclassの.isCopied の付与と、テキストの切り替えを行わせます。

前の記事

レンタルサーバーの比較
レンタルサーバーをディスク容量・転送量で比較！ディスク容量と転…

次の記事

ツールチップの基本的な役割と使い方

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら