突然ですが、こんなものを作ってみました。↓
15円から金額のご指定が可能です。「Eメールアドレスをコピー」ボタンを押してから、Amazonギフト券購入ページ（プレゼント箱のイラスト）へお進みください。
あかえほでは、広告収入やイラスト・グッズ販売収入、皆様のサポートにより、無料の絵本を作成しております。いただいたご支援は、今後のサイトの運営資金として大切に使わせていただきます！
きっかけは、こちらの記事を書いた際に↓
「無料でいいの？」というようなお声をいただいて、ふと「note」にあるようなサポート機能を、気軽なAmazonギフト券で似たような形で実装できないかな？と。
別にこれを作ったから支援してくれって話じゃないよ(笑)面白そうだから作っただけ。
もちろんせっかく作ったからこのボックスは活用するし、支援したいと思ってくださった方からのギフト券は大切に使わせていただきます。
で、どうやって作ったのかを備忘録として書き残しておきます。（書いておかないと後で自分で直せないので）
先に言っておきますが真似するのは自己責任でお願いしますm(_ _)mトラブルがあっても一切責任取れません。正直これちょっと自信ないです！(笑)
基本的に「何をやったか」の解説のみで、なぜ？については殆ど触れません。
あくまでご参考程度にご覧いただければと思います。
Amazonギフト券のサポート（投げ銭）ボックスのブロック構造
ワードプレス・グーテンベルク・Cocoon使用です。
こんな感じの構造になっています↓
投げ銭機能として使えそうなサービスは色々ありますが、多くの人がアカウントを持っていて、かつ安心感があるのがAmazonギフト券だと思います。
ただ、送信先を指定しなくてはいけないのが意外と厄介なので、ボタンをぽちっと押せばクリップボードにメールアドレスがコピーできるようにしたかったんですよね。
メールアドレスをそのまま書くことに抵抗ない方は、ボタンにしなくてOKです。
clipboard.jsで任意のテキストをクリップボードにコピー
ワードプレス5.2から「clipboard.js」とやらが普通に(?)使えるようになったとか。
私の使用テーマはCocoonです。
お使いの方はご存知の通り、シェアボタンの中に「コピーボタン」があります。
押すと「タイトルとURLをコピーしました」とメッセージが出ます。
なので、アレコレいじったらやりたい事できるのでは？と思ってやってみました。
ボタンの見た目を子テーマのスタイルシート/追加CSS等でカスタマイズ
こちらの記事を参考にしつつ、
自分用にこんな感じで子テーマのスタイルシートに追記しました。
/-----コピーボタン装飾------/
.button-decoration{
display:block;
margin:20px 13.5px;
padding:14px 20px;
border:solid 2px #ddd;color:#333;
font-size:16px;
text-align:center;
cursor:pointer;
border-radius:30px;
}
.button-decoration:hover{
opacity:0.6;
cursor:pointer;
}
貼り付ける場所は追加CSSでも、特定のページでしか使わないなら投稿エディタ下にあるカスタムCSSでもいいかなと。
カスタムHTMLでボタンを設置
<div class="copy-button button-decoration" data-clipboard-text="受取人のEメールアドレス">
Eメールアドレスをコピー
</div>
data-clipboard-text=”受取人のEメールアドレス“
↑赤字部分を自分のメールアドレスに書き換えれば、とりあえずはボタンができます。
アドレスは迷惑メールが来ても困らない物を使ってね。
<div>タグ内の「Eメールアドレスをコピー」の文言は好きな物に変えてOK。
※クラス名「copy-button」は本来任意の名前に変更できますが、諸事情により変えるとボタンが動作しません。
「タイトルとURLをコピーしました」の文言を変える
ボタンをクリックしたときに表示される文章は指定できるはずです。
が、これは色々試した結果私にはできなかったので、いっそ大元の文言を変えてしまおうと思いました。
【注】本来なら子テーマを作ってやるべき作業ですが、諸事情により私は親テーマを直接いじっています。あくまで参考程度にご覧ください。
（ざっくり言えばこれだけのために作りたくなかったのです。テーマが更新したら直せばいいかなと。。）
外観→テーマエディター→Cocoon（親テーマ）→tmp/footer-javascript.php
ここで、37行目「タイトルとURLをコピーしました」の部分を単純に「コピーしました」に変更。
これで、シャアボタンのコピーボタンを押した時も、アマギフ用アドレスのコピーボタンを押した時も、「コピーしました」と表示されるようになるはず。
で、私の場合ここを変えてしまうと、今度はシェアボタンの方が「コピー」だけでは何をコピーするのかよく分からないよな？と思い、
外観→テーマエディター→Cocoon（親テーマ）→tmp/sns-share-buttons.php
ここの50行目、「コピー」→「タイトルとURLをコピー」へ書き換えちゃいました。
なので、当サイトのアイキャッチ下にあるコピーボタンには「タイトルとURLをコピー」と表示されています。
でもこれはサイトによってはレイアウトが崩れるから、やりたい人だけで。
好きに並べて再利用ブロックに登録し、記事の終わりなどに設置
もう一度この画像を貼ります。
この辺はお好みで。
ひとつ懸念事項が・・・
可愛いから画像リンク付けたいんだけど、アソシエイトの規約的にOKなのだろうか？
自分への投げ銭のために紹介料発生する形になっちゃう。
→アソシエイト・セントラル – ヘルプ Amazonギフト券の販売も紹介料の対象に！
一応現時点でのAmazonアソシエイト・プログラム運営規約はざっと見てみたけど、このケースに当てはまるような文言は無い。
ただ意外と規約が厳しいAmazonアソシエイトの事なので、もし問い合わせたらダメって言われる気がする(笑)
なので、アフィリエイトリンクは使わず、通常のURLをボタンリンクのみにして、以下のような形でシンプルに設置するのが良いのかなと思います。
15円から金額のご指定が可能です。「Eメールアドレスをコピー」ボタンを押してから、Amazonギフト券購入ページへお進みください。
いただいたご支援は、今後のサイトの運営資金として大切に使わせていただきます！
ワードプレスにも投げ銭システムが普及したらいいのに、と思う（最後に）
私の場合、基本的に楽しくコンテンツ作りをしていて収益化は二の次です。
とは言え、現実問題として運営費はかかるので、何かしらの形で収益を出さないとサイト自体が継続できない・質を高められないんですよね。
アドセンスで良いじゃないか、投げ銭なんていやらしい！って思う人もいるかもしれないけど、アドセンスは昔ほど稼げなくなっているし。
相手にどんな広告が表示されているのかとヒヤヒヤするよりは、投げ銭して貰えるようなサイト作りを意識して頑張る方がよほど健全なように思う。
ワードプレスでもプラグインを使えば、簡単にnoteのように投げ銭システムを導入できるけど、果たしてよく知りもしないサービスに登録してまでサポートをしたいと読者の方が思うだろうか・・・？
たくさんの人が使って、認知度・信頼度が上がれば別だけど。
という訳で、Amazonギフト券でサポートできるボックスを作ってみたのでした。
最後までお読みいただき、ありがとうございました。