クリップボードにコピーボタンを設置する
キャンペーンなどでよくある「ボタンをクリックすることでクリップボードにテキストをコピーする」機能を持ったボタンを制作するサンプルを制作します。
Notion側でのセットアップ
コピーボタンを設置したい場所へ以下のcodeを追加して、左上の言語をHTMLにします。
コピーさせたいテキスト へクリップボードにコピーしてもらいたいテキストを入力します。Markup
すると以下のようなボタンが表示されるようになります、こちらをクリックしていただければテキストがクリップボードに保存されます。
スタイルを変えたい場合には以下のCSSを管理画面の「追加CSS」へ追記してください。
CSS
下記のようなデザインのボタンになります。
更にクリップボードにコピーしたタイミングで、ブラウザへ”コピーしました”というテキストを表示させる場合には、bodyへのhtml挿入のコードを以下に変更します。
Markup
実装したサンプルは以下になります。
カスタマイズしたい場合には以下のように各CSSを追記していただければ可能です。
CSS