ガジェニュー

~iPhone・格安スマホとか~

カエレバの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_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

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

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

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

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

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

sum1014
【STINGER5カスタマイズ】サイドバーにプロフィール設置

今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加し …

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

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

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

Loading Facebook Comments ...

Message

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