カエレバのCSSカスタマイズ

2014-10-06

今回はカエレバのカスタマイズを行いました。カエレバといえば、商品のアフィリエイトリンクを横断的に貼ることが出来るツールとしてかなり有名ですよね。ガジェニューでも使わせてもらっていたのですが、今回はこちらをカスタマイズしていきたいと思います。

カスタマイズしようと思った理由は、通常のコード出力だとデザインの設定まで乗ったリンクが生成されるのでエントリーを書いている時にエディタがごちゃごちゃしてしまう。なので今回はCSSを別途用意することによってコードは汚さずに見た目をカスタマイズしました。

カエレバの見た目カスタマイズの方法

まず、自分が使っていたフォーマットはこちらです。

▼変更前aa「amazlet風(改)-1」というテンプレを使っていました。

出力されるコードはなかなか複雑です。 まぁ、デザインに関しての記載もあるのでしょうがないですが。。

<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
  <div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;">
  <a href="%%afiLink%%" rel="nofollow" target="_blank"><img src="%%imageUrl%%" style="border: none;" /></a>
  </div>
  <div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
    <div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%">
    <a href="%%afiLink%%" rel="nofollow" target="_blank">%%title%%</a>
      <div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">繧ｫ繧ｨ繝ｬ繝</a></div>
    </div>
    <div class="kaerebalink-kakaku" style="color:#990000;font-weight:bold">%%motone%%%%kakaku%%</div>
    <a href="%%cart%%"><div class="kaerebalink-cart" style="margin:10px 0;background:url('http://img.yomereba.com/cart_button_m.gif');width:100px;height:25px"></div></a>
    <div class="kaerebalink-detail" style="margin-bottom:5px;">%%auther%% %%label%% %%releaseDate%%
    </div>
    <div class="kaerebalink-link1" style="margin-top:10px;%%toumeido%%">
      <div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%amazonLink%%</div>
      <div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%rakutenLink%%</div>
      <div class="shoplinkyahoo" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%yahooLink%%</div>
      <div class="shoplinkyahooAuc" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%yahooAucLink%%</div>
      <div class="shoplinkseven" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%sevenLink%%</div>
      <div class="shoplinkbellemaison" style="display:inline;margin-right:5px;background: url('%%iconFile2%%') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%bellemaisonLink%%</div>
      <div class="shoplinkcecile" style="display:inline;margin-right:5px;background: url('%%iconFile2%%') 0 0px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%cecileLink%%</div>
      <div class="shoplinkkakakucom" style="display:inline;margin-right:5px;background: url('%%iconFile2%%') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">%%kakakucomLink%%</div>
    </div>
  </div>
  <div class="booklink-footer" style="clear: left">
  </div>
</div>

今回はこちらを「amazlet風-2(cssカスタマイズ用)」に変更しています。CSSカスタマイズようですのでクラスのみ出力される設定になっていますので別途CSSにて表示を変更してやる必要があります。

出力されるコードはこんな感じです。

<div class="kaerebalink-box">
  <div class="kaerebalink-image">
  <a href="%%afiLink%%" rel="nofollow" target="_blank"><img src="%%imageUrl%%" style="border: none;" /></a>
  </div>
  <div class="kaerebalink-info">
    <div class="kaerebalink-name">
    <a href="%%afiLink%%" rel="nofollow" target="_blank">%%title%%</a>
      <div class="kaerebalink-powered-date">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">繧ｫ繧ｨ繝ｬ繝</a></div>
    </div>
    <div class="kaerebalink-kakaku">%%motone%%%%kakaku%%</div>
    <a href="%%cart%%"><div class="kaerebalink-cart"></div></a>
    <div class="kaerebalink-detail">%%auther%% %%label%% %%releaseDate%%
    </div>
    <div class="kaerebalink-link1">
      <div class="shoplinkamazon">%%amazonLink%%</div>
      <div class="shoplinkrakuten">%%rakutenLink%%</div>
      <div class="shoplinkyahoo">%%yahooLink%%</div>
      <div class="shoplinkyahooAuc">%%yahooAucLink%%</div>
      <div class="shoplinkseven">%%sevenLink%%</div>
      <div class="shoplinkbellemaison">%%bellemaisonLink%%</div>
      <div class="shoplinkcecile">%%cecileLink%%</div>
      <div class="shoplinkkakakucom">%%kakakucomLink%%</div>
    </div>
  </div>
  <div class="booklink-footer">
  </div>
</div>

大分短くなりましたね。その代わりにCSSに別途クラスを書いてあげましょう。

カエレバの見た目変更のCSS

見た目変更に際して今回は下記のサイトにお世話になりました。
extractCSS - Online CSS Extractor

こちらに上記のCSSをいれて、どの要素の設定をすればいいのかを抽出します。今回は「amazlet風(改)-1」の見た目をベースにしたかったのでそちらを使用して要素を抽出し、一部見た目の変更を行っています。それにしても、コピペするだけで勝手にCSSを作ってくれるとはなんと便利なんだ。。

で、完成したのがこちら。

▼変更後

[お坊さん便] 法事法要手配チケット (移動なし)

posted with カエレバ
株式会社みんれび
Amazonで探す
楽天で探す
Yahooで探す
ヤフオク!で探す

コードに関しても記載をしておきます。 やはりコンテンツとして独立させたいということで今回は枠線をつけています。また内部余白に関しても個人的なバランスへと修正をしています。

/*-----------------------------
カエレバのカスタマイズ
------------------------------*/
.kaerebalink-box {
border: thin solid #333;
border-radius:10px;
padding: 10px; 
margin-top: 5px;
margin-bottom: 5px;
width: auto;
}

.kaerebalink-image {
    float: left;
    margin: 0 15px 0px 0;
}

.kaerebalink-image > a {
}

.kaerebalink-image > a > img {
    border: none;
}

.kaerebalink-info {
    line-height: 120%;
    /zoom: 1;
    overflow: hidden;
}

.kaerebalink-name {
    margin-bottom: 10px;
    line-height: 120%;
}

.kaerebalink-name > a {
}

.kaerebalink-powered-date {
    font-size: 8pt;
    margin-top: 5px;
    font-family: verdana;
    line-height: 120%;
}

.kaerebalink-powered-date > a {
}

.kaerebalink-detail {
    margin-bottom: 5px;
}

.kaerebalink-link1 {
    margin-top: 10px;
    opacity: .80;
    filter: alpha(opacity=80);
    -ms-filter: }.shoplinkamazon{display:inline;
    margin-right: 5px;
    background: url('http://img.yomereba.com/kl.gif') 0 0 no-repeat;
    padding: 2px 0 2px 18px;
    white-space: nowrap;
}

.shoplinkamazon > a {
}

.shoplinkrakuten {
    display: inline;
    margin-right: 5px;
    background: url('http://img.yomereba.com/kl.gif') 0 -50px no-repeat;
    padding: 2px 0 2px 18px;
    white-space: nowrap;
}

.shoplinkrakuten > a {
}

.shoplinkyahoo {
    display: inline;
    margin-right: 5px;
    background: url('http://img.yomereba.com/kl.gif') 0 -150px no-repeat;
    padding: 2px 0 2px 18px;
    white-space: nowrap;
}

.shoplinkyahoo > a {
}

.shoplinkyahoo > a > img {
}

.shoplinkyahooAuc {
    display: inline;
    margin-right: 5px;
    background: url('http://img.yomereba.com/kl.gif') 0 -150px no-repeat;
    padding: 2px 0 2px 18px;
    white-space: nowrap;
}

.shoplinkyahooAuc > a {
}

.shoplinkyahooAuc > a > img {
}

.booklink-footer {
    clear: left;
}

こちらを、style.cssに記載しています。

消せるコードがある気がしますが、バグると原因の特定が私にはムリなので出力されたコードはそのまま使用しています。

以上です。

コードだらけでやたらと長い記事に。でもしょうがないよね。カスタマイズ自体はそんなに難しくは無いですがやっておくと他の人とちょっとだけ差別化出来るかもよ。

てな感じで。

関連記事

  • この記事を書いた人
  • 最新記事

Tatsuya Yabe

常に何かを考えていないとバカになると思う、だから常に何かを考えてる。 日々の生活に常に思考を。ということで書いています。

-WordPress
-, ,

Copyright© ガジェニュー , 2022 All Rights Reserved.