retireSakiの日記

たぶん引退した?ソフトウエアエンジニアのブログ

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

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

はてなブログに記事タイトルとURLのコピー機能を追加

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

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

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

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

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

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

になるはずです!

 実際の確認は Chromefirefoxfirefoxブラウザーエミュレーターです。
 動かない時は、おそらく使用しているライブラリー側だと思いますので、諦めてください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で「はてなブログ」を次のステッ

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

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

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


追加コード


<!-- ↓タイトルと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のコピー -->

 表示位置は右寄りとなるようにしています。
変更したい場合
     <duv style ...
styleなどを変更してください。

 ソースの配布・改変等は自由です。
その時は、当ブログ紹介して頂ければ嬉しいです
また改良された時は、私のブログでも紹介しますので、ブログコメントかTwitterのDMなどでお知らせくださいね(^^♪

注目記事

「Amazon.co.jpアソシエイト」または「[乙の名称を挿入]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。