Amazon、楽天、iHerbボタンの作り方

サンプルボタン

あとで示すコードを使うと、下記のようなレイアウトとボタンが作成できます。

リコー デジタルカメラ「RICOH GR3」GRIII GR3(RICOH)

Amazon 楽天市場 iHerb

こんな感じで、Amazon、楽天、iHerbボタンを作ってみました。
もちろん更地からではなく、書籍やサイトを参考にさせて頂いて作成しました。

サンプルコード

HTML

ちなみに、iHerbボタンは私のマイリストへのリンクになっているので、GRⅢはもちろん買えませんよw

<div class="button-area">
[asin:B07P2FD1BD:detail]
  <span class="amazon-button">
    <a target="_blank" href="https://amzn.to/2WEYwN7">Amazon</a>
  </span>
  <span class="rakuten-button">
    <a target="_blank" href="https://hb.afl.rakuten.co.jp/hgc/18c6264a.23c0a403.18c6264b.06047c0c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Femedama%2F4549212300202%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Femedama%2Fi%2F10174213%2F&link_type=text&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJ0ZXh0Iiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjF9">楽天市場</a>
  </span>
  <span class="iherb-button">
    <a target="_blank" href="https://secure.iherb.com/tr/list?id=17484273&rcode=ADK3297">iHerb</a>
  </span>
</div>

上から順にAmazon、楽天、iHerbボタンです。
はてなブログであれば、これはMarkdown形式の編集モードで貼り付けてください。

button-areaの直下には、適当な画像を入れてもOKです。
私はAmazonの画像付きリンクにして楽していますw

で、hrefの部分に各種アフィリエイトのリンクURLを貼り付ければOKです。
プレビューでは確認できないですが、ビックリしないでくださいね。

CSS

htmlだけではキレイになりません。
はてなブログであれば、下記をデザインCSSに貼り付けてください。

.amazon-button {
  display: inline-block;
  text-align:
  center;
  box-sizing: border-box;
  margin: 5px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: bold;
  line-height: 30%;
  box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
  background:#FF9901;
  border: 2px solid #ff9901;
}

.rakuten-button {
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  margin: 5px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: bold;
  line-height: 30%;
  box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
  background: #bf0000;
  border: 2px solid #bf0000;
} 

.iherb-button {
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  margin: 5px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: bold;
  line-height: 30%;
  box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
  background: #008000;
  border: 2px solid #008000;
} 

.amazon-button>a,
.iherb-button>a,
.rakuten-button>a {
  display: block;
  padding: 20px 30px;
  text-decoration: none;
  float: left;
  width: 20%;
  min-width: 128px;
  margin: 0.5%;
  color: #fff;
}

.amazon-button>a:before {
  font-weight: normal;
  font-family: "blogicon";
  content: "\f034" " ";
}

.rakuten-button>a:before {
  font-weight: normal;
  font-family: "blogicon";
  content: "\f722" " ";
}

.button-area {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #333333;
  border-radius: 10px;
  background-color: #f5f5f5;
} 

もっとキレイなコーディングは可能ですが、ちょっとサボっています。
その反面、個別に手を入れやすくなっているのでパラメータをちょこちょこいじって、変化させてみるのも楽しいかもしれません。

さいごに

正直、CSSは苦手です。
java等と違ってコンパイルエラーになりませんし、各定義の繋がりを理解しようとすると、自分のワーキングメモリがガンガン食い潰されていく感覚があります。
きっと、eclipseのようなIDEではクラス間のジャンプなどがしづらいからかと思います。
いっぱい自分で覚えておかないと、クラス定義のスコープがイマイチ頭に入ってこなかったり、どこをどう書くと、どこに影響があるのかという勘所が全然わからないんですよね。

まぁ、これも慣れが必要なだけで、私の勉強不足なのかも。
世のWebデザイナーさん達は本当にすごいなと思います。

はてなブログでこんな勉強ができるとは思ってもいませんでした。
何事も始めてみるもんですね。