【サイト制作】URLをクリップボードにコピーするボタンを作る

管理している同盟ページ「サイトカスタムおもろい!」で使用したボタンのコードです。

サイトカスタムおもろい!

 

ボタンを押すと現在のページのURLをクリップボードにコピーできるようになっています。

さらに、コピーができると上に「コピーできました!」というメッセージを表示するようになっています。


 

コードをほとんどそのまま使っているボタンです。表示(特にフキダシの位置)がずれていますが、ボタンを押すとURLのコピーができます。

 

HTML

<div style="position: relative; display: inline-block;">
        <span id="copyMessage">
        </span>
        <button onclick="copyToClipboard()">URLをコピー</button></div>

ボタンを設置したい場所に上のコードをコピペします。

 

JavaScript

function copyToClipboard() {
var url = window.location.href;
var messageElem = document.getElementById("copyMessage");

navigator.clipboard.writeText(url).then(function() {
// 成功メッセージ
showMessage(messageElem, "コピーできました!");
}).catch(function() {
// 失敗メッセージ
showMessage(messageElem, "コピーに失敗しました");
});
}

function showMessage(element, text) {
element.textContent = text;
element.classList.add("block");
setTimeout(function() {
element.classList.remove("none");
}, 2000);
}

同盟ページではJavaScriptファイルを別途作るのが面倒なので、HTMLの</body>の直前に直接書きこみました。

 

CSS

button {
    font-weight: 700;
    color: #ffffff;
    background-color: #33B8B3;
    width: 120px;
    padding: 7px;
    border-radius: 5px;
    border-style: none;
    margin-left: 20px;
    text-align: center;
    display: inline-block;
}


#copyMessage {
    display: none;
    position: absolute;
    top: -30px;
    left: 30px;
    background-color: #2b2b2b; 
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 8px;
    width: 80px;
    text-align: center;
}


#copyMessage::after {
    content: '';
    position: absolute;
    bottom: -5px; /* メッセージの下に配置 */
    left: 50%; /* 配置を調整 */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3px 0 3px; /* 三角形のサイズ */
    border-color: #2d2b2b transparent transparent transparent; /* 吹き出し色と透明色 */
}

上からボタン、「コピーできました!」メッセージのフキダシ、フキダシの下に表示するしっぽのスタイルを指定しています。

ボタンにclassを指定していないので、同一ページ内でほかにボタンを使用している場合はclassなどを指定するといいと思います。

また、しっぽの位置はかなり無理やり指定しているので、ほかの数値をいじると簡単にずれてしまうため注意が必要です。

 

 

以上です。お疲れさまでした。