MENU
  1. ホーム
  2. ブログ運営
  3. Simplicity2
  4. 【Simplicity2カスタマイズ⑩】カエレバ・ヨメレバ・トマレバをカスタマイズする！

【Simplicity2カスタマイズ⑩】カエレバ・ヨメレバ・トマレバをカスタマイズする！

Simplicity2
LWL_ディスプレイ_横長レスポンシブ_PC用タイトル直下
LWL_ディスプレイ_レスポンシブ_スマホ用アイキャッチ下

Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。

Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。

今回行うカスタマイズは、「カエレバ・ヨメレバ・トマレバを綺麗に表示させるためのカスタマイズ」です。

ブログを書いているなら少しでも良いと思った商品は紹介したいし、さらにそれで自分のブログ経由で商品が売れて報酬をもらえるならありがたいと思うのは普通の感情でしょう。

そんな時に超役立つのが「カエレバ・ヨメレバ・トマレバ」。

これはブログを書いている人であれば知らない人はいないんじゃないか？というぐらい有名な方ですが、わかったブログを運営しているかん吉さんという方が無料で提供してくれているサービスです。

ここではツールの詳しい話しは割愛しますが、これを綺麗に表示させるためのカスタマイズのコードを載せておこうと思います。

LWL_ディスプレイ_レスポンシブ_PC用1つめのH2前
目次

カスタマイズ前とカスタマイズ後の変化について

まず何もカスタマイズしないままで表示させた場合とカスタマイズ後の表示がどうなるかを見比べてみたいと思います。

まずはカスタマイズ前。

上から、カエレバ・ヨメレバ・トマレバの順に表示させています。（商品などは、自分が今買いたいものや読みたいものや泊まりたい場所を選んだだけです。w）

※【amazlet風 – 2(CSSカスタマイズ用）】を選択してリンクを作成しています。黒枠は画像を見やすいようにしているだけで、通常のままだと枠はありません。

▼カエレバkaereba

▼ヨメレバyomerebas

▼トマレバtomareba

ん～ダメなわけじゃないですが、見にくいと言えば見にくいですね。

これをCSSコードを入れてあげると…こんな風に変わります。（実際にクリックすればリンク先の飛びます。）

▼カエレバ

クリエイティブ 2.1チャンネル ステレオ アクティブ PCスピーカー SP-SBS-A120

posted with カエレバ
クリエイティブ・メディア 2011-01-29
Amazonで調べる
楽天市場で調べる

▼ヨメレバ

人工知能は人間を超えるか ディープラーニングの先にあるもの (角川EPUB選書)

posted with ヨメレバ
松尾 豊 KADOKAWA/中経出版 2015-03-11
Amazon
Kindle
楽天ブックス

▼トマレバ

グランヴィリオ　リゾート石垣島　グランヴィリオガーデン　-ルートインホテルズ-＜石垣島＞

posted with トマレバ
沖縄県石垣市新川舟蔵2481-1[地図]
楽天トラベル
じゃらん
JTB
るるぶ

それぞれのリンクがボタン風になって、さらには背景を薄い黄色にして目立つようにしてみました。

LWL_記事内広告_レスポンシブ_PC用2つめのH2前

スタイルシート（style.css）に追記する

今回のカスタマイズはかなり簡単で、CSSコードを記述するだけ。

ということで、カスタマイズ用のコードは以下で、これをスタイルシート（style.css）に追記します。

/*---------------------------------
  カエレバ
--------------------------------*/
.kaerebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
  background-color: #FFFFF0;
}
.kaerebalink-image {
  margin-right: 18px;
  float:left;
}
.kaerebalink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.kaerebalink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.kaerebalink-name {
  font-size: 17px;
  margin-top: 2px;
}
.kaerebalink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.kaerebalink-link1 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkamazon a{
  color: #565656;
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkamazon a, .shoplinkrakuten a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}

/*---------------------------------
  ヨメレバ
--------------------------------*/
.booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
  background-color: #FFFFF0;
}
.booklink-image {
  margin-right: 18px;
  float:left;
}
.booklink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.booklink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.booklink-name {
  font-size: 17px;
  margin-top: 2px;
}
.booklink-detail {
  margin-top: 5px;
}
.booklink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.booklink-link1 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkamazon a{
  color: #565656;
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkkindle a{
  color: #0000FF;
}
.shoplinkamazon a, .shoplinkrakuten, .shoplinkkindle a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}

/*---------------------------------
  トマレバ
--------------------------------*/
.tomarebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
  background-color: #FFFFF0;
}
.tomarebalink-image {
  margin-right: 18px;
  float:left;
}
.tomarebalink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.tomarebalink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.tomarebalink-name {
  font-size: 17px;
  margin-top: 2px;
}
.tomarebalink-detail {
  margin-top: 5px;
}
.tomarebalink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.tomarebalink-link1 {
  font-size: 16px;
}
.shoplinkrakuten, .shoplinkjalan, .shoplinkjtb, .shoplinkrurubu {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkjalan a{
  color: #FF8C00;
}
.shoplinkjtb a{
  color: #565656;
}
.shoplinkrurubu a{
  color: #0000FF;
}
.shoplinkrakuten, .shoplinkjalan, .shoplinkjtb, .shoplinkrurubu a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}

これを追記すればそっくりそのままの表示がされます。

スマホ用のカスタマイズも忘れずに行う

上記コードはPCでは綺麗に表示されますが、スマホになると形が崩れてしまいます。

なので、スマホ限定の以下のコードをスタイルシートに追記します。

/*---------------------------------
スマホ用カエレバ・ヨメレバ・トマレバ
--------------------------------*/
@media only screen and (max-width: 480px) {
.kaerebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.kaerebalink-image {
  margin: 0 0 10px 0;
  float: none;
}
.kaerebalink-image img {
  margin: 0 auto;
  display: block;
}
.kaerebalink-info {
  font-size: 12px;
  margin: 0;
}
.kaerebalink-name {
  font-size: 15px;
  margin-top: 2px;
}
.kaerebalink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.kaerebalink-link1 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten {
  float: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
}

.booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.booklink-image {
  margin: 0 0 10px 0;
  float: none;
}
.booklink-image img {
  margin: 0 auto;
  display: block;
}
.booklink-info {
  font-size: 12px;
  margin: 0;
}
.booklink-name {
  font-size: 15px;
  margin-top: 2px;
}
.booklink-detail {
  margin-top: 5px;
}
.booklink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.booklink-link1 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle {
  float: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
}

.tomarebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.tomarebalink-image {
  margin: 0 0 10px 0;
  float: none;
}
.tomarebalink-image img {
  margin: 0 auto;
  display: block;
}
.tomarebalink-info {
  font-size: 12px;
  margin: 0;
}
.tomarebalink-name {
  font-size: 15px;
  margin-top: 2px;
}
.tomarebalink-detail {
  margin-top: 5px;
}
.tomarebalink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.tomarebalink-link1 {
  font-size: 14px;
}
.shoplinkrakuten, .shoplinkjalan, .shoplinkjtb, .shoplinkrurubu {
  float: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
 }
}

これでPC表示もスマホ表示も綺麗に表示されるようになります。

ヨメレバが「Amazon」、「Kindle」と横に並び、「楽天ブックス」だけ下段に表示されてますが、これをもし横に三列にしたいというなら、コードの【shoplink～】と書かれている次に【width】というコードがあります。

現在は44%にしてますが、この数字をいじくれば短くしたり長くしたり出来ます。

自分好みに色々と長さを決めたり背景の色を調整したり、色々カスタマイズしてみてください！

カエレバ・ヨメレバ・トマレバのカスタマイズ / まとめ

今回はAmazonや楽天のアフィリエイトリンクを綺麗に表示させるための、カエレバ・ヨメレバ・トマレバのカスタマイズをしてみました。

覚えてくるとカスタマイズは楽しくなってきますよ！

ぜひ参考にして下さい。

その他のSimplicity2のカスタマイズをご覧になりたい場合はこちらの記事を参考にして下さい。

LWL_Multiplex_横長レスポンシブ_PC用記事終わり
LWL_Multiplex_横長レスポンシブ_スマホ用記事終わり
Simplicity2
記事のシェアにご協力お願いします
  • URLをコピーしました！

関連記事

この記事へのコメント

コメントする

日本語が含まれない投稿はスルーされますのでご注意ください。（スパム対策）

目次