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

「posted with カエレバ」と表示されるのが地味に嫌だったのとコードが作成できない時が多かったので。
カッテネの使用方法は2通り
カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ | 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で見た場合。
モバイルで見た場合。
実際はこんな感じ。バランスが良くない場合は、このように数値を変更したり項目を減らすときれいに収まります。
後書き
画像は自前か公式サイトからダウンロードしたものを使っています(※著作権に引っかからないもの)。カッテネの設定は面倒といえば面倒ですが、慣れれば10分程度でできるかと。宿に関しては項目が多いですが、ぶっちゃけ「楽天トラベルとYahoo!トラベル」だけでも良いかと思います。