こんにちは。はぴです。
アフィリエイトリンクを貼るのに、これまでは「カエレバ」にお世話になっていました。
ですが、なにやら何だかんだあったようで、Amazonのリンクをメインで使用できなくなったそうな。
、、ふ、ふ～ん、、？
売り上げが過去30日以内に発生していないと使えないそうな。
あ、アウトですね(*´ω｀)
よって、「カッテネ」を使ってみることにしました。
しかし、CSSやHTML、、全然詳しくない私。
久しぶりに ひ～こらひ～こら。
私と同じように、「カッテネ」を、
「はてなブログ」で、さらに「もしも」と「バリューコマース」経由で使いたい
という方の参考になればこれ幸い☆
出来上がりはこうなります
カッテネCSS設定
①CSSをコピーする
カッテネの公式ページを参考にさせていただきます。
こちらの記事の、
「６．WordPress以外の場合の使い方」
へ飛びまして、
「カッテネのCSSファイル」をクリックし、内容を全部コピーします。
（こちらからは飛べません(;´･ω･)すみません。やっていいか分からないんだものーやり方わからないんだものー、、。）
②CSSを貼り付ける
はてなブログの編集画面で、
「デザイン（パレットの図）」
→「カスタマイズ（スパナの図）」
→「｛｝デザインCSS 」
とクリックしていき、
CSS編集画面の一番最後に、先ほどコピーしたコードを貼り付けます。
HTMLテンプレートをメモに貼り付ける
以下のコードをコピーして、メモに貼り付けます。
<div class="kattene"> <div class="kattene__imgpart"><a target="_blank" rel="noopener" href="【メインのURL】"><img src="【画像URL】"></a></div> <div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" rel="noopener" href="【メインのURL】">【タイトル】</a></div> <div class="kattene__description">【説明】</div> <div class="kattene__btns __five"> <div><a class="kattene__btn __orange" target="_blank" rel="noopener" href="【商品のURL】">Amazon</a></div> <div><a class="kattene__btn __blue" target="_blank" rel="noopener" href="【商品のURL】">Kindle</a></div> <div><a class="kattene__btn __red" target="_blank" rel="noopener" href="【商品のURL】">楽天</a></div> <div><a class="kattene__btn __green" target="_blank" rel="noopener" href="【商品のURL】">楽天Kobo</a></div> <div><a class="kattene__btn __pink" target="_blank" rel="noopener" href="【商品のURL】">audiobook</a></div> </div> </div> </div>
出典：カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ
（Wordに貼り付けて編集しても大丈夫かもしれないのですが、Word は CSS HTMLなどの情報を含むこともあるとかなんとかで（まだよく調べてはいませんが）、、メモの方が安心かもしれません。）
HTMLテンプレート編集
①【画像URL】
おすすめは、Amazonの商品画像らしいです。（リンク切れしにくいとのこと）
よって「Amazonの画像URL」を「もしもアフィリエイト」経由でGETしにいきます。
もしもアフィリエイトにログインした後、「プロモーション検索」→「提携中プロモーション」をクリック。
「Amazon」商品購入画面の「商品リンク」をクリック。
上の方ではなく、下の方の検索窓に商品名を入力し、検索をクリック。
お目当ての商品の、「商品リンク」をクリック。
画像サイズを小から中に変更します。
画像の上で右クリックし、画像アドレスをコピーします。
メモに貼り付けてあるHTMLの中の【画像URL】という部分（下の画像の青色で選択された部分）をすっかり消して、今コピーした画像URLを貼り付けます。
②【メインのURL】
2か所あります。
公式ページによると、
タイトルや画像をクリックすると開くURLになります。なので、複数のASPの中でも、特に開いてほしいURLをここに入れておくと良いかと思います。
とあったので、 「Amazon」の商品リンクのURLを貼り付けることにします。
※楽天やYahooなどの商品リンクをメインにしたい場合は、それぞれの商品リンクをコピーして貼りつけます。（商品リンクの場所は、下のそれぞれの「商品リンクをGETし貼り付ける」の項目に書いています。）
先ほど、【画像URL】をコピーした画面で、今度は商品リンクのアドレスをコピーします。
（商品リンク（商品画像の下にある商品名の部分）の上で右クリックし、「リンクのアドレスをコピー」）
HTML内の【メインのURL】という部分（下の画像の青色で囲った部分）をすっかり消して、今コピーした「Amazon」の商品のURLに置き換えます。（２か所とも）
③【タイトル】
【タイトル】という部分（【】を含む ）を商品名に置き換えます。
④【説明】
ここは自由ですが、書籍であれば、著者、出版社、出版年月日。モノであれば、メーカーの名前や発売日などを入れるのがいいかと思います。
とあります。
必要な方は【説明】という部分（【】を含む ）を説明文に置き換えます。
説明は書かないという方は、この一行をまんま消します。
⑤【商品のURL】
個々の商品のURLを貼り付ける前に、下の黄色で囲った部分の編集をしようと思います。
１．商品のボタンのラベル・色・数の編集
上の青色で囲った部分（Amazonや、楽天と書いてある部分）が、リンクボタンのラベルになります。好きなように変えてOKだそうです。
赤色で囲った部分が、リンクボタンの色になります。
現状、
orange、blue、red、green、pinkの5色のみです。
とのことです。この５つのうちであれば、好きな色を割り当ててOKのよう。
私の場合、「Amazon」「楽天」「Yahoo」の３つしか使わないので、好きなボタンの色を３つ選んだあと、残りの２列は削除しました。
ラベルもこの３つにします。
また、商品のボタンの数を減らした場合、やらなければならないことがあるそうで、
公式ページによると
数を変えた場合、忘れてはいけない作業が一つあります。
上のHTMLの6行目の修正です。
この部分の
__fiveというのを、数に応じて変えてください。ボタンが1つなら
__one、2つなら__two、3つなら__three、4つなら__four、5つなら__fiveとなります。
とのこと。
３つに減らした場合は、「five」から「three」に変えます。
次は、いよいよ
「Amazon」と「楽天」の商品URLは、「もしもアフィリエイト」経由で、
「Yahoo」の商品URLは「バリューコマース」経由でGETして、それぞれの【商品URL】の部分に貼り付けていきます。
２．「Amazon」の商品URLを「もしもアフィリエイト」でGETし貼り付ける
※先述した 【メインのURL】の貼り付け方とほぼ同じになります。（一番最後の、HTML内に貼り付ける場所が違うだけ）
もしもアフィリエイトにログインした後、「プロモーション検索」→「提携中プロモーション」をクリック。
「Amazon」商品購入画面の「商品リンク」をクリック。
下の方の検索窓に商品名を入力し、検索をクリック。
出てきたお目当ての商品の「商品リンク」をクリック。
画像サイズを小から中に変更します。
商品リンク（商品画像の下にある商品名の部分）の上で右クリックし、「リンクのアドレスをコピー」します。
「Amazon」の【商品のURL】という部分（下の画像の青色で選択された部分）をすっかり消して、今コピーした商品リンクのアドレスを貼り付けます。
２．「楽天」の商品リンクを「もしもアフィリエイト」でGETし貼り付ける
「Amazon」の場合と入口が違うだけで、ほぼ似たような方法になります。
「楽天」商品購入画面の「商品リンク」をクリック。
下の方の検索窓に商品名を入力し、検索をクリック。
出てきたお目当ての商品の「商品リンク」をクリック。
、、スーがたくさん出てきた（笑）どれ選べばいいのやら、、。
とりあえず、送料なども含め、安くて良さそうなものを選んでおきます。
商品リンク（商品画像の下にある商品名の部分）の上で右クリックし、「リンクのアドレスをコピー」します。
HTMLの「楽天」の【商品のURL】という部分（下の画像の青色で選択された部分）をすっかり消して、今コピーした商品リンクのアドレスを貼り付けます。
3.「バリューコマース」で「Yahoo」の商品リンクを作成
バリューコマースのサイトにログインした後、「広告」→「提携状況」→「提携済み」の順でクリックしていきます。
下にスクロールしていき、「ヤフーショッピング 自動提携機能プロモーション」と書かれたところの「広告素材を選ぶ」をクリック。
（↑これの上の方に「Yahoo!ショッピング（ヤフーショッピング）、PayPayモール」と書かれたものもあるのですが、それでは無いようです。）
左側の広告タイプを「MyLink」にし、「再検索」をクリック。
下にスクロールしていき「MyLink」と書かれたところの「広告主のサイトを見る」をクリック。
検索窓に商品を入力し、検索するをクリック。
良い感じの商品を選んで、商品リンクの上で右クリックし、「リンクのアドレスをコピー」をクリックします。
バリューコマースの「MyLink」の画面に戻り、「コピーしたURLを貼り付ける」の部分に今コピーしたURLを貼り付けます。
「広告となるテキストを入力する」という部分に適当な文字を入れます。（このテキスト自体は残らないので、「あ」や「ん」でもなんでも良い。）
右下の「MyKinkコードを取得」をクリック。
「このMyLinkコードを選択」をクリックします。（もしくはコードの部分をクリック）
コードが選択されたら、右クリックしコピーします。
はてなブログ の「記事の管理」画面へ行き、「記事を書く」をクリック。
「HTML編集」画面で、コピーしたMyLinkコードを貼り付けます。
「編集見たまま」へ切り替えます。
テキストリンクに変換されているので、テキストの上で右クリックし、「リンクのアドレスをコピー」をクリック。
HTMLの「Yahoo」の【商品のURL】という部分（下の画像の青色で選択された部分）をすっかり消して、今コピーした商品リンクのアドレスを貼り付けます。
（テキストリンクを得るために作った記事（「あ」とだけ書かれた記事）は消して大丈夫です。）
これにて終～了☆
あとは、このHTMLを記事内の好きな場所に貼り付けるだけ。
これこのように～↓
じゃ～ん(*´▽｀*)♪
カスタマイズも色々できるそうなのですが、私はまだまだそこまでの余裕がありません。
( ;∀;)
余裕がある皆さんは是非やってみて下さい☆
参考記事
最後に参考にさせていただいた記事を下に紹介させていただきます。
ありがとうございました！
m(__)m
おわりに
慣れるまでは少し大変です。
自分が使いやすいように編集したHTMLを保存しておくと楽かなと思います。
私の場合は、【説明】の部分を消して、商品のボタンの数を３つにしたものを保存しています。
(*´ω｀)
また、私の場合、【メインのURL】はAmazonのものにしているので、
もしもアフィリエイトで、Amazonの商品リンクのアドレスをコピーした後、【メインのURL】２か所とAmazonの【商品URL】の合計３か所に一気に貼り付けています。
出来るだけ間違いのないように書いたつもりではありますが、もし「間違っているよ！」というところや、「これはダメだよ」というところがありましたらご指摘いただけると幸いです。
m(__)m
この記事がどなたかの参考になれば☆
それではまた、お時間のあるときに～！