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">
追記:カッテネのリンクをいい感じに生成できるWebツールを作った
上に貼ったHTMLをコピペして、というのをいちいちやるのが面倒になったので、上の手順を簡略化するためにWebツールを作った。
kattene-link-generator.shinshin86.com
使い方は、上のサイトにアクセスすると表示されるフォームに画像や商品URLを入力して、画面下にあるコピーボタンを押せば勝手にクリップボードに生成されたHTMLがコピーされる。
入力項目自体は上に書いたHTMLの内容と同じなので、たぶん分かると思う。
もし分かりづらかったらその旨をコメントやTwitterなどで教えていただければ、説明用のページを作成しようと思います。
このスイカジュースがとても美味しかった。
せっかくなので、下に試しにカッテネで作成したリンクを貼ってみます。
私が今回貼っているのはAmazonリンク一つだけです。
ちなみに何を貼るかというと、先日Instagram(ツイッターにも連携させた)で呟いた下記のスイカジュース。
妻が買ってきてくれたスイカ100%ジュースを飲む🍉🍉🍉美味すぎる!!スイカにストローぶっ刺してゴクゴク飲んでる、あの感じ!箱買いしたい!!📦 https://t.co/VnS7WsCEqr
— Yuki Shindo (@shinshin86) 2019年5月3日
このスイカジュース、めちゃめちゃ気に入ったので、下記の36本セット
を近々購入予定です。
キンキンに冷やして風呂上がりに飲むとめちゃめちゃ幸せな気持ちになれる。