macutie

macutie

日常のちょっと便利をシェアします

はてなブログに記事のURLをコピーする機能をつける

TIPS

f:id:macutie:20201210130310p:plain ブログについているソーシャルボタンって使ったことありますか？ ログインしなければならなかったりなかなか面倒くさくて、URLをただコピーして、それを例えばLINEアプリで開いてからペーストして相手に送るとかしてませんか？私はがっつりこのタイプなので最近増えてきたURLをコピーするだけのボタンがソーシャルボタンの並びにあると親切だなぁーって思っていました。

そして実際自分のブログに導入したところ結構簡単だったのでシェアしたいと思います。ここでははてなブログに組み込む前提で書いてますが単純なコードなのでどのブログにも応用ができると思います。

参考にしたブログは↓こちらです。

mimpiweb.net

こちらのエントリーのスクリプトでは繰り返しコピーができるというのが特徴でして、この機能は必須だなと思いこちらを参考にさせていただきました。

実際の挙動はこのエントリーのURLをコピーするボタンで確認してください。

はてなにソーシャルボタンをつける

このエントリーではソーシャルボタン自体は設置されていること前提でカスタマイズしていきたいので、まだの方はこの辺のブログを参考に設置してください。 シンプルなものが一番カスタマイズしやすく、コードも少なく良いと思います。

www.notitle-weblog.com

macutieではシshare-btn-type1を使わせてもらっています。

ソーシャルボタンを設置できる方であればURLコピー機能実装できると思います。

コピープログラムの本体clipboard.jsを読み込ませる

ここからが本番です、まずコピープログラムの本体のjavascriptライブラリをブログに読み込ませます。 簡単です、URLを一つコピペするだけで終わります。

はてなブログの管理画面の「デザイン」→「カスタマイズ」→「フッタ」へ移動します。 以下の1行をコピーして貼り付けます。

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

これを記述しておけばOK。本体プログラムを読み込ませることができます。 ちなみにブログのヘッダ部分に記述しても大丈夫ですが、同じ場所（フッタ）に実行プログラムも書くので、わかりやすくまとめて書けるようにしました。

実行プログラムを追加

同じ場所です。 はてなブログの管理画面の「デザイン」→「カスタマイズ」→「フッタ」へ移動し、以下のプログラムを追加してください。 変更または追加したら必ず上部にあるボタンから保存してください。

<script>
    /* URLコピー機能 */
    var clipboard = new ClipboardJS('.share-btn__item--link');
    clipboard.on('success', function() {
        /* URLコピー完了時の挙動*/
        $('.url-copy').fadeOut().delay(1500).fadeIn();
        $('.url-copied').delay(500).fadeIn().delay(500).fadeOut();
    });
</script>

シェアボタンをカスタマイズ

実際に私のブログで使っているコードはこちらです。 シェアボタンを設置してある部分なので、管理画面の「デザイン」→「カスタマイズ」→「記事」→「記事上」に書き込んであります。 ここは各自自分が選んだデザインのHTMLが書かれていると思うので、以下は参考に、自分のコードに合わせて考えてください。

<a href="javascript:void(0);" data-clipboard-text="{Permalink}" class="share-btn__item share-btn__item--link">
    <span class="url-copy">
        <i class="fas fa-link"></i>
        <span class="share-btn__small-text">URLをコピー</span>
    </span>
    <span class="url-copied">
        <span class="share-btn__small-text">しました</span>
    </span>
</a>

説明します。

クリックでjavascriptを呼び出す

まず、クリックするとjavascriptを呼び出すように以下のように付け加えてます。

href="javascript:void(0);2
エントリーの個別URLを読み込ませる

次にはてなのURLを読み込ませるために以下を付け加えてます。

data-clipboard-text="{Permalink}"
クラス名を合わせる

次に重要なのがさっきフッタにコピペしたjavascriptの.share-btn__item--linkというクラス名です。

設置したソーシャルボタンの中でURLコピーに使いたいボタンのクラス名を.share-btn__item--linkにするor付け加えることで、そのボタンを押すとURLのコピースクリプトが実行されるようになります。 べつにクラス名は何でもいいのですが、html部分を書き換えたらscriptもそれに合わせてください。

コピー前の文字列

コピー前の文字列を.url-copyというクラスでで囲みます。

べつにクラス名は何でもいいのですが、html部分を書き換えたらscriptもそれに合わせてください。

コピー前の文字列

コピー後の文字列を.url-copiedというクラスで囲みます。

べつにクラス名は何でもいいのですが、html部分を書き換えたらscriptもそれに合わせてください。

おまけ

iで囲まれている部分はFont Awesomeのリンクアイコンを表示させています。削除しても大丈夫です。 Font Awesome使いたい方は以下のURLを管理画面の「設定」→「詳細設定」→「headに要素を追加」に記述すればOKです。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

これで終わりです。

まとめ

シェアボタンを別のブログさんのものを使っているのでコピペで簡単にどうぞーというわけにはいかないのですが、理解してしまえば単純なので是非やってみてください。