ホーム / ツール /

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

2021/09/19

ツール

t f B! P L


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


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


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



カッテネとは




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


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



カッテネの特徴


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


ﾁｬｺ50
ﾁｬｺ

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

satoshi50
satoshi

手入力だよ。でも、調べるリンクは載せる数＋画像の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日】




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


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


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


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



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


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



デメリット


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


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



メリット


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

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




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


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


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


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




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





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


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







今回のまとめ


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


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


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




編集後記


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


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




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




にほんブログ村 小遣いブログ ブログアフィリエイトへ　

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




～この記事を書いた人～

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



このブログを検索

プロフィール

 


3104writer

HN：3104wrter
job：blogライター
age：53
add：hiroshima city 

好きな言葉：最後に勝つのは「諦めずに行動した人だけだ」。これからも、ブログを書き続けます。

このブログの目標はダイレクト・マーケティングの仕組みを確立すること。ダイレクトマーケティングに関する情報・実践方法・コツをお伝えします。

Ｘ（旧twitter）始めました♪

Twitter：@3104blogwriter

最新記事

連絡はこちらから

名前

メール *

メッセージ *

QooQ