読者です 読者をやめる 読者になる 読者になる

Amazon「ほしい物リスト」ボタンを作る方法!あのボタンを自作する!

今までご紹介したHTML5/CSS3の機能を組み合わせることで綺麗なボタンを自分で作成することが出来ます。


TwitterFacebookAmazonなどのあらゆるボタンを自由に作れますので、今回の記事では実際に「Amazon ほしい物リスト」のボタンを作成してみます。

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

あのAmazonの象徴的なボタンを作ります。完成イメージは次のとおりです。

そめごろうのほしい物リスト


使用している4つの機能

よく見かけるボタンですよね。
使っている機能は今まで記事にてご紹介した次の4点です。
1.HTML5/CSS3 簡単に「上下中央揃え」にする2つの方法 インライン要素、ブロック要素 - 生活情報オンライン
2.HTML 角を丸くする方法 - 生活情報オンライン
3.HTML グラデーションのかけかた - 生活情報オンライン
4.HTML リンクを押せる範囲を拡大する方法 - 生活情報オンライン


これらを組み合わせると上記のようなこれぞAmazonなボタンを作成することが出来ます。


上記のボタンはきちんとボタンとしてのジャンプ機能も持ち合わせています。ジャンプ先は本記事の作成者である「そめごろう」のAmazonほしい物リストです。
このジャンプ先を変更することで、ご自分の「ほしい物リスト」へジャンプするボタンも作成することが出来ます。


ブログの隅にこんなボタンがあったら思わずクリックして覗いてみたくなってしまいますね。

ソースコード

それではソースコードをご紹介します。今回ももちろんコピー&ペーストOKです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
@charset "utf-8";

.a-button {
  border-color: #a88734 #9c7e31 #846a29;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  font-size: 13px;
}

.a-button:active{
  border-color: #a88734 #9c7e31 #9c7e31;
}

.a-button-text {
  color: #111;
  font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  height: 100%;
  line-height: 29px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.a-button-inner {
  background: rgb(243,208,120);
  background: -webkit-linear-gradient(top,rgba(240,193,75,0.9),rgba(247,223,165,0.9));
  background: linear-gradient(to bottom,rgba(247,223,165,0.9),rgba(240,193,75,0.9));
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  border-radius: 2px;
  display: block;
  height: 29px;
  position: relative;
  width: calc(13em + 20px);
}

.a-button-inner:hover{
  background: -webkit-linear-gradient(top,rgba(240,193,75,1),rgba(247,223,165,1));
  background: linear-gradient(to bottom,rgba(247,223,165,1),rgba(240,193,75,1));
}

.a-button-inner:active {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
}
</style>
</head>
<body>

<span class="a-button">
  <span class="a-button-inner">
    <a href="http://amzn.asia/ih5VQQG" class="a-button-text">そめごろうのほしい物リスト</a>
  </span>
</span>

</body>
</html>

ちなみに、リンク(ジャンプ先)は上記ソースコードのうちの次の部分です。

<a href="http://amzn.asia/ih5VQQG" class="a-button-text">

この「"http://amzn.asia/ih5VQQG"」をご自分のリンクに変更することで、ご自分のほしいものリストにジャンプするボタンを作成することが出来ます。


なお、リンクの作成方法については次のとおり公式サイトに記載があります。
Amazon.co.jp ヘルプ: ほしい物リストを作成する


上記の公式サイトには図が無いので少々わかりづらいかもしれません。
図を使った説明がお好みの方は、こちらの方の記事が明るいです。
www.sukicomi.net

HTML5/CSS3 簡単に「上下中央揃え」にする2つの方法 インライン要素、ブロック要素

HTML5/CSS3ではflexが登場して、上下中央揃えがとても楽になりました。


要点を掴めばこんな風によそ見してても簡単に出来ます。
f:id:somegoro:20170324023808j:plain
ぜひこの記事を読んで、要点を掴んでいってください。


さてそれでは、今回の記事では次の2つの上下中央揃えパターンをご紹介します。
・インライン要素 of ブロック要素
・ブロック要素 of ブロック要素

インライン要素 of ブロック要素


インライン要素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#parent_block{
  border: 1px solid black;
  height: 100px;
  width: 250px;
  text-align: center;/* 横の位置を中央にする */
}

#child_inline{
  line-height: 100px;/* 行間を指定 */
  border: 1px solid blue;
}
</style>
</head>
<body>
<div id="parent_block">
  <span id="child_inline">インライン要素</span>
</div>
</body>
</html>

インライン要素とブロック要素の境界がわかりやすいように、それぞれ青と黒でボーダーを引いています。

ブロック要素 of ブロック要素



ブロック要素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#block_parent{
  align-items: center;/* 縦の位置を中央にする */
  border: 1px solid black;
  display: flex;
  justify-content: center;/* 横の位置を中央にする */
  height: 100px;
  width: 250px;
}

#block_child{
  border: 1px solid blue;
}
</style>
</head>
<body>
<div id="block_parent">
  <div id="block_child">ブロック要素</div>
</div>
</body>
</html>

こちらにもブロックとブロックの境界がわかりやすいように、それぞれ青と黒でボーダーを引いています。