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

こんにちはちゅんこ@shufulifeです！

WordPressのテーマをSTINGER5に変更してみました。メモ的な意味も込めて、これからカスタマイズした箇所ををブログに書いていこうと思いますのでよろしくお願いします。

ヨメレバとカエレバのカスタマイズ

すっかりおなじみ！わかったブログのかん吉さんが運営なさってるブログパーツ、ヨメレバとカエレバ。

みんな使ってるし!私もぜひ使ってみたいと思い（私はゆとり世代ではないですよ）カスタマイズに挑戦しました。

ヨメレバとカエレバの具体的な使用方法はサイトで確認してくださいねー。

ヨメレバのデフォルトはこんな感じですね。画像は【amazlet風-1(改)　amazlet風-1[ロゴ無し]】です。

みんな大好きイケハヤさん

アマゾンや楽天などのショップのテキスト部分をCSSでボタン化にします

カスタマイズ後はこうなります

あまり買って！買って！！！と主張しすぎないよう、ボタンの色は控えめにし、ボタンの文字色で差別化しています。ボタンの色はそれぞれのショップのロゴの色を使いました。キンドルは黒だったので、ペーパーホワイトのロゴ色を使ってみました。

モバイルにも対応していますので、PCで見ていただいている方はウィンドウの幅を狭くして確認みてください。

STINGER5へのコード記述方法

STINGER5はレスポンシブになっていますので、2ヶ所に記載する必要があります。場所は【style.css】ですよー。

まずひとつめのコード記載

STINGER5の【style.css】に、下記の記載を探します。

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
aside {
	clear: both;
	float: none;
	width: auto;
	position: static !important;
	;
}
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
#wrapper {
	padding: 0 20px;
}
header {
	text-align: left;
}
.sitename img {
	max-width: 300px;
	margin: 0;
}

この部分より上に記載します。上ですよ上。

2015.2.17追記　コメントをいただきまして、 .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom部分のcursor:pointerを削除、.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom aへdisplay:block;を追加しました。コメントをくださったkomatsu様、ありがとうございます！！！

2015.6.29　webkit系の記述を削除。その他若干のコードを修正しました。

ヨメレバ・カエレバのcssカスタマイズ記事紹介 | Com2 Blog

/*--------------------------------------
  ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
	width:85%;
	margin: 1em 0 1em;
	padding: 5%;
	border:double #d2d7e6;
	overflow: hidden;
	font-size:small;
	border-radius:2px;
}

.booklink-image, .kaerebalink-image{
	margin:0 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
	display:block;
	margin:0 auto;
	text-align:center;
}

.booklink-info, .kaerebalink-info{
	text-align:center;
	line-height:120%;
	overflow: hidden;
}

.booklink-name, .kaerebalink-name{
	font-size:16px;
	margin-bottom:14px;
	line-height:1.2em;
}

.booklink-powered-date, .kaerebalink-powered-date{
	font-size:8pt;
　　　　 margin-top:10px;
	line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
	margin-bottom:15px;
}

.booklink-link2, .kaerebalink-link1{
	margin-top:20px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom{
    width:90%;
	height:15px;
	overflow:hidden;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	margin:0  auto 5px auto;
	padding:10px 0px;
	text-align:center;
	}
	
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover{
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}

.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active{
	position:relative;
	top:1px;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a{
	display:block;
	cursor:pointer;
	text-decoration:none;
	font-weight:800;
	text-shadow:1px 1px 1px #dcdcdc;
	font-size:12px;
}
	
.shoplinkamazon a{
	color:#FF9901;
}

 .shoplinkrakuten a{
	color:#c20004;
}

.shoplinkkindle a{
	color:#007dcd;	
}

.shoplinkyahoo a{
	color:#7b0099;
 } 

.booklink-footer{
	clear:left;
}

これをコピペしてください。上にね。

2か所目の記載コード

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {

次はこれより下コピペします。@media only screen and (min-width: 780px)は2個ありますが、2番目の(PCサイズ)の方の下の方にコピペです。

/*--------------------------------------
 780px ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
	width: 90%;
	margin:20px auto;
	padding:20px;
}

.booklink-image, .kaerebalink-image{
	margin:0 15px 0 0;
	float:left;
}


.booklink-info, .kaerebalink-info{
   margin:0;
   text-align:left;
}

.booklink-name, .kaerebalink-name{
	margin-bottom:24px;
	line-height:1.5;
}

.booklink-link2, .kaerebalink-link1{
	margin-top:10px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
    float:left;
    width:30%;
	margin:15px 1% 0 auto;
	padding:10px 0px;
}

.shoplinkyahoo a{
	font-size:10px;
 } 

Yahooショッピングは文字数が多いのでfontサイズを小さくしています。

ヨメレバ・カエレバでのデザイン選択

PCの画面ではボタンの数を3つにすると横にキレイに並びます。

ボタンの数を変えたいときは、

ボタンを4つ表示する場合、PCで見てみると、ひとつ下の方にはみ出す感じになります。(スマホ上では上手く並んで見えると思います)ボタンを4つ並べたい、または2つだけにしたい方は2番目にコピペした media Queries PCサイズ780px 以下の下記のところを、

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
    float:left;
    width:48%;
    margin:3px 2px 0 auto;
    padding:8px 1px;
}

このようにwitdthとmarginの値を変え、

.shoplinkyahoo a{
	 font-size:10px;
 }

この部分を削除。これでボタンが並ぶかと思います。

ボタンを自分好みにカスタマイズするには

ボタンのカスタマイズはこちらのサイトがおススメです。

左上の【Show Button Libraly】から好きな形状のボタンを選択します。

次にボタンの下の所から色を決め、好みのボタンを作ります。

作ったボタンをクリックすると右側にコードが出来てきます。これをコピペしていきます。

コピペの場所は 1番目にコピペしたmedia Queries タブレットサイズ780pxより上の部分。

.myButton（デフォルトの状態） 　⇒.hoplinkamazon, .shoplinkrakuten,～ 以下略の部分。

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
        width:90%;
	margin:0  auto 5px auto;
	padding:5px 2px;
	text-align:center;
　　　　ここにコピペ
}

上記の部分はそのまま、パディングとフォントサイズを削除したコードをコピペしてください。
ホバー、アクティブ部分はそのままコピペでOKです。class名は当サイトのコードのままです。

これでボタン部分も自分好みにすることが出来ます。PCで上手く並ばないときはwidth:30%の所やフォントサイズ、マージンなどで調整してみてくださいね！

まとめ

こんなすごいシステムを無料で提供してくださっているかん吉さん感謝です！

それでは、ちゅんこ@shufulifeがお送りしました。