アフィリエイト

カッテネの使い方を解説!【wordpress】css設定がおすすめ

『カッテネ』を導入すると、

カエレバやヨメレバ、Rinkerのように
一つの商品に対して、複数のASPやショッピングサイトのリンクを貼ることができます。

↓パソコンだとこんな感じで表示されて

PCで見たカッテネ

↓スマホだとこんな感じ

スマホで見たカッテネ

ボタンの数は最大5つで、1~4つに減らすこともできますし、ボタンのラベルも好きなものに変えることもできます。

各ASPから、紹介したい商品のアフィリエイトリンクを取得して

HTMLタグを作成→記事内に貼り付けるという流れで作成するので

『Amazonのリンクをメイン』に
商品リンクを作成する事もできますよ^^

カエレバ・ヨメレバ・Rinkerの使用に慣れている方は

「商品リンクを作成する度に、いちいちASPにログインして、アフィリエイトリンクを取得しなければいけない」ことが、面倒くさく感じてしまうかもしれませんが、

その面倒くささがあるからこそ『カッテネ』は、AmazonのPA-APIの関係に影響されることなく、自由に商品リンクを作成することができるので、是非導入して使ってみてください。

では、カッテネの使い方について詳しく解説していきます!

カッテネの使い方【wordpress】

プラグインよりも『css設定』がおすすめ

カッテネの導入方法は

  • プラグインを導入する
  • css設定を行う

この2種類があります。

プラグインは、使用するwordpressテーマによっては、デザインの不具合が起こる場合があったり、

頻繁にアップデートされていないプラグインを導入してしまうと、脆弱性を突かれて、サイバー攻撃を受けてしまう危険性もあるので

css設定できるものについては、プラグインを使用しない事を強くおすすめします。

css設定でカッテネを導入する方法

CSS(スタイルシート)は、デザインやレイアウトなどの「見た目」を設定するために必要なものです。

CSSのファイル内に、必要なソースコードを入力することで、カッテネの商品リンク(デザイン)を導入する事ができます。

「えー…なんか難しそう」と思うかもしれませんが、大丈夫!

コピペでOKなので、2~3分で設定完了できますよ^^

↓手順はこれだけです。

  1. こちらの【CSSファイル】の内容を全てコピーする
  2. 『追加CSS』に貼り付けて公開する

追加CSSは、ワードプレス管理画面の

『外観→カスタマイズ→追加CSS』から設定することができます。

↓追加CSSの画面は、こんな感じ。

カッテネを追加CSSに記述

この追加CSSの欄に、こちらの【CSSファイル】の内容をコピペで貼り付けて、公開ボタンを押せばOK!

とっても簡単なので、2~3分で設定完了できちゃいますよ^^

HTMLで『商品リンク』を作成する方法

css設定で、カッテネのデザイン設定を終えたら

あとはHTMLで『商品リンク』を作成するだけ。

↓カッテネで商品リンクを作成すると、PCではこんな表示になります。

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の関係に影響されることなく、自由に商品リンクを作成することができるので

是非カッテネを導入して、使ってみてください。

慣れると、意外と使いやすくて、サクサク商品リンクが作成できますよ^^

◆↓この記事を書いた人

↓私が実践している【ブログの構築方法】

↑継続的に大きく稼げる方法をチェックする

私の『ネットビジネス実践記』はこちら^^

関連記事