カッテネをプチカスタマイズしてトマレバ風に使用＆IE時の表示崩れ

最近カッテネを使い始めました。

「posted with カエレバ」と表示されるのが時々地味に嫌でした

カッテネの使用方法は２通り
当サイトではCSSで表示
コード
CSSを貼る場所
HTMLを貼り付け
宿、ホテルの紹介アレンジ
IEでレイアウト崩れ
後書き

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

プラグイン
CSS＋HTML

カエレバやヨメレバは、１商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。ですが、評判の割に、実際に使ってみると結構難しい。なので、もっと簡単に使えるカッテネというものを作りました。

当サイトではCSSで表示

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

PC(Chrome、Microsoft Edge)で見た場合。

モバイルで見た場合(AMP含む)。

シンプルで見やすい

コード

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

ただし、サイトに書かれてあったCSSではバナーが反映されませんでした。

同じ人か分かりませんが、https://ryotaryota.com/page-75(リンク切れ？)に記載されているCSSを利用すると良いと思います。

CSSを貼る場所

WordPressの場合は、ダッシュボード→外観→テーマエディタ→子テーマのスタイルシート (style.css)になります。

HTMLを貼り付け

表示させたい箇所にHTMLを貼り付けます。

自分が使いやすいように、HTMLテンプレートを作成しておくと便利です。

当サイトでは、商品を紹介する際に「楽天、Amazon、Yahoo!、Wowma!」くらいしか使いませんのでこんな感じ。説明文は省きました。

1. リンクが別ウィンドウで開きます[target=”_blank”]

<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__btns __four">
<div><a class="btn __red" target="_blank" href="【楽天のURL】">楽天</a></div>
<div><a class="btn __orange" target="_blank" href="【AmazonのURL】">Amazon</a></div>
<div><a class="btn __blue" target="_blank" href="【Yahoo!のURL】">Yahoo!</a></div>
<div><a class="btn __green" target="_blank" href="【Wowma!のURL】">Wowma!</a></div>
</div>
</div>
</div>

2.　[target=”_blank”]を抜いて[rel=”nofollow”]を付けたもの。こちらの方がSEO的に有利で脆弱性の心配はありません。

<div class="kattene">
<div class="kattene__imgpart">
<a href="【メインのURL】" rel="nofollow"><img src="【画像URL】"></a></div>
<div class="kattene__infopart">
<div class="kattene__title"><a href="【メインのURL】" rel="nofollow">【タイトル】</a></div>
<div class="kattene__btns __four">
<div><a class="btn __red" href="【楽天のURL】" rel="nofollow">楽天</a></div>
<div><a class="btn __orange" href="【AmazonのURL】" rel="nofollow">Amazon</a></div>
<div><a class="btn __blue" href="【Yahoo!のURL】" rel="nofollow">Yahoo!</a></div>
<div><a class="btn __green" href="【Wowma!のURL】" rel="nofollow">Wowma!</a></div>
</div>
</div>
</div>

宿、ホテルの紹介アレンジ

項目が多いので、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。レイアウトはトマレバをパクリ。

1. リンクが別ウィンドウで開きます[target=”_blank”]

<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">【住所】<a href="【GoogleマップのURL】" target="_blank" >[地図]</a></div>
<div class="kattene__btns __four">
<div><a class="btn __red" target="_blank" href="【楽天トラベルのURL】">楽天トラベル</a></div>
<div><a class="btn __blue" target="_blank" href="【Yahoo!トラベルのURL】">Yahoo!</a></div>
<div><a class="btn __orange" target="_blank" href="【じゃらんのURL】">じゃらん</a></div>
<div><a class="btn __green" target="_blank" href="【るるぶのURL】">るるぶ</a></div>
<div><a class="btn __pink" target="_blank" href="【一休のURL】">一休</a></div>
<div><a class="btn __brown" target="_blank" href="【JTBのURL】">JTB</a></div>
</div>
</div>
</div>

2.[target=”_blank”]を抜いて[rel=”nofollow”]を付けたもの。こちらの方がSEO的に有利で脆弱性の心配はありません。

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

PCで見た場合。