Matボタンをクリックしてリンクをコピーする方法

1. クリップボードにテキストをコピーする方法 (JavaScript)

この方法では、JavaScriptを使用してクリップボードにテキストをコピーします。以下のコード例を参考にしてください。

function copyToClipboard(text) {
  const input = document.createElement('input');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}
// Matボタンがクリックされたときに実行される関数
function handleClick() {
  const link = 'コピーするリンクのURL';
  copyToClipboard(link);
  alert('リンクがクリップボードにコピーされました！');
}

2. テキストをクリックしてリンクをコピーする方法 (HTMLとCSS)

この方法では、HTMLとCSSを使用してテキストをクリックしてリンクをコピーします。以下のコード例を参考にしてください。

<div class="copy-link">
  <p>コピーするリンクのテキスト</p>
</div>
<style>
.copy-link {
  cursor: pointer;
}
.copy-link p::selection {
  background-color: transparent;
}
.copy-link::after {
  content: attr(data-link);
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.copy-link::before {
  content: 'Copy Link';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.copy-link:hover::before {
  opacity: 1;
}
.copy-link:active::before {
  opacity: 0;
}
.copy-link:active::after {
  opacity: 1;
  font-size: 0;
}
.copy-link::after {
  font-size: 14px;
  color: transparent;
}
.copy-link[data-link]::after {
  color: #000;
}
</style>

以上の方法は、Matボタンをクリックすることでリンクをクリップボードにコピーするためのいくつかの方法です。必要に応じて、上記のコード例を参考にして実装してみてください。