ガジェニュー

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

  関連記事

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

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

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

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

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

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

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

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

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

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

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

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

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

Loading Facebook Comments ...

Message

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