『カッテネ』を導入すると、
カエレバやヨメレバ、Rinkerのように
一つの商品に対して、複数のASPやショッピングサイトのリンクを貼ることができます。
↓パソコンだとこんな感じで表示されて
↓スマホだとこんな感じ
ボタンの数は最大５つで、１~４つに減らすこともできますし、ボタンのラベルも好きなものに変えることもできます。
各ASPから、紹介したい商品のアフィリエイトリンクを取得して
HTMLタグを作成→記事内に貼り付けるという流れで作成するので
『Amazonのリンクをメイン』に
商品リンクを作成する事もできますよ^^
カエレバ・ヨメレバ・Rinkerの使用に慣れている方は
「商品リンクを作成する度に、いちいちASPにログインして、アフィリエイトリンクを取得しなければいけない」ことが、面倒くさく感じてしまうかもしれませんが、
その面倒くささがあるからこそ『カッテネ』は、AmazonのPA-APIの関係に影響されることなく、自由に商品リンクを作成することができるので、是非導入して使ってみてください。
では、カッテネの使い方について詳しく解説していきます！
カッテネの使い方【wordpress】
プラグインよりも『css設定』がおすすめ
カッテネの導入方法は
- プラグインを導入する
- css設定を行う
この２種類があります。
プラグインは、使用する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がおすすめ）
- 【タイトル】商品名を入れる
- 【説明】自由（書籍なら著者・出版社など、モノならメーカー名・発売日など）
- 【商品のＵＲＬ】各ASPのアフィリエイトタグを貼り付ける
- 【ボタンの色】５色（orange・blue・red・green・pink）
- 【ボタンの数】最大５つ。１~４に減らすこともできる（その場合は、不要なボタンの部分を削除する）
＜HTMLタグについての注意点＞
『target=”_blank”』は、セキュリティ的に問題があると言われています。
その対応として、カッテネのデフォルトでは『rel=”noopener”』を付与した状態になっていますが、
もしあなたが「外部リンクを新しいタブで開く必要はない」と考えている場合は、
『target=”_blank” rel=”noopener”』を削除してご使用ください。
ちなみに私も、削除して使用しています(￣ー￣)ﾆﾔﾘ
＜ボタンの数を変える場合の注意点＞
ボタンの数を変えた場合は、HTML６行目の修正を必ず行って下さい。
<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の関係に影響されることなく、自由に商品リンクを作成することができるので
是非カッテネを導入して、使ってみてください。
慣れると、意外と使いやすくて、サクサク商品リンクが作成できますよ。