【 1 】コピーボタンの動作用 JavaScript 設定
HTML の </body> の上に次を記述する。
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script> <script>$(function(){var clipboard=new Clipboard('.copy-button');clipboard.on('success',function(e){$(".copy-button").hide().fadeIn(1000).addClass('success').text('コピーしました');});clipboard.on('error',function(e){$(".copy-button").hide().fadeIn(1000).addClass('error').text('ブラウザが未対応です');});});</script> |
- クラス名
copy-buttonでのサンプルとなります - クラス名は任意値でも可ですが HTML / CSS も変更が必要です
【 2 】コピーボタンの HTML 設定
HTML の記事関連 ( または記事のコンテンツ HTML ) の任意の場所 ( カエテンジョイの場合は <!-- エントリフッター --> の上など ) に次を記述する。
記事タイトル変数 記事URL変数 は無料ブログ別に変更する。
|
1 |
<div class="copy-button" data-clipboard-text="記事タイトル変数 
 記事 URL 変数">記事タイトルとURLをコピーする</div> |
【 3 】コピーボタンの CSS 設定
スタイルシート ( style.css ) に次を記述する。
|
1 2 3 |
.copy-button{display:block;margin:30px auto;padding:10px 1em;border:solid 1px #ddd;color:#333;font-size:16px;text-align:center;cursor:pointer;} .copy-button.success{background:green;border-color:green;color:#fff;} .copy-button.error{background:red;border-color:red;color:#fff;} |
