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

おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep

Tweet

Pocket

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

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

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

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

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

2015-06-13 23:37

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

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

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

スポンサーリンク

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

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

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

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

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

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でスマホ用に画面サイズを変更し、レイアウトを確認してみます。

こんな感じです。

かなりシンプルですが、デフォルトのままよりかはデザインされているんじゃないでしょうか。

参考になれば幸いです。

はじめてのハリネズミとの暮らし方

posted with カエレバ

田向 健一 日東書院本社 2015-06-22

Amazon

楽天市場

関連記事

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

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

2015-06-13 23:37

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vdeep」という記事を書きまし...

2016-01-28 18:55

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

参考サイトを見ながら自分で適当に書いたので、間違ってるところがあるかと思います。こうしたらいいよってのがあれば教えて下さい(`･ω･´)

Web開発のお仕事を募集しています