今回、ついに、カスタマイズをほぼ自作しました！
とはいえコードをしっかり勉強したわけではないので、先輩方の記事を渡り歩いて、つぎはぎフランケンシュタインです。分かりやすくコードの説明をつけた記事を残してくださった方々に、感謝。今回は参考にしたサイトが多いので、後半でご紹介させていただきます。
ボタン紹介と設置理由
今回設定したのは、「URLと記事タイトルをまとめてコピーするボタン」そして「記事ページでのみ、ずっと表示されるもの」
ドンピシャなものが検索で見つからなかったので、様々な情報を組み合わせて設置しました。
完成見本
左がパソコン画面、右がスマホ画面です。
↓動作見本↓です。
記事をシェアするボタンをずっと表示できるようにされている方は、多いようです。なぜ私がそれをそのまま設置しなかったかの理由は２つ。
- ボタンが多いと画面がごちゃつくから
- 管理が大変そうだから
理由１について
記事を読みたいのに、各種シェアボタンがずっと表示されてたら、邪魔かもしれないなぁと考えました。
理由２について
どのSNSが必要なのか、正直私にはわかりませんでした。それなら、記事タイトルとURLさえ簡単にコピーできるボタンがあれば充分かなと思いました。
このサイトをシェアしてもらえる機会は少なそうだし。シェアしていただくのはとってもありがたいので、してほしいですが。笑
それに、ブラウザから共有ボタンを押すと、SNSにログインが必要です。正直、面倒。
あと、シェアボタンがうまく働いていないサイトを時々見かけたので、せっかく設置したのに機能しないことがあるなら、必要最低限の機能があればいいよな、と思いました。
さて、前置きが長くなりました。ここからは設置方法を書いていきます。
カスタマイズコード
見に来てくださった方、ごめんなさい！
コードのスクロールがうまくいきませんでした。でも、*1各コードの右上にあるボタンで全選択できます。（もし、使いたい方がいるならですが。）
使えた場合は、このブログも紹介していただけると嬉しいです♡←ｳｹﾞｪ
head要素
「clipboard.js」と「Font Awesome」を使ったことがあれば、飛ばしてOKです。
この設定、サイトによって入力する場所の指定が違うので迷いましたが…。バラバラ書くと、後でわからなくなりそうですし、全般に関わる設定なので、headに書くことにしました。
コピー用プログラム「clipboard.js」
clipboard.js — Copy to clipboard without Flash
アイコン用フォント「Font Awesome」
Font Awesome
「設定」「詳細設定」「headに要素を追加」
アイコンを使わない場合は、2行目は記述する必要はありません。
記事上（下）
はてなブログなら、記事を開いた時だけ現れるボタンの設置もラクチン。記事上か下のどちらかのHTML欄にコードを書くだけ。
今回設置するコードは、常時表示タイプなので、記事上でも下でもどちらに入力しても大丈夫です。
「デザイン」「記事」「記事上」あるいは「記事下」
<!-- URLコピー実行プログラム -->
<script>
var clipboard = new ClipboardJS('.kijicopy');
clipboard.on('success', function() {
//---URLコピー完了時の挙動
$('.url-copy').fadeOut().delay(1500).fadeIn();
$('.url-copied').delay(500).fadeIn().delay(500).fadeOut();
});
</script>
<!-- 記事名とURLのコピー -->
<a class="kijicopy" href="javascript:void(0);" data-clipboard-text="{Title} - {BlogTitle} {Permalink}">
<span class="url-copy">
<p><span style="font-size:95%"><i class="far fa-clipboard"></i>記事名と<br>URLをコピー</span></p>
</span>
<span class="url-copied" hidden>
<p><span style="font-size:95%">コピー完了<br>共有感謝！！</span></p>
</span>
</a>
上が表示動作。下が見た目。「font-size」の％を変えると、文字サイズが変わります。アイコンを消したり変えたりしたい場合は「i class」から「/i」の部分をいじります。
デザインCSS
ボタンの見た目を作ります。
/*---記事名URLコピーボタン---*/
.kijicopy {/*ボタンの形を調整*/
position: fixed;/*画面に固定して表示*/
bottom: 15px;/*画面下からの位置*/
left: 15px;/*画面左からの位置*/
height: 40px;/*ボタンの高さ*/
width: 100px;/*ボタンの横幅*/
text-align: center;/*文字は中央寄せ*/
border-radius: 5%;/*丸さ加減*/
z-index: 9;/*重なりの順番を指定*/
opacity: 0.9;/*透明度合。少ないほど透明*/
font-size: .9em;/*文字の大きさは少し小さく*/
background: #FFF;/*背景色*/
color: #043F98;/*文字色＆枠線の色*/
border: 1px solid;/*枠線の太さと種類*/
text-decoration: none;/*下線を削除*/
}
.kijicopy p {/*文字部分の位置調整*/
margin-bottom: -5px;/*外側下の余白*/
margin-top: 5px;/*外側上の余白*/
}
/*---↑記事名URLコピーボタン---*/
細かく説明がついているので、変えたい要素を、「記事をプレビュー」で見ながら調整しました。
参考サイト
【はてなブログ】当ブログに適用したカスタマイズのまとめ【Brooklyn】 | よろず便利帖
記事のリンクとタイトルがコピーできたらいいなと思ったきっかけのサイトです。様々なカスタマイズをされているので、参考になります。
はてなブログに記事のURLをコピーする機能をつける - macutie
URLをコピーした際の挙動は、こちらのサイトを参考にさせていただきました。他のサイトでは、コピーは1度きりのものもあったので、何度も押せるのが良くて使わせていただきました。
ボタンの見た目（CSS）では、こちらのサイトにお世話になりました。WordPress用のカスタマイズでしたが、CSSは各コードに説明を振ってくださっていたので、とてもわかりやすかったです。おかげでデザインを好きなように調整することができました。
おまけ
「なてなブログ」で、記事のタイトルとURLをクリップボードにコピーする機能を作成 - retireSakiの日記
当初はこちらのサイトのボタンを使わせていただこうと思っていました。CSSなしで設置できます。好きなところに設置しやすくてありがたい。クリップボードマークを付けるデザインは、こちらを参考にさせていただきました。
シェアボタンより便利？記事タイトルとURLをコピーするボタンを設置する方法【地味に便利】 | DISPLAY
コピーボタンは1度切り押せればいい、というなら、こちらのサイトのものがスタイリッシュです。単体で設置できるため、やりやすいと思います。
感謝！！
「こんなの自分で頑張らずに、プロに頼めば簡単なのに」ってことは承知しております（収益化目指すなら…みたいな勧誘的フォロワーが来ることがある）。でも、私のサイトは現状、ほぼ収益０の趣味ブログ。お金を掛けてカスタマイズなんてできません、というより、する気がありません。
それに私は、自分の手でサイトの使い勝手が変わっていくのを楽しんでいます。見た目を好きに変えられるのは楽しい！これも趣味の一環になりつつあります。笑
だから、カスタマイズ方法を記事で無料公開して、内容を詳しく説明してくださる方々に感謝！ありがとうございます。
おかげで興味程度の知識でも様々なカスタマイズをできる可能性が散らばっています。
ただ、自己責任ですけれどね。
私のページのコードを使われる際も、自己責任でよろしくお願いいたします。
はてなブログに投稿しました #はてなブログ
— やぁのん (@yaanon_21) December 28, 2020
記事ページにずっと表示される「記事のタイトルとURL」をまとめてコピーできるボタンを設置しました。各種シェアボタンより万能？
-
「URLと記事タイトル」をコピーする、追従するボタンを設置 - はんこキャプターやぁのんhttps://t.co/mVkEUStnbk
*1:2020年12月29日：修正しました。
