【はてなブログ専用】カッテネの使い方を１から分かりやすく解説！

＂カッテネ＂の使い方がいまいちよくわからな～い＂という方のために、はてなブログでの使い方を１から解説していきます

はてなブロガー。矢沢ゆめです

(@yume_ism)

Amazonや楽天商品の紹介にはカエレバを使っている方も多くいて大変便利なツールですが、少し扱いにくい部分があります

Amazonのみで扱っている商品紹介ができない
楽天の画像がダサイ

などなど

カエレバは楽天ベースで商品リンクを作成するので、Amazonの商品を紹介するには不便な場合があります

そんな時は＂カッテネ＂を使えば即解決

カッテネはAmazonでの商品を紹介できるだけでなく、自由にカスタムすることができます

例えば

ASP商品とAmazon商品を一緒に表示させたい
AmazonリンクとKindleを一緒に紹介したい（本）
Amazonの画像をベースに楽天、ヤフーのリンクを作りたい

なんでも、自由にリンクを作成することができます

わたしの場合、カエレバとカッテネを両方使ってブログを作成していますが、主にAmazonにしか商品がない場合にカッテネを使っています

最初慣れないと難しいなと思いましたが、慣れてしまえば１～２分でリンクを作成することができますよ

慣れるとすっごく便利

カッテネの使い方がいまいち分からないという方のために、作成者のたいタンさんのサイトWeb Foodを参考にご紹介していきます

カッテネの設定方法を説明

設定方法は２種類あるのでお好きな方法で！

１．デザインCSSにコードを追加

カッテネの設定方法を説明、デザインCSSにコードを追加

はてなブログの画面を開き▶デザイン▶スパナマーク▶デザインＣＳＳ

デザインＣＳＳに▼のコードを丸ごと貼り付けてください

＞＞カッテネCSSファイル

２．headに要素を追加

カッテネの設定方法を説明、headに要素を追加

はてなブログを開き▶設定▶詳細設定▶headに要素を追加

headに要素を貼りつける場合は▼のコードを

<style>

＞＞カッテネCSSファイル

</style>

カッテネＣＳＳを<style>～～～～～</style>ではさんでください

どちらか片方設定すればＯＫだよ～

カッテネでリンクを作成する使い方

ここまでは簡単に設定できたと思います

で、ここからが本題

細かく解説していきますの手順通りに行ってもらえれば幸いです

１．カッテネのコードをメモにコピーしよう

まず、カッテネ公式ページWeb Foodに記載されてるコードをメモか何かにコピーしましょう

<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 __five">
        <div><a class="kattene__btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div>
        <div><a class="kattene__btn __blue" target="_blank" href="【商品のURL】">Kindle</a></div>
        <div><a class="kattene__btn __red" target="_blank" href="【商品のURL】">楽天</a></div>
        <div><a class="kattene__btn __green" target="_blank" href="【商品のURL】">楽天Kobo</a></div>
        <div><a class="kattene__btn __pink" target="_blank" href="【商品のURL】">audiobook</a></div>
      </div>
    </div>
</div>