この記事では、私がこのブログで実践しているブログカスタマイズのうち、 Amazon で購入するのボタン（下記のボタン）のCSSとHTMLのコードをお伝えします。
Amazonで購入
※Amazonのトップページに飛びます
Amazonで購入！ のボタンのCSS＆HTMLのコードはコレだ！
AmazonボタンのCSSは、下記のコード。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .square_btn{ | |
| position: relative; | |
| display: inline-block; | |
| width: 300px; | |
| border: 1px solid #9c7e31; | |
| border-top: 1px solid #a88734; | |
| border-bottom: 1px solid #846a29; | |
| border-radius: 3px; | |
| background: linear-gradient(to bottom, #f7dea1, #f0c24d); | |
| box-shadow: 0 1px 0 #faecc8 inset; | |
| text-align: center; | |
| color: #111; | |
| font-size: 0.8em; | |
| line-height: 1; | |
| padding: 0.7em; | |
| } | |
| .square_btn:hover { | |
| background: linear-gradient(to bottom, #f5d689, #eeba35); | |
| } |
AmazonボタンのHTMLは、下記のようになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="square_btn" href="#" style="text-decoration: none;"><span style="color: black;"><span style="font-size: large;"></span> | |
| Amazonで購入</span> | |
| </a> |
※ 「#」をジャンプ先のリンクに置き換えて使用してください。
Amazonボタンを自作した理由
世の中には、 Amazon や楽天の購入ページにジャンプできるカエレバなど便利なサービスがたくさんあります。
でも、カエレバは以前に自分以外のトラッキング ID が混入してしまったことがあったそうそうで、少々不安に思っていました。
設定するは面倒ですが、何か問題があっても自分で対処できるようにと思い、 CSS で作ってみました。
まだまだ CSS も HTML も学んでいる最中なので細かいところはよく分かっていないところもあるのですが、ネット上にある皆さんのお知恵をお借りしながら作りました。
参考にさせて頂いたブログ
天下のサルワカ様。 WordPress で大人気のテンプレート「Sango」の作成チームによるCSSのデザイン一覧です。
Amazonボタンのデザインを参考にさせていただきました。Webデザインにお詳しい方で、どの記事も参考になり、じっくり読ませていただいています。いつもありがとうございます✨
