ASPやショッピングサイトへのリンクをいい感じにできる、カッテネをはてなブログで使えるように設定してみた

目次
いい感じのリンクを表示できるカッテネ
カッテネをはてなブログから使う方法 (はてなブログでの設定方法)
追記：カッテネのリンクをいい感じに生成できるWebツールを作った
このスイカジュースがとても美味しかった。

いい感じのリンクを表示できるカッテネ

カエレバやヨメレバより使い方が簡単なカッテネというツールがあるらしい。
下記は作者の方の記事

前々から気になっていたので、このはてなブログでも使えるようにセットアップしてみた。

カッテネをはてなブログから使う方法 (はてなブログでの設定方法)

はてなブログのダッシュボードメニューから 設定 を選択
設定 メニューから 詳細設定 を選択
検索エンジンに最適化 という項目内にある headに要素を追加 に<style></style>を挿入し、その中にカッテネで使用するCSSをコピペで挿入する。 (カッテネのCSSはこちらで公開されている -> カッテネのCSSファイル)

あとは下記のようにHTMLを貼ればOK。
はてなブログの場合、自分は普段Markdownモードで編集しているけど、HTMLタグそのまま貼り付ければ、HTMLの内容はそのまま反映されるっぽいですね。
(一応プレビューで正常に表示されていることを確認してください)

<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>

上に貼ったHTMLに対して、下記のようにセットしていけば良い。
(詳しい使い方については、上に貼った作者の方が書かれているものが当然のごとく信憑性が高いのでそちらを参照してください。)

メインのURL => タイトルや画像をクリックすると開くURL
(ASPの中でも、特に開いてほしいURLをここに入れておくと良よさそう)
画像URL => 画像のURL
(おすすめはリンク切れが起きにくいAmazonの画像)
タイトル => 商品名
説明 => ここは基本自由だが、メーカーの名前とか発売日となどの情報を入れておくと良さそうとのこと
商品のURL => ASPなどのアフィリエイトリンクを貼り付ける。
HTML内の、「Amazon」とか「楽天ブックス」とか書いている部分はボタンのラベルなので、好きなものに変えてOKとのこと。
拡張性が高くてありがたい！
ボタンの色 => aタグのクラスにorangeやblueとあるが、こちらを変えることで色を変えることができる。現状は__orange、__blue、__red、__green、__pinkの5色のみとのこと。
ボタンの数 => 上記HTML内に<div class="kattene__btns __five">とあるが、ここの__fiveの数を貼ったリンクの数に応じて変える作業が必要となる。
(例えばリンクの数が一つなら、<div class="kattene__btns __one">となる。)
- まとめると...
- ボタンが1つなら<div class="kattene__btns __one">
- 2つなら<div class="kattene__btns __two">
- 3つなら<div class="kattene__btns __three">
- 4つなら<div class="kattene__btns __four">
- 5つなら<div class="kattene__btns __five">