1度はカスタマイズしたシェアボタンを、LINEのシェアボタンを撤廃して記事タイトルとURLをクリップボードにコピーするボタンを設置した。
クリップボードへのコピーボタンを設置するために以下の2つを参照した。
jQueryのライブラリの「clipboard.js」を利用するためのcdnを使うため、はてなブログの管理画面の「詳細設定」の「<head>要素にメタデータを追加」の欄に以下のコードを入力して設定を保存する。
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
以下は、はてなブログの管理画面の「デザイン設定」の「フッタ」や「記事上」「記事下」に設定する。失敗する事はそうないだろうという認識なので、以下に記載はしているが、コピー失敗時の挙動は無くても良いと認識している。
<!-- フッタに設定した内容 --> <!-- クラス名をshare-button_item-copyに設定 --> <script> // var clipboard = new ClipboardJS('.share-button_item-copy'); var clipboard = new ClipboardJS('.share-button_item-copy', { text: function(trigger) { var title_url = document.title+" \n"+document.URL; return title_url; } }); /* タイトルとURLコピー成功時の挙動 */ clipboard.on('success', function(e) { $('.url-copy').fadeOut().delay(1500).fadeIn(); /* 「Copy」の文字がフェードアウトする速さと、「Copied!」のフェードアウト後にフェードインする速さを調整する */ $('.url-copied').delay(1000).fadeIn().delay(1000).fadeOut(); /* 「Copy」の文字がフェードアウトした後に「Copied!」の文字がフェードインする速さと、「Copied!」の文字がフェードアウトする速さを調整する */ }); /* 記事タイトルとURLコピー失敗時の挙動は無くても良いと認識している */ clipboard.on('error', function(e) { alert('コピー失敗 Failed.'); }); </script>
記事タイトルとURLのコピー失敗時の挙動を成功時と同じボタン上での表示にしようとしたができなかった。
<!-- 記事上と記事下に設定した内容 --> <!-- クラス名をshare-button_item-copyに設定 --> <div class="share-button"> <button class="share-button_item share-button_item-copy" data-clipboard-text="copy"><i class="blogicon-snippet fa-2x"></i> <span class="share-button_small-text"> <span class="url-copy"> <span class="share-button_small-text">Copy</span> </span> <span class="url-copied"> <span class="share-button_small-text">Copied!</span> </span> </span> </button> </div>
以下は、はてなブログの管理画面の「デザイン設定」の「デザインCSS」に設定する。
.share-button { margin: 1em 0; display: flex; flex-wrap: wrap; } .share-button .share-button_item { display: flex; width: 20%; height: 36px; margin-bottom: 5px; line-height: 36px; text-align: center; text-decoration: none; font-size: 17px; color: #333; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: all .3s; } /* クラス名をshare-button_item-copyに設定 */ .share-button .share-button_item-copy { color: #0066ff; background-color: #ffffff; border: 1px solid #06c755; } .share-button .share-button_item-copy .share-button_icon { width: 40px; color: #0066ff; } .share-button .share-button_item .share-button_icon { background-color: #ffffff; } .share-button .share-button_small-text { width: calc(100% - 20px); padding-left: 1px; box-sizing: border-box; letter-spacing: .03em; text-align: left; font-size: 13px; font-family: "BIZ UDPGothic", "MS PGothic", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "sans-serif"; } /* スマートフォン用に横幅の長さを調整 */ @media (max-width: 500px) { .share-button .share-button_item { width: 30%; } }
クリップボードにコピーするボタンを導入した理由は、TwitterとFacebook以外にテキストベース型のSNSがThreads、Bluesky、Misskey、Mastodonと乱立していて今後増えないとは言い切れない中で、各サービスのシェアボタンを設置するよりもクリップボードにコピーするボタンを置いてどこにシェアするかはウェブサイトの来訪者に任せる事で、サイト管理者の負担は減るかもしれないと考えたからである。
-end-
