はてなブログで記事のタイトルとURLをコピーするボタンを設置する方法の備忘録

※自分用の備忘録として記録している記事です。

WordPressを利用されている方のブログによく設置されている「記事のタイトルとURLをコピー」するボタン。

わたし個人はこのボタンを使い勝手がわからずに全く使っていなかったのですが、若い世代の方はクリップボードにコピーしてLINEやTwitter投稿することが多いらしいので、試しに設置してみました。

でも、わたしの知識では作ることができないので、今回参考にさせていただいたサイトはこちら。

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

JavaScriptのソースコードはそのままコピペで利用させていただいて、CSSの部分は自分のサイトに合うように変更しました。

それから、今回はFont Awesomeのアイコンは使わずにはてなのWEBフォントを使っています。

設定手順１　clipboard.jsを使う
設定手順２　表示させたい箇所にHTMLを記述
設定手順３　CSSを作る

設定手順１　clipboard.jsを使う

jQueryのライブラリの「clipboard.js」を利用して実装するので、利用するためのcdnをヘッダー部分で呼び出します。

「管理画面」→「設定」→「詳細設定」→「<head要素>にメタタグを追加」に下のコードをコピペして貼り付けます。

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

設定手順２　表示させたい箇所にHTMLを記述

個別記事下に表示させたいので

「管理画面」→「デザイン」→「カスタマイズ」 →「記事」→「記事下HTML」に下のコードをコピペします。

わたしの場合はSNSボタンと並べたかったので li の中に入れてFlexboxで横並びにして真ん中寄席にしていますが、単体で設置するなら↓こんな感じです。

<div class="archive_copy_btn">
  <button class="btn copy_btn" data-clipboard-text="dont copy"><i class="blogicon-snippet"></i> 記事のタイトルとURLをコピー</button>
</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>

設定手順３　CSSを作る

「管理画面」→「デザイン」→「カスタマイズ」 →「デザインCSS」にCSSをコピペして貼り付けます。

.archive_copy_btn {
  text-align: center;
  margin-bottom: 2em;
}
.copy_btn {
  background-color: #efefef;
  cursor: pointer;
  border: none;
  padding: 8px 15px;
  font-size: 14px;
  color: #333;
}
@media (min-width: 768px) {
  .copy_btn:hover {
    opacity: .7;
  }
  .copy_btn:active {
    background-color: #999;
    color: #fff;
  }
}