Bloggerで「記事のタイトルとURLをコピーする」ボタンを付ける

多くのブログでSNSのシェアボタンが装備されて記事のシェアが簡単になっていると思いきや、SNSへのログインなどを求められるなどして面倒で使われないこともあると伺いました。

参考までにこのブログで使用しているContempoというテンプレートでは、記事を単独で表示させている場合はシェア ボタンが表示されないという意味不明の仕様になっております。

そういった理由から記事のタイトルとURLをコピーするボタンを記事下部に付けてみました。参考にさせていただいたのは以下の記事です。

コピペで使える！ブログ記事タイトルとリンクをワンタップでコピーするボタン実装
上記のご説明の中ではHTMLのコードとともにCSSを別途追加する方法でしたが、当ブログのテンプレートではCSSで指定した色や配置の指定などが反映されませんでした。そこでCSSのコードは追加せず、以下のHTMLのコードのみをテンプレートに追加したところ成功しました。

<!--タイトルとURLのコピー ボタン-->
<br/>
<br/>
<div class="copy_btn" data-clipboard-text="" style="background-color:#2196f3;" align="center">
※この記事のタイトルとURLをコピーする※
</div>
<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が動作する要素をクラス名で指定
//クリックしたときの挙動
jQuery(function(){
var title = jQuery('title').text(); //タイトル取得
var url = location.href; //URL取得
jQuery('.copy_btn').click(function(){
jQuery(this)
.attr('data-clipboard-text', title + ' ' + url) // コピー内容生成
.css('background-color','#2196f3') // ボタンの色（押した後）
.css('font-weight','bold') // 文字の太さ切り替え
.css('cursor','default') // カーソル切り替え
.text('クリップボードにコピーされました!'); // テキスト切り替え
});
});
</script>
<!--タイトルとURLのコピー ボタン-->

本来は装飾に関係する指定はCSSで行うことが推奨されているのですが、背に腹は代えられないので一部はHTMLで指定しています。コードの挿入箇所は<data:post.body/>の直後にしました。ちなみに直前に挿入するとボタンが表示されませんでした。

上記のコードをそのままコピーしても使えますが、必要に応じて赤色文字の部分などを変更してください。行頭に<br/>を2つ挿入しているのは、記事の最終行とボタンとの間のスペースを調整するためです。また、Contempo以外のテンプレートで動作するかどうかはわかりません。

ココをClick→記事タイトルとURLをコピー