誕生日前日!Amazonほしい物リストボタンを作ってみよう

この記事をシェアする

 あとで読む

f:id:snbmnt:20190803174625p:plain

 

 

みなさんこんばんは、しゅご( @my_sanctuary_)です🙋🏻‍♀️💕

 

 

なんと!!!!!

本日は私のバースデーイヴでございます👏🏻

明日8/423歳になります💗

自慢じゃないけどオバマ元大統領と同じ誕生日です🤣

 

 

さて、誕生日といえば誕生日プレゼント🎁

誕生日に自分がほしい物を自ら周りに言うのは気が引けるけど、せっかくだからほしい物もらった方が嬉しいですよね!

 

 

そんなときはAmazonのほしい物リストがおすすめ👍🏻💕

自分がほしい物をリスト化したもので、URLをSNSのプロフィール欄自分のサイトに貼っておけば誰でも見ることができます!

 

 

「Amazonほしい物リストとはなんぞや!」という人はこちらのサイトに分かりやすく書かれているので読んでみてね👇🏻

 

mone-creator.com

 

 

みなさん、私のブログにもほしい物リストがあるのですが気づきましたか!?

 

 

f:id:snbmnt:20190803180455p:plain



誰か私にほしい物リストから誕生日プレゼント送ってくれないかな~🙃

 

 

ってことで、今日はAmazonほしい物リストボタンの作り方をシェアするよ🤩

 

 

  

 

Amazonほしい物リストボタンの作り方

 

CSS

 

まずはCSSを貼ってしまいましょう!

 

 

/*Amazonボタン*/
.pf-amazon:hover {
background: #232F3E;
text-decoration: none;
transition: all ease-in-out .3s;
}

.prof-sns .pf-amazon {
display: inline-block;
font-size: 8px;
width: 70%;
height: 50px;
margin: 0% 1.5% 5%;
padding-top: 6px;
border-radius: 5px;
text-align: center;
letter-spacing: .05em;
background: #474F59;
color: #fff;
}

.pf-amazon:hover{
background: #232F3E;
text-decoration: none;
transition: all ease-in-out .3s;
}
.prof-sns .fa-amazon,.prof-sns .fa-user-circle-o,.prof-sns .fa {
font-size: 3em;
}

}

 

 

👆🏻のコードをコピーして、はてなブログのダッシュボード➡デザイン➡カスタマイズ➡デザインCSSに貼りつけ ➡変更を保存する

 

 

HTML

 

次はHTMLをボタンを表示させたい場所に貼ります!

私はサイドバーに貼っています💁🏻‍♀️

 

 

<div class="prof-sns dfont"></a><a class="pf-amazon" href="Amazonほしい物リストのURL"><i class="fa fa-amazon" aria-hidden="true"></i><div style="color:#FF9900;">Wish list</div></a></div>

 

 

Amazonほしい物リストのURL自分のほしい物リストのURLに変更してください💡

 

 

ちゃんと表示されたかな?クリックして確認してみてね!

 

 

参考にさせて頂いたサイト

 

今回はこちらのサイトを参考にしてコードを自分で少しいじってみました🙌🏻

 

kumalog.org

 

 

これで誕生日関係なく誰かからプレゼントが届く日も遠くない🤔💭

特にSNSでフォロワーが多い人(インフルエンサー?)有名ブロガーはファンからプレゼントが貰える可能性が高い😚

 

 

私へのプレゼントも24時間365日募集してますよ😆

 

 

明日から23歳になりますが、早く精神年齢が実年齢に追いついて欲しいと切実に願うばかりです😰(まだ中身は15歳くらい) 

22歳もお世話になりましたが、23歳の私もどうぞよろしくお願いします🙇🏻‍♀️🙇🏻‍♂️

 

 

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

 

 

  ブログランキング・にほんブログ村へ