カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ

カエレバやヨメレバは、1商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。ですが、評判の割に、実際に使ってみると結構難しい。なんか検索しても、商品が出てこなかったり、HTML貼っても表示されなかったり、カスタマイズが難しかったり。なので、もっと簡単に使えるカッテネというものを作りました。

カッテネとは?

こんな感じのものです。カエレバやヨメレバのように、一つの商品に対して、複数のASPやショッピングサイトのリンクを貼ることができます。

スマホで見てもいい感じになるので、ご覧になってください。

現状ボタンが4つまで対応しています。それぞれどんなデザインになるかご紹介しますね。ここでは書籍の例しかありませんが、その他の商品でも全然大丈夫です。ボタンのラベルも好きなものに変えられます。

ボタンが1つの時

PCで見た場合

カッテネ ボタン1つ PC

スマホで見た場合

カッテネ ボタン1つ スマホ

ボタンが2つの時

PCで見た場合

カッテネ ボタン2つ PC

スマホで見た場合

カッテネ ボタン2つ スマホ

ボタンが3つの時

PCで見た場合

カッテネ ボタン3つ PC

スマホで見た場合

カッテネ ボタン3つ スマホ

ボタンが4つの時

PCで見た場合

カッテネ ボタン4つ PC

スマホで見た場合

カッテネ ボタン4つ スマホ

こんな感じで、ボタンの数と、PCかスマホかによってよしなにボタンをレイアウトしてくれます。あと、やっぱり目立つボタンの方が押してもらいやすいです。

カッテネの使い方

カッテネは非常に簡単に導入できますが、カエレバやヨメレバのようにWEBサイトで検索して、HTMLを生成するというものではありません。

商品のURL、商品タイトル、画像のURLなどはご自身でそれぞれのASPから取得してくる必要があります。とはいえ、カエレバやヨメレバは、検索してもなぜか商品がヒットしなかったり、ASPに限りがあったりするので、実はご自身でそれらの情報を持ってこれた方が安心感があります。

カエレバやヨメレバのようなWEBサイトに依存しないので、自由にカスタマイズできます。

具体的に使い方を見ていきましょう。

CSSの編集

まず、ちょっと長いですが、以下のCSSをあなたのサイトのCSSファイル(style.cssなど)に追記してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
/* カッテネ */
.kattene {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 1em;
  box-sizing: border-box; }

.kattene__imgpart {
  text-align: center; }

  .kattene__imgpart img {
    -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    -o-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    -ms-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); }

.kattene__description {
  font-size: 0.8em; }

.kattene__btns {
  width: 100%;
  margin-top: 1.2em; }

  .kattene__btns:after {
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    content: "."; }

  .kattene__btns > div {
    float: left;
    margin-bottom: 5px; }

  .kattene__btns .btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
   }

  .kattene__btns.__three > div {
    width: 32.66667%; }

    .kattene__btns.__three > div:not(:last-child) {
      margin-right: 1%; }

  .kattene__btns.__two > div {
    width: 49.5%; }

    .kattene__btns.__two > div:nth-child(odd) {
      margin-right: 1%; }

@media screen and (max-width: 900px) {

  .kattene__btns.__four > div {
    width: 49.5%; }

    .kattene__btns.__four > div:nth-child(odd) {
      margin-right: 1%; }

  .kattene__btns.__one > div {
    width: 50%;
    margin-left: 25%; } }
@media screen and (min-width: 901px) {

  .kattene {
    display: table;
    width: 100%; }

  .kattene__imgpart {
    display: table-cell;
    width: 20%; }

  .kattene__infopart {
    display: table-cell;
    vertical-align: top;
    position: relative;
    padding-left: 10px;
    width: 80%; }

  .kattene__btns {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    padding-right: 10px; }

    .kattene__btns.__four > div {
      width: 24.25%; }

      .kattene__btns.__four > div:not(:last-child) {
        margin-right: 1%; }

    .kattene__btns.__two > div {
      width: 49.5%; }

      .kattene__btns.__two > div:not(:last-child) {
        margin-right: 1%; }

    .kattene__btns.__one > div {
      width: 49.5%;
      float: right; } }

.btn {
  appearance: none;
  background-color: #54c0d1;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: 0.75em 1.5em;
  text-decoration: none;
  transition: background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; }

  .btn:hover, .btn:focus {
    background-color: #439aa7;
    color: #fff; }

  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

    .btn:disabled:hover {
      background-color: #54c0d1; }

.btn.__small {
  padding: 0.55em;
  font-size: 0.9em; }

.btn.__orange {
  background-color: #FF9901;
  -webkit-box-shadow: 0 5px 0 #cc7a01;
  -moz-box-shadow: 0 5px 0 #cc7a01;
  box-shadow: 0 5px 0 #cc7a01;
  -o-box-shadow: 0 5px 0 #cc7a01;
  -ms-box-shadow: 0 5px 0 #cc7a01;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .btn.__orange:hover {
    background-color: #cc7a01; }

  .btn.__orange i {
    font-weight: bold; }

    .btn.__orange i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.btn.__blue {
  background-color: #007dcd;
  -webkit-box-shadow: 0 5px 0 #0064a4;
  -moz-box-shadow: 0 5px 0 #0064a4;
  box-shadow: 0 5px 0 #0064a4;
  -o-box-shadow: 0 5px 0 #0064a4;
  -ms-box-shadow: 0 5px 0 #0064a4;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .btn.__blue:hover {
    background-color: #0064a4; }

  .btn.__blue i {
    font-weight: bold; }

    .btn.__blue i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.btn.__red {
  background-color: #c20004;
  -webkit-box-shadow: 0 5px 0 #9b0003;
  -moz-box-shadow: 0 5px 0 #9b0003;
  box-shadow: 0 5px 0 #9b0003;
  -o-box-shadow: 0 5px 0 #9b0003;
  -ms-box-shadow: 0 5px 0 #9b0003;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .btn.__red:hover {
    background-color: #9b0003; }

  .btn.__red i {
    font-weight: bold; }

    .btn.__red i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }

.btn.__green {
  background-color: #0BBD80;
  -webkit-box-shadow: 0 5px 0 #099766;
  -moz-box-shadow: 0 5px 0 #099766;
  box-shadow: 0 5px 0 #099766;
  -o-box-shadow: 0 5px 0 #099766;
  -ms-box-shadow: 0 5px 0 #099766;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .btn.__green:hover {
    background-color: #099766; }

  .btn.__green i {
    font-weight: bold; }

    .btn.__green i:before {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; }
/* カッテネここまで*/

CSSの編集はこれで完了です。あとは、記事側に貼り付けるHTMLを作るだけです。

HTMLの作成

下のHTMLをテンプレートにして、ご自身が紹介したい商品に合わせて修正してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="kattene">
  <div class="kattene__imgpart"><a target="_blank" href="【メインのURL】"><img src="【画像URL】"></a></div>
  <div class="kattene__infopart">
    <div class="kattene__title"><a target="_blank" href="【メインのURL】">【タイトル】</a></div>
    <div class="kattene__description">【説明】</div>
    <div class="kattene__btns __four">
      <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div>
      <div><a class="btn __blue" target="_blank" href="【商品のURL】">Kindle</a></div>
      <div><a class="btn __red" target="_blank" href="【商品のURL】">楽天ブックス</a></div>
      <div><a class="btn __green" target="_blank" href="【商品のURL】">楽天Kobo</a></div>
    </div>
  </div>
</div>

修正するそれぞれの部分についてご説明します。

メインのURL

タイトルや画像をクリックすると開くURLになります。なので、複数のASPの中でも、特に開いてほしいURLをここに入れておくと良いかと思います。

画像URL

PCだと左側に表示される画像のURLです。おすすめはリンク切れが起きにくいAmazonの画像を使うことです。

下のように、Amazonアソシエイトの商品リンクを作成する画面で、「画像のみ」タブにて、サイズを「中」にし、右側に表示された画像を右クリックし、「イメージのアドレスをコピー」をクリックすれば、URLがコピーできます。(これはMacの場合です。Windowsの場合は「画像アドレスをコピー」だったかな。)

Amazonで商品画像のアドレスを取得

これを先ほどのHTML内の【画像URL】の部分に貼り付けてもらえればOKです。

タイトル

商品名を入れてください。

説明

ここは自由ですが、書籍であれば、著者、出版社、出版年月日。モノであれば、メーカーの名前や発売日などを入れるのがいいかと思います。

商品のURL

こちらにはあなたのお好きなASPなどのアフィリエイトリンクを貼り付けてください。HTML内の、「Amazon」とか「楽天ブックス」とか書いている部分はボタンのラベルですので、お好きなものに変えてOKです。

ボタンの色について

上のHTML内の7〜10行目のaタグのクラスに__orange__blueとあるのがお分かりになりますか?こちらを変えることで色を変えることができます。現状、__orange__blue__red__greenの4色のみです。

ボタンの数について

上のHTMLでは、ボタンが最大の4つある形になっていますが、もちろん1〜3つに減らすことができます。その際は、不要なボタンの部分を削除してください。それぞれのボタンのaタグを囲んでいるdivタグごと削除します。

数を変えた場合、忘れてはいけない作業が一つあります。

上のHTMLの6行目の修正です。

1
    <div class="kattene__btns __four">

この部分の__fourというのを、数に応じて変えてください。

ボタンが1つなら__one、2つなら__two、3つなら__three、4つなら__fourとなります。

以上でHTMLの作成も完了です。記事内の好きな部分に貼り付けてください。また、URLにミスがないか実際にクリックして確認しておきましょう。

さいごに

いかがでしたでしょうか?

すごくシンプルな作りなので、簡単に導入できるのでは、と思います。

なお、もしうまく表示できない方は、問い合わせフォームから遠慮なく連絡ください。できる限りサポートさせていただきます。

また、こうして欲しいなどの要望も、頂ければ助かります。

羊毛や小麦