【単色】レスポンシブ対応！カエレバ・ヨメレバをＣＳＳでカスタマイズ！！【価格.com・図書館対応】

以前から紹介していたカエレバ・ヨメレバのカスタマイズ記事ですが、間違えてデータベースを消してしまった後に復元しましたが、画像が上手く表示されていないなどの不具合があったため、書き直したいと思います。

見た目はそこまで変わっていませんが、多少修正したので、以前の記事とは少し異なります。

コピペで出来るのでお気軽にお試しください！

なおこちらの記事は単色のカスタマイズとなっております。
カラフルなカスタマイズにしたい場合は、以下のカスタマイズをご利用ください！

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

前回の記事では、単色のカスタマイズを紹介しましたが、今回はカラフルバージョンです。一応サイト別のイメージカラーでカスタマイズしました。カラフルな方が良いという方は、こちらのカスタマイズをご利用ください。なおWordPressのテーマ「LIO...

plu-plu.net

2018.11.29

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

エックスサーバー

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

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

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

公式サイトはこちら

カスタマイズをする前に

カスタマイズをする場合は、カエレバ・ヨメレバで商品リンクを作る際に、「Amazlet風-2（cssカスタマイズ用）」を選択してください。
選択しないと上手く表示されない場合があります。

完成図

カエレバPC版

カエレバスマホ版

ヨメレバPC版

ヨメレバスマホ版

コード公開

上記のデザインを導入する場合は、以下のコードをstyle.cssに追記してください。
レスポンシブデザインとなっています。

見やすいようにＰＣ版とスマホ版で分けていますので、併せてコピペしてください。

ＰＣ版

/*--カエレバ・ヨメレバ--*/
.cstmreba{
	border:2px solid #38b48b;
	width:80%;
	padding:20px;
	margin:20px auto;
	box-shadow:0 2px 5px #999;
}
.kaerebalink-image img,
.booklink-image img{
	float:left;
}
.kaerebalink-info,
.booklink-info{
	overflow:hidden;
	padding-left:10px;

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

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan{
       float:left;
       width:27%;
       margin-left:5px;
       margin-bottom:8px;
       text-align:center;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinktoshokan a{
	background-color:#38b48b;
	display:block;
	padding:10px 2px;
    font-size:15px;
	font-weight:bold;
	line-height:15px;
	border:2px solid #38b48b;
	border-radius:4px;
	box-shadow:0 2px 5px #999;
	color:#fff;
	text-decoration: none;
}
.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover,
.shoplinktoshokan a:hover{
	background:#fff;
	color:#38b48b;
}

/*--ここまで--*/

スマホ版

/*--カエレバ・ヨメレバ--*/
@media screen and (max-width: 480px){
.cstmreba{
	margin:10px auto;
	padding:10px;
	width:90%;
}

.booklink-image img,
.kaerebalink-image img{
          float:none;
          margin:0 auto;
}
.kaerebalink-name,
.booklink-name{
	font-size:14px;
}
.kaerebalink-powered-date,
.booklink-powered-date{
         text-align:center;
}

.booklink-detail,
.kaerebalink-detail{
         text-align:center;
         margin-bottom:20px;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan{
         float:none;
         width:90%;
}
}

補足

カエレバ・ヨメレバの外枠の色を変更したい場合

cssコードのclass「cstmreba」にある「border」の色を好きな色に変更してください。

ショップリンクの色を変更したい場合

class「.shoplinkamazon a,.shoplinkrakuten a,.shoplinkrakukobo a,.shoplinkkindle a」にある
「background-color」の色および「border」の色を好きな色に変更してください。

まとめ

こんなかんじです。

前の記事よりも多少は良くなった気がします。（コード的に）
ちなみに前のカスタマイズ記事にはなかった「価格コム」と「図書館」が追加しました。

カラフルなカスタマイズが良い場合は、以下の記事をご利用ください！

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

前回の記事では、単色のカスタマイズを紹介しましたが、今回はカラフルバージョンです。一応サイト別のイメージカラーでカスタマイズしました。カラフルな方が良いという方は、こちらのカスタマイズをご利用ください。なおWordPressのテーマ「LIO...

plu-plu.net

2018.11.29

La-VIE(ラヴィ) ストレッチチューブ ボディストレッチのびーる ハード

posted with カエレバ

La-VIE(ラヴィ) 2012-08-28

Amazon

楽天市場

価格.com

HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with ヨメレバ

服部 雄樹 技術評論社 2017-07-21

Amazon

Kindle

楽天ブックス

楽天kobo

図書館