ブログを見た人が、他の人へ簡単に紹介したり出来るSNSシェアボタン。
実は、個人的には使い勝手が良いとは思えず
あまり使っていない機能です。
最近、記事タイトルやURLをクリップボードにコピーするボタンが設置されているサイトを見かけます。
クリップボードにコピーしておけば、メモパッドやメールにも貼付けておけます。
調べた所、クリップボードにコピーするスクリプトclipboard.jsがMITライセンスでリリースされています。
このスクリプトを利用すればBloggerでもコピーボタンが設置できそうです。
Bloggerの場合CDNを利用する事になるので、お好きなCDN プロバイダーからclipboard.jsを読み込みます。
CDN Providers
HTMLの変更はBloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
今回はQooQの変更になります。
Vaster2はJQueryは読み込んでいますが、QooQの場合は以下、JQueryの読み込みが必要になります。
CDNを使用しないQooQ作者様の意図から離れてしまいますが、軽いスクリプトなので実装を考えてみたいと思います。
<head>〜</head>間に下青字を追加します。
Blogger特有の要素で、<b:include>で配置して関数の<b:includable>と呼び出す感じ。
<b:includable id='main' var='top'>以下に記述されている複数の<b:includable id=''>の何処に追加します。
保存すると下の画像の様にidをキーにしてアルファベット順に並べ替えてくれます。
今回ボタンをクリック（タップ）した時にコピーした旨のメッセージをアラート表示させています。
アラートの代わりにボタンをクリック後ボタンの文言を「記事タイトルとURLをコピー」から「コピーしました。」等に変更する方法でも良いかも。
その場合は、
alert("タイトルとURLをコピーしました。"+' url); の箇所を.text('コピーしました。') に差し替えます。
'コピーしました。'の箇所は好きな文言に変えてください。
後はcssでボタン箇所をお好みで設定してください。
実際の稼働確認は以下のデモページを用意しているので確認ください。
デモページ
尚、MITライセンスの取扱は各自で対応下さい。
ソースコードやサイト説明等の別ページに著作権を記載しておくだけです。
以上
実は、個人的には使い勝手が良いとは思えず
あまり使っていない機能です。
最近、記事タイトルやURLをクリップボードにコピーするボタンが設置されているサイトを見かけます。
記事タイトルとURLをコピーするボタンを追加
考えて見ればURLとタイトルのコピーする機能で事は足りるんですよね。クリップボードにコピーしておけば、メモパッドやメールにも貼付けておけます。
調べた所、クリップボードにコピーするスクリプトclipboard.jsがMITライセンスでリリースされています。
このスクリプトを利用すればBloggerでもコピーボタンが設置できそうです。
Bloggerの場合CDNを利用する事になるので、お好きなCDN プロバイダーからclipboard.jsを読み込みます。
CDN Providers
HTMLを変更します
テーマ（テンプレート）のバックアップを取ってから変更しましょう。HTMLの変更はBloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
今回はQooQの変更になります。
JQueryの読込を追加
スクリプトが使える様にするにはJQueryの読込が必要です。Vaster2はJQueryは読み込んでいますが、QooQの場合は以下、JQueryの読み込みが必要になります。
CDNを使用しないQooQ作者様の意図から離れてしまいますが、軽いスクリプトなので実装を考えてみたいと思います。
<head>〜</head>間に下青字を追加します。
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
他にJQueryのスクリプトを使う可能性もあるなら<head>の直下に追加すれば良し。コピーボタンの追加（QooQの場合）
コピーボタン用の<b:include>,<b:includable>タグをHTMLに追加します。Blogger特有の要素で、<b:include>で配置して関数の<b:includable>と呼び出す感じ。
<b:include>の追加
今回はシェアボタンの上部に設置したいので、<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>の直前に以下青字を追加します。
<b:include name='copy-url'/>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
<b:includable>の追加
次に<b:include>で呼び出される要素、<b:includable>を記述します。<b:includable id='main' var='top'>以下に記述されている複数の<b:includable id=''>の何処に追加します。
保存すると下の画像の様にidをキーにしてアルファベット順に並べ替えてくれます。
<b:includable id='copy-url'>
<div class='copy-url'>
<div class='copy_btn' data-clipboard-text=''>記事タイトルとURLをコピー</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
// <![CDATA[
var clipboard = new ClipboardJS('.copy_btn');
$(function(){
var title = $('title').text();
var url = location.href;
$('.copy_btn').click(function(){
$(this)
.attr('data-clipboard-text', title + ' ' + url)
.css('cursor','default') // カーソル切り替え
alert("記事タイトルとURLをコピーしました。 " );
});
});
// ]]>
</script>
</b:includable>
<div class='copy-url'>
<div class='copy_btn' data-clipboard-text=''>記事タイトルとURLをコピー</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
// <![CDATA[
var clipboard = new ClipboardJS('.copy_btn');
$(function(){
var title = $('title').text();
var url = location.href;
$('.copy_btn').click(function(){
$(this)
.attr('data-clipboard-text', title + ' ' + url)
.css('cursor','default') // カーソル切り替え
alert("記事タイトルとURLをコピーしました。 " );
});
});
// ]]>
</script>
</b:includable>
今回ボタンをクリック（タップ）した時にコピーした旨のメッセージをアラート表示させています。
アラートの代わりにボタンをクリック後ボタンの文言を「記事タイトルとURLをコピー」から「コピーしました。」等に変更する方法でも良いかも。
その場合は、
alert("タイトルとURLをコピーしました。"+' url); の箇所を.text('コピーしました。') に差し替えます。
'コピーしました。'の箇所は好きな文言に変えてください。
後はcssでボタン箇所をお好みで設定してください。
実際の稼働確認は以下のデモページを用意しているので確認ください。
デモページ
尚、MITライセンスの取扱は各自で対応下さい。
ソースコードやサイト説明等の別ページに著作権を記載しておくだけです。
以上
コメント