カエレバをCSSで装飾してみた

2015/06/14 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品をまとめて紹介できるブログパーツが「カエレバ」です。

先日、当ブログにも導入してみたのですが、見た目がデフォルトだとすこし寂しいのでCSSで装飾してみました。

カエレバの使い方は過去に記事にしているので、まだ導入していない方はこちらを参考にしてください。

カエレバをブログに設置する方法

こんにちは、okutani(@okutani_t)です。私は当ブログvdeepで、Amazonの商品をたま...

2015-06-13 23:37

ちなみに下記サイトのレイアウトを参考にしています。

参考コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ

ではさっそくCSSでレイアウトしていきましょう。

1 カエレバの初期レイアウト確認
- 1.1 PC用レイアウトコード
- 1.2 スマホ用レイアウトコード
2 関連記事

カエレバの初期レイアウト確認

まずはデフォルトのカエレバのレイアウトを確認してみます。デザインは「amazlet風-2(cssカスタマイズ用)」を選択しています。

カエレバCSSレイアウト用に用意したハリネズミ本、気がついたらカートに入れていました。恐るべしハリネズミの魅力。。

話は戻って、カエレバコードの中身はこんな感じになってます。それぞれdiv＆classで指定されてます。

kaerebalink-box

全体を囲ってるdiv

kaerebalink-image

商品画像を囲うdiv

kaerebalink-info

リンクとかの文字を囲ってるdiv

kaerebalink-name

商品タイトルとカエレバリンク囲ってるdiv→その中にあるkaerebalink-powered-dateがカエレバリンクのみ囲ってるdiv

kaerebalink-detail

著者・出版社・日付を囲ってるdiv

kaerebalink-link1

Amazon・楽天等を囲ってるdiv→その中にshoplinkamazon、shoplinkrakutenのdiv

ではスタイリングしていきましょう。

PC用レイアウトコード

PC用のCSSレイアウトコードは次の通りです。極力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;
}
.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: 18px;
  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: 40%;
  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);
}

こんな感じになります。

ボタン背景のレイアウトはこちらのサイトが参考になりました。

参考5つの効果で作る、よく使うCSS3ボタンデザインサンプル集

このままだと、スマホ用レイアウトが崩れてしまうので調整しましょう。

スマホ用レイアウトコード

適宜、スマホ用のcssに記述しましょう。

@media only screen and (max-width: 480px) {
  // ここにカエレバスマホ用コード
}

このようにメディアクエリ内に書いてあげるのが一般的ですね。PCレイアウトを上書きして使うため、先ほどのコードの下にスマホ用コードが来るように記述してください。

@mediaの中に記述するカエレバスマホ用コードは次のとおりです。

.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;
}

Chromeでスマホ用に画面サイズを変更し、レイアウトを確認してみます。