「なてなブログ」で、記事のタイトルとURLをクリップボードにコピーする機能を作成

　他のブログやサイトで気にった記事のURLや記事のタイトルをコピーして、記事の原稿を開いているエディタにペーストしています。
ブラウザーの拡張機能でもタイトル＆URLをコピーするものはありますが、いちいち探すのも面倒です。
また、こういったことと同じようなことをしている人も多いのでは？！

という理由から、『ならば自分のブログにも追加しちゃえ！』ということで追加ました(^o^)v

同じ機能を作っている人いないなぁ〜と、ネットから軽く探して5つ,６つほど試しましたが、「はてなブログ」では使えないか、動きませんでした。

ということで、融通性の効かない「はてなブログ」でも動作する機能を作成しちゃいました(^^ゞ
おそらく、全てのブログでも動くと思いますよ...たぶんw

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

作者: 相澤裕介
出版社/メーカー: カットシステム
発売日: 2016/10/01
メディア: 単行本
この商品を含むブログを見る

　対応するブラウザーは
ブラウザー一覧

になるはずです！

　実際の確認は Chrome と firefox とfirefoxのブラウザーエミュレーターです。
　動かない時は、おそらく使用しているライブラリー側だと思いますので、諦めてくださいw

設定→詳細設定→headに要素を追加

　使用するライブラリーは

clipboardjs.com
とアイコンのフォントは
fontawesome.com
を使用しますので、
ヘッダーに以下の2つを追加してください。

追加コード


<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

登録済の時は、無視して結構です。

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

作者: 相澤裕介
出版社/メーカー: カットシステム
発売日: 2016/10/01
メディア: 単行本
この商品を含むブログを見る

デザイン→カスタマイズ→記事→記事上に追加

　あとは、ボタンを表示したいところに、以下のコードをコピペしてください。
私は記事上に貼っています。

追加コード


<!-- ↓タイトルとURLのコピー -->
<div style="float: right; height: 50%;">
  <button class="btn" data-clipboard-text="dont copy"><span style="font-size:80%"><i class="far fa-clipboard"> 記事のタイトルとURLをコピー</i></span></button>
</div>
<div style="clear: right; height: 0px;">
</div>

<script>
// var clipboard = new ClipboardJS('.btn');
var clipboard = new ClipboardJS('.btn', {
    text: function(trigger) {
	var title_url = document.title+" \n"+document.URL;
        return title_url;
    }
});
clipboard.on('success', function(e) {
    alert('コピーしました！');
});
clipboard.on('error', function(e) {
    alert('お使いの端末はこの機能に対応していません');
});
</script>
<!-- ↑タイトルとURLのコピー -->