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

以前はカエレバを使わせていただいていたのですが、最近カッテネを使い始めました。

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

スポンサーリンク

 

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

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

 

当サイトではCSSで表示

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

 

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

 

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

シンプルで見やすい

 

コード

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

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

同じ人か分かりませんが、こちらのサイトに記載されているCSSを利用すると良いと思います。

 

CSSを貼る場所

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

 

HTMLを貼り付け

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

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

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

<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>

 

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

項目が多いので、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 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>

 

PCで見た場合。

 

モバイルで見た場合。上部が切れていますが、本当はちゃんと表示されています。

 

実際はこんな感じです。PCから見ると右端にスペースがありますが、スマホからだときれいに収まっていますので、取りあえずこれで。

 

スポンサーリンク

 

IEでレイアウト崩れ

Chrome、Microsoft Edge、AMPでは問題なかったのですが、

Internet Explorerで確認したところ、レイアウトが思いっきり崩れていました。

画像に押され、楽天やAmazonが見えない状態に。この現象はプラグインでも同様です。

横着なわたくしは、画像URLをそのままコピペしていました

サイトには「画像の大きさは中で」と記載されています

 

画像は、Amazonアソシエイトツールバーから「画像(中)」で表示させた画像URLを貼り付けるのが1番簡単です。

 

しかし、表示されたJPEG画像を縮小すると画像がぼやけることが多いので、この作業を毎回行うことにしました。面倒ですがきれいに表示されます。

  1. Amazonで画像を表示させる
  2. スクリーンショット
  3. ペイントに貼り付けてPNGで保存
  4. 画像編集ソフトで幅300にリサイズ(→必要であれば圧縮)
  5. 画像アップロード
  6. 画像URLを指定の場所に貼り付ける

 

これで画像はぼやけませんが、なぜかバナーが上の方に。

 

マウスでカーソルを当てるとバナーは指定の位置に戻ります。

IEの気持ちは分かりませんので、これで良しとしましょう

 

後書き

特に、宿の紹介でカッテネを使うのは大変でした。作業に慣れても10分はかかるかと。

カエレバ開発者のかん吉さんはやっぱり凄いわあ

時にはトマレバと併用していこうと思います。

タイトルとURLをコピーしました