cover image

クリップボードにコピーボタンを設置する

キャンペーンなどでよくある「ボタンをクリックすることでクリップボードにテキストをコピーする」機能を持ったボタンを制作するサンプルを制作します。
 

管理画面でのセットアップ

  1. コンテンツエリアの「コードブロックを使ったHTML挿入機能をONにする 」へチェックを入れます。
 
  1. 次のScriptを”HTML直接追記(head内)”へ追加します。
Markup
  1. また、Scriptを”HTML直接追記(body内)”へ追加します。
Markup
 

Notion側でのセットアップ

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