『カッテネ』を導入すると、
カエレバやヨメレバ、Rinkerのように
一つの商品に対して、複数のASPやショッピングサイトのリンクを貼ることができます。
↓パソコンだとこんな感じで表示されて

↓スマホだとこんな感じ

ボタンの数は最大5つで、1~4つに減らすこともできますし、ボタンのラベルも好きなものに変えることもできます。
各ASPから、紹介したい商品のアフィリエイトリンクを取得して
HTMLタグを作成→記事内に貼り付けるという流れで作成するので
『Amazonのリンクをメイン』に
商品リンクを作成する事もできますよ^^
カエレバ・ヨメレバ・Rinkerの使用に慣れている方は
「商品リンクを作成する度に、いちいちASPにログインして、アフィリエイトリンクを取得しなければいけない」ことが、面倒くさく感じてしまうかもしれませんが、
その面倒くささがあるからこそ『カッテネ』は、AmazonのPA-APIの関係に影響されることなく、自由に商品リンクを作成することができるので、是非導入して使ってみてください。
では、カッテネの使い方について詳しく解説していきます!
カッテネの使い方【wordpress】
プラグインよりも『css設定』がおすすめ
カッテネの導入方法は
- プラグインを導入する
- css設定を行う
この2種類があります。
プラグインは、使用するwordpressテーマによっては、デザインの不具合が起こる場合があったり、
頻繁にアップデートされていないプラグインを導入してしまうと、脆弱性を突かれて、サイバー攻撃を受けてしまう危険性もあるので
css設定できるものについては、プラグインを使用しない事を強くおすすめします。
css設定でカッテネを導入する方法
CSS(スタイルシート)は、デザインやレイアウトなどの「見た目」を設定するために必要なものです。
CSSのファイル内に、必要なソースコードを入力することで、カッテネの商品リンク(デザイン)を導入する事ができます。
「えー…なんか難しそう」と思うかもしれませんが、大丈夫!
コピペでOKなので、2~3分で設定完了できますよ^^
↓手順はこれだけです。
- こちらの【CSSファイル】の内容を全てコピーする
- 『追加CSS』に貼り付けて公開する
追加CSSは、ワードプレス管理画面の
『外観→カスタマイズ→追加CSS』から設定することができます。
↓追加CSSの画面は、こんな感じ。

この追加CSSの欄に、こちらの【CSSファイル】の内容をコピペで貼り付けて、公開ボタンを押せばOK!
とっても簡単なので、2~3分で設定完了できちゃいますよ^^
HTMLで『商品リンク』を作成する方法
css設定で、カッテネのデザイン設定を終えたら
あとはHTMLで『商品リンク』を作成するだけ。
↓カッテネで商品リンクを作成すると、PCではこんな表示になります。

↓スマホだと、こんな感じで表示されます。

↓使用する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>
<HTMLタグに記述する内容>
- 【メインのURL】特に開いてほしいURLを入れる(タイトルや画像をクリックすると開くURL)
- 【画像URL】商品画像のURLを入れる(リンク切れが起きにくいAmazonがおすすめ)
- 【タイトル】商品名を入れる
- 【説明】自由(書籍なら著者・出版社など、モノならメーカー名・発売日など)
- 【商品のURL】各ASPのアフィリエイトタグを貼り付ける
- 【ボタンの色】5色(orange・blue・red・green・pink)
- 【ボタンの数】最大5つ。1~4に減らすこともできる(その場合は、不要なボタンの部分を削除する)
<HTMLタグについての注意点>
『target=”_blank”』は、セキュリティ的に問題があると言われています。
その対応として、カッテネのデフォルトでは『rel=”noopener”』を付与した状態になっていますが、
もしあなたが「外部リンクを新しいタブで開く必要はない」と考えている場合は、
『target=”_blank” rel=”noopener”』を削除してご使用ください。
ちなみに私も、削除して使用しています( ̄ー ̄)ニヤリ
<ボタンの数を変える場合の注意点>
ボタンの数を変えた場合は、HTML6行目の修正を必ず行って下さい。
<div class="kattene__btns __five">
この部分の__fiveというのを、数に応じて変える必要があります。
ボタンが1つなら__one、2つなら__two、3つなら__three、4つなら__four、5つなら__fiveと記述してください。
これで、HTMLの作成は完了です!
このタグをコピーして、記事内の好きな部分に貼り付けて下さいね。
<最後の注意点>
タグを貼り付ける時は『カスタムHTML』を利用してください。

URLにミスがないか、実際にクリックして確認して問題なければ『カッテネの商品リンク』作成完了です^^
カッテネの使い方【wordpress】まとめ
- カッテネを導入する際は、プラグインよりも『css設定』がおすすめ
- cssの設定はコピペでOK!2~3分で完了する
- カッテネの導入が完了したら、HTMLで『商品リンク』を作成する
- 最後に、作成したタグを記事内に貼り付ければ完了!
カッテネは、各ASPから、紹介したい商品のアフィリエイトリンクを取得して
HTMLタグを作成→貼り付けるだけで、
簡単に商品リンクを作成することができます^^
カエレバ・ヨメレバ・Rinkerの使用に慣れている方は
「商品リンクを作成する度に、いちいちASPにログインして、アフィリエイトリンクを取得しなければいけない」ことが、面倒くさく感じてしまうかもしれませんが、
その面倒くささがあるからこそ『カッテネ』は、AmazonのPA-APIの関係に影響されることなく、自由に商品リンクを作成することができるので
是非カッテネを導入して、使ってみてください。
慣れると、意外と使いやすくて、サクサク商品リンクが作成できますよ^^