カッテネの使い方を解説！【wordpress】css設定がおすすめ｜Yukioka❆『個人で稼ぐスキル』を身につけろ！

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

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

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

↓スマホだとこんな感じ

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

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

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

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

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

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

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

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

Contents

カッテネの使い方【wordpress】

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

css設定でカッテネを導入する方法
HTMLで『商品リンク』を作成する方法
カッテネの使い方【wordpress】まとめ

カッテネの使い方【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>