前回の記事でカエレバの仕様変更で｢カッテネリンク｣に乗り換えたお話をしました。
www.life-is-rpg.com
上記のカッテネリンクコード紹介では、簡単に使い方を説明しましたが、カスタマイズ初心者にとっては分からない部分もあるかと思いましたので、今回の記事で、より詳しく画像を使って解説していきたいと思います。
カッテネリンク製作者様
今回、使い方を解説するカッテネリンクは『Web Food』様の製作したものです。
webfood.info
とても素晴らしいカスタマイズを紹介して頂きありがとうございます。
また、この記事の投稿時では、コード製作者のリンクを貼り忘れておりました。
大変申し訳ありませんでした。
はてなブログ以外でも使うことができ、ワードプレスで取り入れたいという方は、『Web Food』様の記事で詳しく解説されていますのでご参考にしてください。
※ご都合が悪ければ対応いたしますので、お手数ですが連絡お願いします。
カッテネリンクのHTML
CSSコードはコピペして貼り付けるだけで大丈夫ですので、ここでは省略します。
CSSコードのコピペがまだの方は冒頭に貼っている前回の記事で取得してくださいね。
HTMLコードは以下になります。
<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 __red" target="_blank" href="【商品のURL】">楽天</a></div> <div><a class="btn __blue" target="_blank" href="【商品のURL】">Yahoo!</a></div> <div><a class="btn __green" target="_blank" href="【商品のURL】">楽天Kobo</a></div> </div> </div> </div>
このコードを貼る場所は、｢記事内｣になります。
記事作成時に商品リンクを貼りたい場所にコピペしてください。
HTMLコードの記述方法
では本題のコードの詳しい記述方法の解説に入ります。
アフィリエイトリンクは今回、私が利用している「もしもアフィリエイト」から取得する方法を紹介します。
もしもアフィリエイト経由ならAmazon・楽天・Yahoo!などの別々の案件アフィリエイトを一括管理でき、振り込み金額も1000円からと低いのでお勧めです。
Amazonや楽天本家と提携しアフィリエイトを行っている方はこの機会に「もしもアフィリエイト」に乗り換えてはいかがでしょう？
【メインのURL】
コード内に２か所あります。
商品名や画像をクリックした際に開くページになります。
クリックされる確率が高くなるので、自分が力を入れたいアフィリエイトリンクを記述してください。
各アフィリエイトリンクの取得方法は後述詳しく解説しています。
【タイトル】
商品の名前を記述してください。
商品名は省略せず、正式なフルネームで表記してあげると読者にとっても助かります。
【画像URL】
《①》まず、もしもアフィリエイトのページを開き、提携しているプロモーションからAmazonをみつけ、『商品リンク』という項目をクリックします。
《②》次のページで商品を検索します。
《③》目的の商品の「商品リンクを作る」ボタンを押します。
《④》【種別】を「画像」にし、【画像サイズ】を「中（160px×160px以内）」に設定します。
《⑤》商品の画像の上で右クリックをし、「画像アドレスをコピー（Windowsの場合）」を選択します。
《⑥》コピーした画像アドレスがコード内でいう【画像URL】にあたるので、ペーストします。
【説明】
自由テキストなので、メーカーや著者、出版社や出版年月日などの情報を記述すればいいです。
【商品のURL（Amazon）】
《①》もしもアフィリエイトのページを開き、提携しているプロモーションからAmazonをみつけ、『商品リンク』という項目をクリックします。
《②》次のページで商品を検索します。
《③》目的の商品の「商品リンクを作る」ボタンを押します。
《④》【種別】項目の「文字」にチェックを入れます。
《⑤》【ソース】項目に表示されたアフィリエイトコードの中から必要な部分だけを抜き取り（コピー）します。
最初に知っておいた方が良い知識は、コードの中には『a_id=●●●●●●』という６桁の数字が記述されていると思います。
この数字があなたの専用コードです。このコードによって誰のリンクから移行してきて成果が発生したかを判断しています。
なのでこのコードは間違っても自分以外の人に教えないように気を付けてください。違反サイトなどで使われてアカウント停止とかになる可能性があるので、アフィリエイトコードを公開する場合きちんとモザイクをかけましょう。
今回のカスタマイズの「商品のURL」で使うアフィリエイトコードは【ソース】項目のコード全てを使わず省略します。自分の専用コードが入っていれば成果は反映されるので、
コード冒頭の「＜a target="_blank" href="」以降の
『//af.moshimo.com/af/c/click?～・・・～rel="nofollow』
までがコピー範囲です。
《⑥》Amazonの【商品のURL】に貼り付けてください。
【商品のURL（楽天）】
楽天のアフィリエイトリンクも上記のAmazonアフィリエイトリンク取得方法《①》～《⑤》と同じ作業になります。
《⑥》楽天の【商品のURL】に貼り付けてください。
【商品のURL（Yahoo!）】
Yahoo!アフィリエイトリンクは、上記のAmazon・楽天と違いもしもアフィリエイト内に「商品リンク」項目がありません。
なので少しコード取得方法が変わります。
《①》提携プロモーションから「Yahoo!」を見つけ、『どこでもリンク』を選択します。
《②》Yahoo!ショッピングモール（別タブ）で、紹介したい商品ページを開きます。そのページのURLをコピーします。
《③》もしもアフィリエイトのタグに戻り、【リンク先URL】項目に貼り付けてください。
《④》【リンク種別】項目はそのまま（テキストリンク）、【リンクテキスト】項目も必要ないので「あああああ」みたいな感じでテキトーで大丈夫です。
入力できたら、下にある「どこでもリンクを作成する」ボタンをクリックしてください。
《⑤》【ソース】項目にコードが生成されました。このアフィリエイトリンクコード内から必要なコードだけを抜き取り（コピー）します。
コピーする範囲は１行目の途中からテキスト手前の
『//af.moshimo.com/af/c/click?～・・・～ rel="nofollow』
までを選択・コピーします。
《⑥》Yahoo!の【商品のURL】に貼り付けてください。
以上、
３大ショッピングモールのアフィリエイトリンク取得方法を紹介しました。
上記以外のアフィリエイトリンクも、同じ方法で取得できます。
リンクボタン数の調整方法
カッテネカスタマイズではHTMLコードを削除したり追加したりすることで、リンクボタンの数を１つから４つまで調整できます。
上記のHTMLコードでは、４つのショップリンクボタンが表示されます。
しかし、紹介したい商品によっては「4つもリンクボタンがいらない！」という場合もあるでしょう。
そこで、ショップリンクボタンが3つ・2つ・1つの場合のコードも載せておきます。
■ショップボタンが３つのコード■
<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 __three"> <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> <div><a class="btn __red" target="_blank" href="【商品のURL】">楽天</a></div> <div><a class="btn __blue" target="_blank" href="【商品のURL】">Yahoo!</a></div> </div> </div> </div>
■ショップボタンが２つのコード■
<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 __two"> <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> <div><a class="btn __red" target="_blank" href="【商品のURL】">楽天</a></div> </div> </div> </div>
■ショップボタンが１つのコード■
<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 __one"> <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> </div> </div> </div>
作業ポイントは
①シンプルに不要なショップボタンのコードを削除する。
②コード６行目の
<div class="kattene__btns __four">
の最後の単語を
・４つのボタンの場合→「__four」
・３つのボタンの場合→「__three」
・２つのボタンの場合→「__two」
・１つのボタンの場合→「__one」
と変更することです。
カッテネリンク解説 まとめ
カスタマイズ初心者にとっては、カッテネのような手動で記述する作業は大変かもしれません。
ですが何度もこの作業を繰り返していくうちに、コードの意味だったり組み合わせなどが理解できるようになり、今後のブログライフを豊かにします。
カッテネは自由度が高くアイディア次第で活用範囲が一気に広がります。
近々、応用した使い方なんかも紹介していこうと思います。
