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をコピー

コメント

  1. はじめまして。Japanese Bloggers Info でお見かけして立ち寄ってみました。
    タイトルとURLをコピーするボタンは当方でも同じ記事を参照して設置しました。通常のSNSボタンよりも手軽で利用率高そうですよね。

    ところで、記事ページでシェアボタンが表示されないとのことですが、そのような仕様ではなく、本来ならちゃんと記事ページでも(タイトル横と記事下部の2ヶ所に)表示されるはずです。
    おそらくHTMLを弄られた際に何かしらの不具合を引き起こされてしまったのではないかと推測します。もしテーマのバックアップがあるなら、照らし合わせながら確認してみては如何でしょうか。

    返信削除
  2. ふじやんさんはじめまして。
    contempoを使っている他のブログでも記事ページで出ているものと出ていないものがあるようですね。私が何かHTMLをいじったのかもしれません。でもとりあえずこのまま様子を見てみます。

    返信削除
    返信
    1. 今コメントしようとしてたところでした。ちょっとこちらでテストしてみて気づいたことがあったもので。
      もしこちらのスクショのようにシェアボタンが下の方になっていたら、試しに上の方に持っていってみてはどうでしょう?

      スクリーンショット

      削除
    2. ありがとうございます。直りました!シェアボタンはデフォルトで下にあったような気がしていたのですが。

      削除
    3. シェアボタンを上部に移動させると表示されるようになったのですが、同時に下部にも表示されるので合計2個になってしまいました。したがってシェアボタンは外してしばらく様子を見ます。

      削除
  3. 上下に2つ表示されるのは正常な仕様ですよ。まあ2つもいらないとは思いますけどね(^^;

    返信削除

コメントを投稿

投稿総数:

2012年~2019年の投稿

もっと見る