【jQuery】ページのタイトルとURLをコピーするボタンを作る

スポンサーリンク
コピーボタンアイキャッチ プログラミング

こんにちは!セミマサです。

私のサイトでも使用しているWordPressテーマ「Cocoon」では記事のタイトルとURLをコピーするボタンが用意されています。

このボタンがどのように動いているのか気になったので、実際にそれっぽいボタンを作成してみました!

デモサイト

下のボタンを押すと今回作成したデモサイトへ移動します。

事前準備

今回はjQueryだけでなく、Font Awesome5とclipboard.min.jsを使用します。

HTML

今回のHTMLです。

・コピー内容となるdata-clipboard-textはjQueryで取得したものを格納するので空欄となっています。

CSS

今回のCSSになります。

jQuery

今回のjQueryです。

・ウィンドウのロード時にURLとタイトルを取得・連結し、コピーボタンのdata-clipboard-textに渡しています。

・クリック時の処理は、メソッドチェーンを利用してモーダルウィンドウを表示する処理と1.5秒後に閉じる処理を連結しています。

おわりに

それっぽい動きのボタンが作れて満足しました。

タイトルとURLをコピーしました