at backyard

Color my life with the chaos of trouble.

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

目次

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

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

webfood.info

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

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

  1. はてなブログダッシュボードメニューから 設定 を選択
  2. 設定 メニューから 詳細設定 を選択
  3. 検索エンジンに最適化 という項目内にある 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">

追記:カッテネのリンクをいい感じに生成できるWebツールを作った

上に貼ったHTMLをコピペして、というのをいちいちやるのが面倒になったので、上の手順を簡略化するためにWebツールを作った。

kattene-link-generator.shinshin86.com

使い方は、上のサイトにアクセスすると表示されるフォームに画像や商品URLを入力して、画面下にあるコピーボタンを押せば勝手にクリップボードに生成されたHTMLがコピーされる。

入力項目自体は上に書いたHTMLの内容と同じなので、たぶん分かると思う。
もし分かりづらかったらその旨をコメントやTwitterなどで教えていただければ、説明用のページを作成しようと思います。

このスイカジュースがとても美味しかった。

せっかくなので、下に試しにカッテネで作成したリンクを貼ってみます。
私が今回貼っているのはAmazonリンク一つだけです。

ちなみに何を貼るかというと、先日Instagram(ツイッターにも連携させた)で呟いた下記のスイカジュース。

このスイカジュース、めちゃめちゃ気に入ったので、下記の36本セットを近々購入予定です。
キンキンに冷やして風呂上がりに飲むとめちゃめちゃ幸せな気持ちになれる。

HARUNA(ハルナ) CHABAA(チャバ) 100%ジュース ウォーターメロン(プリズマ容器) 180ml紙パック×36本入