NEGIKA BLOG

WEB/DTP DESIGNER NEGIKA

NEGIKA BLOG

WEB/DTP DESIGNER NEGIKA

2019.09.18

jQuery

ブログに記事タイトルとURLをコピーするjQueryプラグイン「clipboard.js」の使い方

こんにちは、negikaです!

ブログに、記事のタイトルとURLをコピーする、なにか便利なものないかと探していたら「clipboard.js」を発見しました。

とても使いやすく便利だったのでご紹介いたします。このブログの下に実装しておりますので押してみてくださいね!

「clipboard.js」のメリット

1SNS画面にログインしないで共有できる

私もそうなのですが基本シェアボタンを使用しません。ログインを求められて面倒だからです。

「clipboard.js」を開発された方は、「シェアボタンを使わず、URLをコピーする」というような方が多いことに気づき、それを参考に作られたようです。

2コピー作業のイライラがない

スマホのコピーってイライラしませんか?1文字ズレたり、無駄にコピーしてしまったり。
「clipboard.js」を使うとボタン1つで簡単にコピーが出来ます。

3ボタンを1回押すだけでURLもタイトルもコピーできる

情報を共有するためには、URLとタイトルは必要ですよね。この「clipboard.js」を使えばボタン1つでどちらもコピーできちゃいます。

「clipboard.js」の使い方

下記サイトからファイルをダウンロードして組み込みます。
https://clipboardjs.com/

1通常の出力の場合

任意でタイトル、URLを変更できます。

See the Pen
blog_clipboard_01
by 葱 (@negika)
on CodePen.


2WordPressの場合

data-clipboard-text=以下を変更します。これでそのページのタイトルとURLを出力することができますよ

See the Pen
blog_clipboard02
by 葱 (@negika)
on CodePen.


まとめ

以上、ブログにタイトルとURLをコピーするjQueryプラグイン「clipboard.js」の使い方をご紹介しました。

SNSボタンをつけなきゃ!と思ってるのはWEB業界の人間だけなのかもしれません。サイトを利用するユーザーの視点が重要ですね。

この記事のURLとタイトルをコピーする

PROFILE

negika

WEB/DTP Designer

工業高校と大学でデザインと建築を学び、その後専門学校でWEBを学ぶ。制作会社勤務を経てフリーランスへ。

→プロフィールはこちら

CONTACT

ホームページ制作/ウェブデザイン/コーディング/印刷物デザインのご依頼/お見積もり/制作実績閲覧はこちらからご連絡ください↓外注先をお探しの制作会社様もお気軽にご相談ください↓

CONTACT