お洒落なアフィリエイトのリンクが作れる「カッテネ」の使い方

「カッテネ」は、以前にあった「カエレバ」・「ヨメレバ」と同等の表示ができるアフィリエイトのリンクボックス（って言うのかな・・・汗）です。

１つのボックスに複数のアフィリエイトリンクをお洒落に演出できます。ブログでアフィリエイトをする際にはかなり役に立つツールです。

この記事では「カッテネ」の使い方について解説します。あなたがこの記事を読むことで、カッテネの使い方が分かります。是非、最後までよんでくださいね。

カッテネとは

今の時代、複数のアフィリエイトリンクをお洒落設置できるツールがあります。イメージ的にはカード型のアフィリエイトリンクです。分かりやすく言うと、かつて一世を風靡した「カエレバ」・「ヨメレバ」です。

所がある日突然、カエレバ・ヨメレバが使いにくくなってしまったんです。そこから類似の機能を持つツールが出回りました。が、ブログサービスによって使えたり使えなかったりと、ユーザーを悩ませていたんです。丁度、僕がbloggerへの移転を考えていた時に悩んでいました。その時に巡り会ったのが「カッテネ」でした。

カッテネの特徴

カッテネの特徴は、カエレバの様な自動でアフィリエイトリンクが挿入される仕組みではありません。

エッ？！まさか…手入力？！

手入力だよ。でも、調べるリンクは載せる数＋画像のURLだけから安心してね。

カッテネは手動入力なので、Amazonや楽天のリンクの仕様が変わったとしても使い続けられるのは最大の特徴です。カードに載せるアフィリエイトのリンク個数＋商品画像のURLが分かれば簡単に設置できます。次項で「カッテネ」の設置方法を解説しますね。

カッテネの設置方法

カッテネはcssとHTMLを使う事で簡単に設置できます。では、設置の手順を説明します。

①cssにコードを貼りつけます。（コピペ可）

.kattene {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 10px;
  padding-bottom: 5px;
  margin-bottom: 1em;
  box-sizing: border-box; }

.kattene div{
  margin: 0;
}

.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);
    margin: 0;
    max-height: 160px;
    width: auto;
  }

.kattene__description {
  font-size: 0.8em; }

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

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

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

  .kattene__btns .kattene__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__imgpart {
    padding-bottom: 1em; }
  .kattene .kattene__btns {
    margin-top: 0.5em; }
  .kattene__btns.__five > div {
  width: 49.5%; }
  .kattene__btns.__five > div:nth-child(odd) {
    margin-right: 1%; }
  .kattene__btns.__five > div:last-child {
    margin-right: 0;
    float: right; }

  .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%;
    padding-bottom: 5px;
  }

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

  .kattene .kattene__description {
    margin-bottom: 4em;
  }

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

  .kattene__btns.__five > div {
    width: 19.2%; }

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

    .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; } }

.kattene .kattene__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 0;
  text-decoration: none;
  transition: background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; }

  .kattene__btn:hover, .kattene__btn:focus {
    background-color: #439aa7;
    color: #fff !important; }

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

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

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

.kattene__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; }

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

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

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

.kattene__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; }

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

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

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

.kattene__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; }

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

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

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

.kattene__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; }

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

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

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

.kattene__btn.__pink {
  background-color: #e1325b;
  -webkit-box-shadow: 0 5px 0 #b42849;
  -moz-box-shadow: 0 5px 0 #b42849;
  box-shadow: 0 5px 0 #b42849;
  -o-box-shadow: 0 5px 0 #b42849;
  -ms-box-shadow: 0 5px 0 #b42849;
  margin-bottom: 5px;
  border-radius: 3px;
  text-align: center; }

  .kattene__btn.__pink:hover {
    background-color: #b42849; }

  .kattene__btn.__pink i {
    font-weight: bold; }

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

（＊上手くコピー出来なかったら カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ のページを参考にしてください）

この作業で準備完了です。css設置は最初の１回だけなので、通常はHTMLの編集のみです。

HTMLを編集する

HTMLはリンクの数に合わせて編集する必要があります。では、手順を解説します。

カッテネのページに載っているHTMLコードをコピーして、ブログで表示させたい部分に貼りつけます。その時、「商品画像のURL」・「ASPのアフィリエイトリンク」を貼りつけてくださいね。

画像の赤い枠の部分にアフィリエイトのリンクをコピペしてください。緑色の枠の「five」は、あなたが載せたいリンクの個数に書き換えてください。（書き換えないと、不要なリンクボタンが出現します）

説明の部分は、入れても入れなくても大丈夫です。因みに、僕は著者名・出版日・出版社を載せています。

ここまでの作業で完成です。僕はリンクの数は読者を迷わすだけなので、２つに設定しています。（kindleがある時は３つにしてます）

このやり方で作ったリンクがこちらです。

セールスコピー大全

【著者：大橋一慶 / 出版日：2021年1月12日】

Amazon

楽天ブックス

リンク枠も使いすぎに注意

アフィリエイトのリンクが多すぎるのは読者を圧迫してしまうかもしれません。アフィリエイトリンク枠の使いすぎには気をつけてくださいね。どうしても、その記事で紹介したいのであれば商品ページを作って、そちらに誘導してくださいね。

アフィリリンクの数・・・カッテネは５つのASPのリンクが載せれます。一見、便利さを感じるのですが、リンクボタンが主張しすぎると感じました。

なので、僕は最大で３つにしています。１つのASPで使ってもスッキリしたデザインなので使いやすくなります。あなたの使い勝手に合わせて色々試してくださいね。

カッテネのメリット・デメリット

カッテネにもメリットとデメリットがあるのでお伝えしておきます。判断材料にしてください。

デメリット

カッテネのデメリットはその都度、作る必要があります。この手の作業が苦手な人はデメリットに感じるかもしれません。他にはHTMLの作業もあるので、苦手な人にはデメリットでしかありません。

ですが、この作業も繰り返し作ることで慣れます。慣れたら、ブログを書く感覚くらいになるので焦らずじっくり取り組んでくださいね。

メリット

カッテネのメリットは、スッキリお洒落なデザインで表示出来る所ですね。他には複数のリンクを載せているので、取りこぼしは少なくなるのもメリットを感じます。すっきり見やすいブログに出来るのは嬉しい限りです。

1度作ったカッテネはコピペで他の記事でも使えます。この辺りの便利さを考えると、新たに書き直すよりも大幅な時間短縮になります。

カッテネを使って得られる事

前項でもお伝えしたのですが、カッテネを使う事で取りこぼしは減らせます。Amazonと楽天であれば読者も知っている人は多いので、売り上げにつながりやすいです。

カエレバやRinkerだと、ASPのリンクは載せれません。ですが、カッテネはAmazonや楽天との比較でASPのリンクを載せる事ができます。

様々なASPと比べることで、売り上げにつながりやすいのは、あなたも嬉しさを感じて頂けると思います。早速、あなたｍｐカッテネを試してくださいね。

アフィリエイトリンクのバリエーション

Amazonも楽天も商品のリンクを準備してくれています。ですが、クリック率はカッテネリンクの方が多かったです。ASPのリンクと使い分けることで宣伝臭いサイトになりにくいので、バリエーション変えながら宣伝するのもアリですね。

アフィリエイトは「売り込む」と失敗します。なので、提案することに専念してください。そっと提案するには商品ページを見たくなるような記事を書くことです。あなたなりの伝え方で色々書いてみてくださいね。

合わせて読みたい

アフィリエイトで売れるブログの作り方～３つの基本ルール～

今回のまとめ

今回は「お洒落なアフィリエイトのリンクが作れる「カッテネ」の使い方」をテーマに解説しました。併せて、アフィリエイトリンクの貼り方のコツもお伝えしました。いかがでしたか？

Bloggerにはデフォルトで、複数のリンクが貼れる機能は備わっていません。ですが、cssとHTMLを使う事で簡単に設置できます。Bloggerはカスタムの自由度は高いので、便利な機能は取り入れたいですね。

あなたも、役立ちそうな機能があれば、どんどん取り入れてくださいね。考えるよりも「試してみる」を最優先にしていきましょう。

編集後記

WordPressからBloggerに来た時に、複数リンクが載せれる機能をどうすればイイのか悩みました。まさか、WordPressで使ってた「カッテネ」がBloggerに対応しているとは思いませんでした。

リンクのクリック率が上がったのは確認済みなので、迷わず導入しました。最初は慣れない作業で苦戦しましたが、今はBloggerの使い方にも慣れたので普通の作業と変わらない感覚で作業出来ています。WordPressで便利さを感じた機能があれば試してみますね。

今回も最後まで読んで頂きありがとうございました、このブログに関するご意見などございましたら、サイドバーのお問い合わせから連絡をお願いしますね。その他、質問や感想なども随時受け付けています。あなたの意見を聞かせて頂けると嬉しいです。よろしくお願いします。

あなたの応援に感謝します。

～この記事を書いた人～

ブログ ✕ ライティングだけで生活することを目標にブログを書いています。全くのゼロ知識からのスタートでしたが、ようやく道筋が見えてきました。
これからも情報発信を続けます。

【無料メルマガ】

お洒落なアフィリエイトのリンクが作れる「カッテネ」の使い方

カッテネとは

カッテネの特徴

カッテネの設置方法

HTMLを編集する

リンク枠も使いすぎに注意

カッテネのメリット・デメリット

デメリット

メリット

カッテネを使って得られる事

アフィリエイトリンクのバリエーション

今回のまとめ

編集後記

コメント

ブーメランの法則～あなたの行動はあなたの元へと帰ってくる法則～

AmazonタブレットFIRE HD10 小型ノートパソコン化計画継続中～表計算編～

Google Siteを使って簡単にLPを作る方法

今、話題の「chat GPT」を試してみた～レビューと感想のお届け～

bloggerブログの始め方～ブログ開設から初期設定まで徹底解説