カエレバをCSSで装飾してみた
2017/01/31
こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品をまとめて紹介できるブログパーツが「カエレバ」です。
先日、当ブログにも導入してみたのですが、見た目がデフォルトだとすこし寂しいのでCSSで装飾してみました。
カエレバの使い方は過去に記事にしているので、まだ導入していない方はこちらを参考にしてください。
ちなみに下記サイトのレイアウトを参考にしています。
参考コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ
ではさっそくCSSでレイアウトしていきましょう。
スポンサーリンク
カエレバの初期レイアウト確認
まずはデフォルトのカエレバのレイアウトを確認してみます。デザインは「amazlet風-2(cssカスタマイズ用)」を選択しています。
カエレバCSSレイアウト用に用意したハリネズミ本、気がついたらカートに入れていました。恐るべしハリネズミの魅力。。
話は戻って、カエレバコードの中身はこんな感じになってます。それぞれdiv&classで指定されてます。
- kaerebalink-box
- kaerebalink-image
- kaerebalink-info
- kaerebalink-name
- kaerebalink-detail
- kaerebalink-link1
全体を囲ってるdiv
商品画像を囲うdiv
リンクとかの文字を囲ってるdiv
商品タイトルとカエレバリンク囲ってるdiv→その中にあるkaerebalink-powered-dateがカエレバリンクのみ囲ってるdiv
著者・出版社・日付を囲ってるdiv
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でスマホ用に画面サイズを変更し、レイアウトを確認してみます。
こんな感じです。
かなりシンプルですが、デフォルトのままよりかはデザインされているんじゃないでしょうか。
参考になれば幸いです。
関連記事
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。
「Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
PC用AdSense
PC用AdSense
こちらもどうぞ
- PREV
- カエレバをブログに設置する方法
- NEXT
- クソモテない男ふたりで吉祥寺「相席屋」行ってきた