【jQuery】ブログ記事に「タイトルとURLをコピーする」ボタンをつけて拡散率を上げる方法

ブログで見つけた記事を共有する際、どのようにしていますか？
やり方はたくさんあると思います。状況にもよりますが、記事のタイトルとURLをコピーして、メールやチャットに張り付けることが多いのではないでしょうか？

そのコピペを1クリックでできるボタンを設置したので備忘録です。

ボタンの実装方法

ボタンを実装するのには、「HTML」「JS」「CSS」の3つのコードを記述します。
必ずファイルのバックアップを行いましょう。

HTML

ボタンを実装したい個所に、以下のコードを追加します。

HTML

<div class="copy_btn" data-clipboard-text="<?php the_title(); ?> <?php the_permalink(); ?>"> この記事のURLとタイトルをコピーする </div>

1 2 3

<div class="copy_btn" data-clipboard-text="<?php the_title();  ?> <?php the_permalink();  ?>"> この記事のURLとタイトルをコピーする </div>

JS

次にボタンの動作を設定します。

JS

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.copy_btn'); //clipboard.min.jsが動作する要素をクラス名で指定 //クリックしたときの挙動 $(function(){ $('.copy_btn').click(function(){ $(this).addClass('copied'); //ボタンの色などを変更するためにクラスを追加 $(this).text('コピーしました'); //テキストの書き換え }); }); </script>

1 2 3 4 5 6 7 8 9 10 11

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.copy_btn');    //clipboard.min.jsが動作する要素をクラス名で指定 //クリックしたときの挙動 $(function(){   $('.copy_btn').click(function(){     $(this).addClass('copied');    //ボタンの色などを変更するためにクラスを追加     $(this).text('コピーしました');    //テキストの書き換え   }); }); </script>

CSS

さいごにボタンのスタイルを整えます。

CSS

.copy_btn { width: 100%; max-height: 200px; display: block; border: 1px solid #666; text-align: center; padding: 20px 0 16px; margin: 0 auto 20px; transition: all 0.3s ease; } .copy_btn:hover { cursor: pointer; color: #fff; background: #303030; } .copy_btn.copied { pointer-events: none; background: #333333; color: #ffffff; } .copy_btn.copied:hover { cursor: auto; } /*-- Font Awesomeを使用しない際は以下削除 --*/ .copy_btn.copied:before, .copy_btn:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-right: 3px; } .copy_btn:before { content: "\f0c5"; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

.copy_btn { width: 100%; max-height: 200px; display: block; border: 1px solid #666; text-align: center; padding: 20px 0 16px; margin: 0 auto 20px; transition: all 0.3s ease; } .copy_btn:hover { cursor: pointer; color: #fff; background: #303030; } .copy_btn.copied { pointer-events: none; background: #333333; color: #ffffff; } .copy_btn.copied:hover { cursor: auto; } /*-- Font Awesomeを使用しない際は以下削除 --*/ .copy_btn.copied:before, .copy_btn:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-right: 3px; } .copy_btn:before { content: "\f0c5"; }

全て記述をし終えたら、実際にボタンの動作確認をします。