無料ブログに 記事タイトルとURLコピーボタン を実装する方法を紹介します。
記事タイトルとURLコピーボタンは昨今ではSNSボタンより利用度が高いとも言われています。ご紹介する方法で簡単に実装できますので必要に応じてお試しください。
記事タイトルと URL コピーボタンの実装に必要なソース構成
実装に必要なソースは以下で構成されます。
記事タイトルと URL コピーボタンの実装方法
- 実装は 自己責任 でお願いします
- HTML / CSS ( スタイルシート ) を編集します。記述や追加場所を間違うとブログが正しく表示しない場合があります
【 1 】コピーボタンの動作用 JavaScript 設定
HTML の </body> の上に次を記述する。
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script> <script>$(function(){var clipboard=new Clipboard('.copy-button');clipboard.on('success',function(e){$(".copy-button").hide().fadeIn(1000).addClass('success').text('コピーしました');});clipboard.on('error',function(e){$(".copy-button").hide().fadeIn(1000).addClass('error').text('ブラウザが未対応です');});});</script> |
- クラス名
copy-buttonでのサンプルとなります - クラス名は任意値でも可ですが HTML / CSS も変更が必要です
【 2 】コピーボタンの HTML 設定
HTML の記事関連 ( または記事のコンテンツ HTML ) の任意の場所 ( カエテンジョイの場合は <!-- エントリフッター --> の上など ) に次を記述する。
記事タイトル変数 記事URL変数 は無料ブログ別に変更する。
|
1 |
<div class="copy-button" data-clipboard-text="記事タイトル変数 
 記事 URL 変数">記事タイトルとURLをコピーする</div> |
| 項目 | 記事タイトル変数 | 記事 URL 変数 |
|---|---|---|
| FC2 |
<%topentry_title>
|
<%topentry_link>
|
| Seesaa・さくら |
<% article.subject | nl2br | tag_strip | remove_emoji -%>
|
<% article.page_url -%>
|
【 3 】コピーボタンの CSS 設定
スタイルシート ( style.css ) に次を記述する。
|
1 2 3 |
.copy-button{display:block;margin:30px auto;padding:10px 1em;border:solid 1px #ddd;color:#333;font-size:16px;text-align:center;cursor:pointer;} .copy-button.success{background:green;border-color:green;color:#fff;} .copy-button.error{background:red;border-color:red;color:#fff;} |
上記 CSS での表示サンプル
記事タイトルとURLコピーボタンは昨今ではSNSボタンより利用度が高いとも言われています。ご紹介する方法で簡単に実装できますので必要に応じてお試しください。