【PC・スマホ対応】カエレバ・ヨメレバのレスポンシブデザインをCSSでカスタマイズ！【レスポンシブ】

コチラの記事は最新のものではありません。
最新の記事は以下のリンクの記事をご利用ください！

【レスポンシブ対応】カエレバ・ヨメレバをＣＳＳでカスタマイズしておしゃれに紹介する！【価格.com・図書館対応】
【単色】レスポンシブ対応！カエレバ・ヨメレバをＣＳＳでカスタマイズ！！【価格.com・図書館対応】

カエレバ・ヨメレバのカスタマイズがある程度完成したので、
ｃｓｓコードをご紹介します。
ちなみにショップのリンクは、多いとごちゃごちゃしてしまうので、
楽天関係とアマゾン関係に絞っています。

コピペでできると思うので、お気軽にお試しください！

カスタマイズの準備
デザイン例
css公開
1. PC用css
2. スマホ用css
補足
コピペも良いですが・・・

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

国内シェアNo.1の高速サーバーなのでストレスフリー！
自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

カスタマイズの準備

カエレバ・ヨメレバのカスタマイズをする場合は、
子テーマを使うのは当然ですが、
それ以外にも必要なことがあります。

それはカエレバ又はヨメレバのサイトにて商品リンクを生成する際に、
デザインの部分を『Amazlet風-2（cssカスタマイズ用）』に必ずしてください。

こちらにしていないといくらコピペをしても、
デザインが変わりませんのでご注意ください。

デザイン例

この記事でご紹介するコードをコピペすることで、
カスタマイズされるカエレバのデザインをご紹介します。

なお、デザイン例は2016年1月現在のものです。

カエレバPC版

カエレバがこちら

カエレバスマホ版

実物

まるか商事ペヤングわかめMAXやきそば 117g×18個

posted with カエレバ

まるか商事 2016-11-14

Amazon

楽天市場

ヨメレバPC版

ヨメレバがこちら

ヨメレバスマホ版

実物

いちばんやさしいHTML5&CSS3の教本人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

posted with ヨメレバ

赤間公太郎,大屋慶太,服部雄樹インプレス 2016-03-18

css公開

pcとスマホ用のcssコードを公開します。
コピペで問題はないかと思いますが、
それぞれのブログのカラーなどがあると思いますので、
細かいところは、各々変更をしていただきたいと思います。

PC用css

.cstmreba{
       border: 1px solid #38b48b;
       width:90%;
       max-width:500px;
       padding:20px;
       margin:20px auto;
       box-shadow:1px 3px 8px 1px #a0a0a0;
}

.cstmreba a{
       color:#38b48b;
}

.cstmreba a:hover{
       color: #b22222;
}

.kaerebalink-image,
.booklink-image{
       width:20%;
       float:left;
}

.kaerebalink-info,
.booklink-info{
       overflow:hidden;
       padding-left:10px;
}

.kaerebalink-powered-date,
.booklink-powered-date{
       font-size:12px;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkkindle{
       float:left;
       width:27%;
       margin-left:5px;
       margin-bottom:8px;
       text-align:center;
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkkindle a{
       background-color:#38b48b;
       display: block;
       padding:10px 2px;
       font-size:15px;
       font-weight:bold;
       border: 1px solid #38b48b ;
       border-radius: 4px;
       box-shadow:1px 1px 5px -1px #a0a0a0;
       color:#fff;
       text-decoration: none;
}
.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover,
.shoplinkkindle a:hover {
       background:#fff;
       color:#38b48b;
       border: 1px solid #38b48b ;
       box-shadow:1px 1px 5px -1px #a0a0a0 inset;
}

スマホ用css

@media screen and (max-width: 480px) {
.cstmreba{
         margin:10px auto;
}
.booklink-image,
.kaerebalink-image{
          float:none;
          margin:0 auto;
          width:40%;
}
.kaerebalink-powered-date,
.booklink-powered-date{
         text-align:center;
}
.booklink-detail,
.kaerebalink-detail{
         text-align:center;
         margin-bottom:20px;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkkindle{
         float:none;
         width:90%;
}
}