URLやクーポンコードなどをコピーできるボタンの作成方法

※当サイトにはプロモーションが含まれています。

クライアント

ボタンを押すと、URLやクーポンコードなどをコピーできるボタンを作ってくれ。

にゃテック

おけまるだにゃ

自身のサイトのURLやクーポンコード、アフィリエイトリンクなど、サイト訪問者にコピーしてもらいたいことがあるのではないでしょうか？

例えば、下記のようなボタンです。

コピーしました。

上記のボタンを押すと、このサイトのURL（https://best-item.work/）をコピーします。

今回は、自分が指定した内容のURLやクーポンコードなどを、コピーできるボタンを作成してみました。

URLやクーポンコードなどをコピーできるボタンの作成方法

URLやクーポンコードなどをコピーできるボタンの作成方法です。

HTML

<button class="nya-copy-button" onclick="copyURL(this)" data-url="https://example.com/page1">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="nya-copy-button__icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
</svg>
<span>URLをコピー</span>
</button>

<p class="nya-message" id="copyMessage">コピーしました。</p>

ボタンのdata-url属性にコピーしたいURLを設定し、JavaScript側で取得する仕組みになっています。

つまり、上記の場合、data-urlに設定されている「https://example.com/page1」がコピーできます。

例えば、

data-url="ABCDEFG"

と記載すれば、ABCDEFGがコピーされます。

なお、<svg>タグで囲っている内容は、コピーアイコンを描画しているだけなので、<svg>タグごと削除してしまっても問題ありません。

つまり、下記でも動きます。

<button class="nya-copy-button" onclick="copyURL(this)" data-url="https://example.com/page1">
<span>URLをコピー</span>
</button>
<p class="nya-message" id="copyMessage">コピーしました。</p>

また、<p>タグに設定されている内容は、コピーした時に表示させるメッセージです。

もちろん、この記述はなくても動きますし、ご自身の好きな内容（メッセージ）にも編集できます。

なお、ワードプレスでは、<svg>タグは使用できないことが多い為、このサイトでは賢威にアイコンを追加して描画しています。

CSS

.nya-copy-button {
display: flex;
align-items: center;
padding: 10px 20px;
border: 2px solid #555;
background-color: #fff;
color: #333;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}

.nya-copy-button:hover {
color: #05a5ab;
background-color: #e0f7f9;
border-color: #48c3c7;
}

.nya-copy-button__icon {
margin-right: 8px;
}

.nya-message {
margin-top: 10px;
color: green;
display: none;
}

クラス.nya-messageは、サイト訪問者が、ボタンを押した（コピーした）時に表示させるメッセージなので、最初は、display:none;で表示しないようにしています。

JavaScript

function copyURL(button) {
const url = button.getAttribute('data-url');
navigator.clipboard.writeText(url).then(() => {
const message = document.getElementById('copyMessage');
message.style.display = 'block';
setTimeout(() => {
message.style.display = 'none';
}, 2000);
}).catch(err => {
console.error('コピーに失敗しました:', err);
});
}

2000というのは、2000ミリ秒 (2秒) 後にメッセージを非表示 (display: none;) にします。

その為、すぐに消したい場合は、下記のように500に変更 (0.5秒)してください。

setTimeout(() => {
message.style.display = 'none';
}, 500);

なお、navigator.clipboard.writeText()は、HTTPS環境または、localhostでしか動作しません。

つまり、HTTPサイトでは動作しないのでご注意ください。

最後に、今までの内容をすべてまとめたものをHTMLに記載しておきます。

この内容をすべてコピーして、ご自身の環境で動作テストしてみてください。

HTMLまとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URLコピー</title>
<style>
.nya-copy-button {
display: flex;
align-items: center;
padding: 10px 20px;
border: 2px solid #555;
background-color: #fff;
color: #333;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.nya-copy-button:hover {
color: #05a5ab;
background-color: #e0f7f9;
border-color: #48c3c7;
}
.nya-copy-button__icon {
margin-right: 8px;
}
.nya-message {
margin-top: 10px;
color: green;
display: none;
}
</style>
</head>
<body>
<button class="nya-copy-button" onclick="copyURL(this)" data-url="https://example.com/page1">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="nya-copy-button__icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
</svg>
<span>URLをコピー</span>
</button> 
<button class="nya-copy-button" onclick="copyURL(this)" data-url="https://example.com/page2">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="nya-copy-button__icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
</svg>
<span>URLをコピー</span>
</button> 
<p class="nya-message" id="copyMessage">コピーしました。</p>
<script>
function copyURL(button) {
const url = button.getAttribute('data-url');
navigator.clipboard.writeText(url).then(() => {
const message = document.getElementById('copyMessage');
message.style.display = 'block';
setTimeout(() => {
message.style.display = 'none';
}, 2000);
}).catch(err => {
console.error('コピーに失敗しました:', err);
});
}
</script>
</body>
</html>

以上、URLやクーポンコードなどをコピーできるボタンの作成方法でした。