ワードプレス×グーテンベルク×CocoonでAmazonギフト券のサポート（投げ銭）ボックスを作ってみました

突然ですが、こんなものを作ってみました。↓

別にこれを作ったから支援してくれって話じゃないよ(笑)面白そうだから作っただけ。

もちろんせっかく作ったからこのボックスは活用するし、支援したいと思ってくださった方からのギフト券は大切に使わせていただきます。

で、どうやって作ったのかを備忘録として書き残しておきます。（書いておかないと後で自分で直せないので）

私の使用テーマはCocoonです。他のテーマをご使用の方は環境が異なるのでご参考程度に。

先に言っておきますが真似するのは自己責任でお願いしますm(_ _)mトラブルがあっても一切責任取れません。正直これちょっと自信ないです！(笑)

基本的に「何をやったか」の解説のみで、なぜ？については殆ど触れません。

あくまでご参考程度にご覧いただければと思います。

Amazonギフト券のサポート（投げ銭）ボックスのブロック構造

ワードプレス・グーテンベルク・Cocoon使用です。

こんな感じの構造になっています↓

投げ銭機能として使えそうなサービスは色々ありますが、多くの人がアカウントを持っていて、かつ安心感があるのがAmazonギフト券だと思います。

ただ、送信先を指定しなくてはいけないのが意外と厄介なので、ボタンをぽちっと押せばクリップボードにメールアドレスがコピーできるようにしたかったんですよね。

メールアドレスをそのまま書くことに抵抗ない方は、ボタンにしなくてOKです。

clipboard.jsを使った自作コピーボタンでメールアドレスをクリップボードにコピーする

clipboard.jsという機能を使って、任意のメールアドレスをボタン一つでコピーできるようにしました。

ボタンの見た目を子テーマのスタイルシート/追加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;
}

.button-decoration:active{
    background: #ae9890; /* クリックした瞬間のボタンの背景色 */
    color: #FFF; /* クリックした瞬間のボタンの文字色 */
}

「コピーしました！」等の文言をポップアップで出したら親切だとは思いますが、あまり複雑なことはしたくなく。

ボタンをクリックしたらその一瞬だけボタンの色が変わるように設定しました。

お好みで調整してお使いください。

貼り付ける場所は追加CSSでも、特定のページでしか使わないなら投稿エディタ下にあるカスタムCSSでもいいかなと。

カスタムHTMLでコピーボタンを設置

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

<div class="copy-email-btn button-decoration" data-clipboard-text="受取人のEメールアドレス">Eメールアドレスをコピー</div>

<script>
var clipboard = new ClipboardJS('.copy-email-btn');
</script>

一旦このままコピペして、data-clipboard-text=”受取人のEメールアドレス“←赤字部分を自分のメールアドレスに書き換えればボタンができます。

アドレスは迷惑メールが来ても困らない物を使ってね。

<div>タグ内の「Eメールアドレスをコピー」の文言は好きな物に変えてOK。

ボタンの作成にあたり、こちらの記事を参考にさせていただきました。

好きに並べて再利用ブロックに登録し、好きな場所に設置

もう一度この画像を貼ります。

画像はイラストACでダウンロードしたものを載せてみました。

「Amazonギフト券購入ページ」のリンク先は「ボタン設定」のURL欄にAmazonのリンクを入れてください。

その他、メッセージなどなどお好みで。

これくらいシンプルでもいいかもしれません。↓

ワードプレスにも投げ銭システムが普及したらいいのに、と思う（最後に）

私の場合、基本的に楽しくコンテンツ作りをしていて収益化は二の次です。

とは言え、現実問題として運営費はかかるので、何かしらの形で収益を出さないとサイト自体が継続できない・質を高められないんですよね。

アドセンスで良いじゃないか、投げ銭なんていやらしい！って思う人もいるかもしれないけど、アドセンスは昔ほど稼げなくなっているし。

相手にどんな広告が表示されているのかとヒヤヒヤするよりは、投げ銭して貰えるようなサイト作りを意識して頑張る方がよほど健全なように思う。

ワードプレスでもプラグインを使えば、簡単にnoteのように投げ銭システムを導入できるけど、果たしてよく知りもしないサービスに登録してまでサポートをしたいと読者の方が思うだろうか・・・？

たくさんの人が使って、認知度・信頼度が上がれば別だけど。

という訳で、Amazonギフト券でサポートできるボックスを作ってみたのでした。

最後までお読みいただき、ありがとうございました。