ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

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

      2016/01/21    後で読む

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

SPONSORED LINKS


カスタマイズしようと思った理由は、通常のコード出力だとデザインの設定まで乗ったリンクが生成されるのでエントリーを書いている時にエディタがごちゃごちゃしてしまう。なので今回は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="http://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="http://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を作ってくれるとはなんと便利なんだ。。

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

▼変更後

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

/*-----------------------------
カエレバのカスタマイズ
------------------------------*/
.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に記載しています。

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

以上です。

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

てな感じで。

 - WordPress , ,

  関連記事

sicon_1r_192_020215_080729_PM
【アクセス数報告】2015年1月のPVとアフィリエイトの収益とか

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

201509
【アクセス数報告】2015年8月のPVとアフィリエイトの収益とか

最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

sum
Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STIN …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

photo-express-for-google-tb
Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です