カッテネをプチカスタマイズしてカエレバ/トマレバ風に使用

現在ではカエレバ・トマレバは使わず「カッテネ」で商品を紹介しています（古い記事は修正中）

「posted with カエレバ」と表示されるのが地味に嫌だったのとコードが作成できない時が多かったので。

カッテネの使用方法は２通り
当サイトではCSSで表示
CSSコード
HTMLテンプレート
ホテルの紹介
後書き

カッテネの使用方法は２通り

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ | WebFood

プラグイン
CSS＋HTML

当サイトではCSSで表示

プラグインはできる限り増やしたくないのでCSS＋HTMLで使っています。

PCで見た場合。

モバイルで見た場合。

シンプルで見やすい

CSSコード

作成者さんのサイトに書かれてあった CSS では私の環境ではなぜかバナーが反映されませんでしたので、同じ人か分かりませんが、https://ryotaryota.com/page-75（リンク切れ）に記載されているCSSを使っています。

◆コードはこちらから（それなりに修正しています）

詳しくは作成者さんのサイトでご確認ください。

CSSを貼る場所

WordPressの場合は「ダッシュボード→外観→テーマエディタ→子テーマのスタイルシート (style.css)」、AMP対応にしている場合は「AMPの style.css」にも貼ります。

HTMLテンプレート

自分が使いやすいようにHTMLのテンプレートを作成しておくと便利です。記事の中の表示させたい場所にHTMLを貼り付けます。当サイトでは、商品を紹介する際に「楽天、Amazon、Yahoo!」くらいしか使いませんのでこんな感じ。説明文は省きました。

<div class="kattene">
<div class="kattene__imgpart">
<a href="【メインのURL】" rel="sponsored"><img src="【画像URL】" alt="" width="300" height="300" /></a></div>
<div class="kattene__infopart">
<div class="kattene__title"><a href="【メインのURL】" rel="sponsored">【タイトル】</a></div>
<div class="kattene__btns __one">
<div><a class="btn __red" href="【楽天のURL】" rel="sponsored">楽天で見る</a></div>
<div><a class="btn __orange" href="【AmazonのURL】" rel="sponsored">Amazonで見る</a></div>
<div><a class="btn __blue" href="【Yahoo!のURL】" rel="sponsored">Yahoo!で見る</a></div>
</div>
</div>
</div>

表示させる項目の数によって<div class=”kattene__btns __one”>の「one」の部分を直します。尚、[target=”_blank”] は削除して [rel=”sponsored”] を付けています。[rel=”sponsored”] は広告などの有料リンクに推奨されています。

ホテルの紹介

CSS

項目が多いので、CSSにpinkとbrownを追加しました。ピンクはサイトに記載のコードなので問題ありませんが、茶色は適当に設定したので必要であれば直してください。

/*ピンク追加*/
.btn.__pink {
background-color: #e1325b;
-webkit-box-shadow: 0 5px 0 #b42849;
-moz-box-shadow: 0 5px 0 #b42849;
box-shadow: 0 5px 0 #b42849;
-o-box-shadow: 0 5px 0 #b42849;
-ms-box-shadow: 0 5px 0 #b42849;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }

.btn.__pink:hover {
background-color: #b42849; }

.btn.__pink i {
font-weight: bold; }

.btn.__pink i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }

/*茶色追加*/
.btn.__brown {
background-color: #6f4b3e;
-webkit-box-shadow: 0 5px 0 #6c272d;
-moz-box-shadow: 0 5px 0 #6c272d;
box-shadow: 0 5px 0 #6c272d;
-o-box-shadow: 0 5px 0 #6c272d;
-ms-box-shadow: 0 5px 0 #6c272d;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }

.btn.__brown:hover {
background-color: #b42849; }

.btn.__brown i {
font-weight: bold; }

.btn.__brown i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }

HTML

レイアウトはトマレバをパクリ。

<div class="kattene">
<div class="kattene__imgpart">
<a href="【メインのURL】" rel="sponsored"><img src="【画像URL】" alt="" width="300" height="300" /></a></div>
<div class="kattene__infopart">
<div class="kattene__title"><a href="【メインのURL】" rel="sponsored">【タイトル】</a></div>
<div class="kattene__description">【住所】<a href="【地図のURL】" rel="sponsored">[地図]</a></div>
<div class="kattene__btns __three">
<div><a class="btn __red" href="【楽天トラベルのURL】" rel="sponsored">楽天トラベル</a></div>
<div><a class="btn __blue" href="【Yahoo!トラベルのURL】" rel="sponsored">Yahoo!</a></div>
<div><a class="btn __orange" href="【じゃらんのURL】" rel="sponsored">じゃらん</a></div>
<div><a class="btn __green" href="【るるぶのURL】" rel="sponsored">るるぶ</a></div>
<div><a class="btn __pink" href="【一休のURL】" rel="sponsored">一休</a></div>
<div><a class="btn __brown" href="【JTBのURL】" rel="sponsored">JTB</a></div>
</div>
</div>
</div>

PCで見た場合。