ガジェニュー

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

  関連記事

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

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

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

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

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

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

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

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

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

images_111114_064856_PM
カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホ …

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

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

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

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

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

Loading Facebook Comments ...

Message

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