<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
$(function(){
var clipboard = new Clipboard('.clipboard_element');
clipboard.on('success', function(e) {
alert("クリップボードにコピーしました");
});
$(".action_btn").on("click", function(){
var work = prompt("入力値をクリップボードにセット")
$("#clipboard").text( work );
})
});
</script>
<div class="clipboard_element" data-clipboard-target="#clipboard">
<button type="button" class="action_btn">実行</button>
</div>
<div id="clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
new Clipboard で作成されるオブジェクトは、クリック対象の clipboard_element クラスを持つ要素を対象として作成されます。ここでは、clipboard_element は、DIV に対して設定されており、その DIV の中にアクションのトリガとなるボタンを配置しています。ボタンがクリックされると、まずそのイベントで必要なデータが画面外の要素に転送され、クリップボードにそのデータが送られます。要素間の関連性は、ボタンの親要素である DIV に data-clipboard-target="#clipboard" で設定されています
※ .css の中の画像のパスは画像ファイル名のみになっています
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
