vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

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

      2016/05/22

LINEで送る
Pocket

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

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

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

カエレバをブログに設置する方法
こんにちは、okutani(@okutani_t)です。私は当ブログvdeepで、Amazonの商品をたま...
2015-06-13 23:37
はてブ

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

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

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

スポンサーリンク

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

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

kaereba-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);
}

こんな感じになります。

kaereba-css2

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

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

kaereba-css3

こんな感じです。

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

参考になれば幸いです。

関連記事

カエレバをブログに設置する方法
こんにちは、okutani(@okutani_t)です。私は当ブログvdeepで、Amazonの商品をたま...
2015-06-13 23:37
はてブ
ポチレバをCSSで装飾してみた
こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vdeep」という記事を書きまし...
2016-01-28 18:55
はてブ

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - CSS, アフィリエイト

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

【Win・Mac】Sassを導入&初めてScssを使ってみる

こんにちは、okutani(@okutani_t)です。今まで、Webコーディン …

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

こんにちは、okutani(@okutani_t)です。私は当ブログvdeepで …

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

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

iTunesアフィリエイトプログラムに登録してみよう

こんにちは、okutani(@okutani_t)です。みなさん、サイトにiPh …

[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

[WordPress] Amazonアソシエイトを綺麗に表示「AmazonJSプラグイン」導入方法

こんにちは、okutani(@okutani_t)です。Amazonアソシエイト …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。