「記事のリンクをコピーする」ボタンの設置（上級者用）

Home » 個別ページ » 「記事のリンクをコピーする」ボタンの設置（上級者用）

◆HTML

共通コンテンツにて表示位置を「フッター上部」にして作成

<button id=”copy-link” type=”button”>この記事のリンクをコピー</button>
<span id=”copy-message” style=”display: none; margin-left: 10px; color: green;”>コピーしました！</span>

◆Javascript

共通コンテンツにて表示位置を「<head>内（全ページ）」にして作成

<script type=”text/javascript”>

const copyBtn = document.getElementById(‘copy-link’);
const copyMsg = document.getElementById(‘copy-message’);

copyBtn.addEventListener(‘click’, () => {
// 1. 現在のURLを取得
const url = window.location.href;

// 2. クリップボードに書き込み
navigator.clipboard.writeText(url).then(() => {
// 3. 成功時のフィードバック（メッセージを表示して2秒後に消す）
copyMsg.style.display = ‘inline’;

setTimeout(() => {
copyMsg.style.display = ‘none’;
}, 2000);
}).catch(err => {
// エラー時の処理
console.error(‘コピーに失敗しました: ‘, err);
alert(‘コピーに失敗しました。URLを直接選択してコピーしてください。’);
});
});

</script>