サイドバーとフッターにも対応したSimplicity用カエレバCSSカスタマイズ

以前こちらのエントリーでカエレバを利用する際はレスポンシブ対応も併せて考えておくべき的な事を書いてみましたが

今回のエントリーではSimplicityに最適化した(つもりの)カスタマイズ用CSSを公開したいと思います。 とりあえずサイドバー・フッターのウィジェットにカエレバのタグを使用した場合、画像の回り込みを止めて下に商品情報やボタンを配置する事でレイアウトの崩れを防いでみました。

スポンサーリンク

カエレバカスタマイズCSS for Simplicity

とは言っても全て自分で作成したわけでは無く、ベースになる部分はこちらのサイトを参考にさせていただいたおかげで非常に助かりました。どうもありがとうございます。

尚、こちらのサイトで公開されているCSSを本文中で「オリジナル」と表現している部分がありますので、何のことだっけ?とか思わないようにして下さいませ。

CSSはコチラをコピペして下さい

一応他のテーマにも応用は可能だと思いますが、Simplicityでしかテストしていませんので細かい調整は必要になるかもしれません。メインの部分はオリジナルのCSSが良く出来ていたので基本的に大丈夫だと思っていますが、サイドバーやフッターは使用するテーマによってセレクタが違う場合がありますので要注意という事でお願いします。

/**************************************************/
/* カエレバ 共通部分 ここから                     */
/**************************************************/
.cstmreba {
	width: 100%;
	margin: 20px 0 0;
	padding: 0;
	height: auto;
	border: 0 none;
}

.booklink-box ,
.kaerebalink-box {
	width: 100%;
	background-color: #fff;
	overflow: hidden;
}

.booklink-image ,
.kaerebalink-image {
	width: 160px;
	float: left;
	margin: 0 10px 10px 0;
}

.booklink-image a ,
.kaerebalink-image a {
	width: 100%;
	display: block;
	text-align: center;
}

.booklink-image a img ,
.kaerebalink-image a img {
	margin: 0;
	padding: 0;
}

.booklink-info ,
.kaerebalink-info {
	overflow: hidden;
	line-height: 150%;
}

.booklink-info a ,
.kaerebalink-info a {
	text-decoration: none;
}

.booklink-name>a ,
.kaerebalink-name>a {
	font-size: 14px;
}

.booklink-powered-date ,
.kaerebalink-powered-date {
	font-size: 10px;
	line-height: 150%;
}

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

.kaerebalink-link1 img ,
.booklink-link2 img {
	display: none;
}

.booklink-link2 a , 
.kaerebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	line-height: 180%;
	padding: 3% 1%;
	border-radius: 5px;
	box-shadow: 0 1px 0 #c0c0c0;
	background: linear-gradient(
		#fff 0% ,
		#f0f0f0 100%);
}

.booklink-link2>div , 
.kaerebalink-link1>div {
	float: left;
	margin-bottom: 6px;
	width: 48.5%;
}

.booklink-link2>div:nth-child(even) , 
.kaerebalink-link1>div:nth-child(even) {
	margin-left: 2%;
}

.booklink-footer {
	clear: both;
}

/* ボタンカラー */
/* カエレバ */
.shoplinkyahoo a { color: #ff0033 !important; }       /* Yahoo!ショッピング */
.shoplinkbellemaison a { color: #84be24 !important; } /* ベルメゾン */
.shoplinkcecile a { color: #8d124b !important; }      /* セシール */ 
.shoplinkkakakucom a { color: #314995 !important; }   /* 価格コム */
/* ヨメレバ */
.shoplinkkindle a { color: #007dcd !important; }      /* Kindle */
.shoplinkrakukobo a { color: #d50000 !important; }    /* 楽天kobo */
.shoplinkbk1 a { color: #0085cd !important; }         /* honto */
.shoplinkehon a { color: #2a2c6d !important; }        /* ehon */
.shoplinkkino a { color: #003e92 !important; }        /* 紀伊國屋書店 */
.shoplinktoshokan a { color: #333333 !important; }    /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.shoplinkamazon a { color: #FF9901 !important; }      /* Amazon */
.shoplinkrakuten a { color: #c20004 !important; }     /* 楽天 */
.shoplinkseven a { color: #225496 !important; }       /* 7net */
/* ボタンカラー ここまで*/

/* ボタンカラー ホバー用 ここから */
.shoplinkyahoo a:hover ,
.shoplinkbellemaison a:hover ,
.shoplinkcecile a:hover ,
.shoplinkkakakucom a:hover ,
.shoplinkkindle a:hover ,
.shoplinkrakukobo a:hover ,
.shoplinkbk1 a:hover ,
.shoplinkehon a:hover ,
.shoplinkkino a:hover ,
.shoplinktoshokan a:hover ,
.shoplinkamazon a:hover ,
.shoplinkrakuten a:hover ,
.shoplinkseven a:hover {
	color: #fff !important;
	transition-delay: .2s;
	transition-duration: 1s;
}
/* カエレバ */
.shoplinkyahoo a:hover { background: #ff0033; }       /* Yahoo!ショッピング */
.shoplinkbellemaison a:hover { background: #84be24; } /* ベルメゾン */
.shoplinkcecile a:hover { background: #8d124b; }      /* セシール */ 
.shoplinkkakakucom a:hover { background: #314995; }   /* 価格コム */
/* ヨメレバ */
.shoplinkkindle a:hover { background: #007dcd; }      /* Kindle */
.shoplinkrakukobo a:hover { background: #d50000; }    /* 楽天kobo */
.shoplinkbk1 a:hover { background: #0085cd; }         /* honto */
.shoplinkehon a:hover { background: #2a2c6d; }        /* ehon */
.shoplinkkino a:hover { background: #003e92; }        /* 紀伊國屋書店 */
.shoplinktoshokan a:hover { background: #333333; }    /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.shoplinkamazon a:hover { background: #FF9901; }      /* Amazon */
.shoplinkrakuten a:hover { background: #c20004; }     /* 楽天 */
.shoplinkseven a:hover { background: #225496; }       /* 7net */
/* ボタンカラー ホバー用 ここまで */

/**************************************************/
/* カエレバ 共通部分 ここまで                     */
/**************************************************/

/**************************************************/
/* カエレバ サイドバー・フッター                  */
/*                 PC表示用(1111px以上)ここから */
/**************************************************/
@media only screen and (min-width: 1111px) {

#sidebar .booklink-image ,
#sidebar .kaerebalink-image ,
#footer .booklink-image ,
#footer .kaerebalink-image {
	width: 100%;
	float: none;
}

#sidebar .booklink-box ,
#sidebar .kaerebalink-box ,
#footer .booklink-box ,
#footer .kaerebalink-box {
	text-align: center;
}

}
/**************************************************/
/* カエレバ サイドバー・フッター                  */
/*                 PC表示用(1111px以上)ここまで */
/**************************************************/

/**************************************************/
/* カエレバ レスポンシブ対応(479px以下)ここから */
/**************************************************/
@media only screen and (max-width: 479px) {

.booklink-image ,
.kaerebalink-image {
	width: 100%;
	float: none;
}

.booklink-box ,
.kaerebalink-box {
	text-align: center;
}

}
/**************************************************/
/* カエレバ レスポンシブ対応(479px以下)ここまで */
/**************************************************/

/**************************************************/
/* カエレバ レスポンシブ対応(319px以下)ここから */
/**************************************************/
@media only screen and (max-width: 319px) {
        
.booklink-link2 a , 
.kaerebalink-link1 a {
	line-height: 95%;
}

.booklink-link2>div , 
.kaerebalink-link1>div {
	margin: 0 0 6px !important;
	width: 98%;
}

}
/**************************************************/
/* カエレバ レスポンシブ対応(319px以下)ここまで */
/**************************************************/

なるべくムダが無いように削ったつもりですが、更に軽量化出来るという方がみえたら添削していただけると助かります。むしろお願いしたいくらいです、切実に。このCSSだけで6KBくらい使っちゃってますんで…

ここの○○は要らないかな?と思って削ったら○○が効かなくなった、みたいな事もあったりしたのであまり余計な事はしない事にしました。

主なブレークポイント

大きくレイアウトが変わるところは、PC表示でのサイドバーが下に移動してフッターが消える1110pxと、画像の右側に回り込んでいた商品情報やボタンが画像の下に降りる479pxの2箇所になります。

1110pxではサイドバーがメインカラムの下に移動して、通常のエントリーと同様の表示になるだけなのでこれと言って問題は無いかと思います。

480pxだとこんな感じなのが

Simplicity用 カエレバ カスタマイズCSS 480px

479pxでこう、みたいな。

Simplicity用 カエレバ カスタマイズCSS 479px

使用する際に削除しても良い部分

当然と言えばそうですが、使用していないボタンに関する部分は削除していただいて問題ありません。どちらかと言えばムダな読み込みが減るので消した方がよろしいかと思います。コメントも要らないと思ったら容赦なく消しちゃって下さい。

また、最後のメディアクエリは319px以下という基本的に使われる事の無いであろう値が設定してありますが、この部分はボタンを全て縦並びにする為に使用出来ますので、適用したいサイズを設定して組み込むも良し、不要なら削除するも良しという事でお願いします。

ちなみに320pxだとこうなってるのが

Simplicity用 カエレバ カスタマイズCSS 320px

319pxでこうなります。

Simplicity用 カエレバ カスタマイズCSS 319px

問題があるとすれば更に縦に長くなるので、この表示だけでスマホの画面が埋まってしまう事でしょうかね…

使用に関する注意

完全レスポンシブにしている方はresponsive.cssに、そうでない方はstyle.cssとmobile.cssにうまく振り分けて下さいね?と言うか、実は完全レスポンシブ以外にした事が無いので、そうでない時はどうしたらいいのかよくわかってなかったりします。

バックアップは当然された方が良いですが、追加した部分がすぐにわかるようであれば何かあってもすぐに削除するだけで何とかなるかと思います。

サイドバーの幅は300px・336pxのどちらでも大丈夫…なはずです。主要なブレークポイントの確認とデベロッパーツールで1pxずつズラしながらの確認もしてあるので、よほどの事が無ければレイアウトが崩れる事は無いだろうと思っていますが、不具合等ありましたらお手数ですがコメントかお問い合わせフォームからご連絡いただけると助かります。

しばらく使ってみて不具合が無い事を確認したら、副サイト用にSTINGER PLUS+とWpTHK・Luxeritasでも使えるようにカスタマイズする予定ですので、その時は各テーマ間のCSSの移植に関してエントリーに出来たらいいなと思っています。たぶん、そんな大げさな話でも無いでしょうけど。

あと、すっかり忘れてましたがカエレバでリンクを作成する際の注意点が、以前のエントリーに書いてあったのでもう一度リンクを貼っておきます。(こちらのリンクだと該当の段落まで一気に飛びます)

カエレバカスタマイズCSSの改造ポイント

コピペさせていただいたオリジナルのままでも十分良い出来でしたが、私のサイトに合わせて何点か改造を施してあります。

ボタンが横並びに3つだったのを2つに

私がカエレバで利用しているのはAmazon、楽天、Yahoo!ショッピング、7netの4つなので、ボタン3つだとバランスが悪いという事で2つ並びに変更してあります。

かと言って2つ並びだと画像の回り込みを解除した時に縦に長くなるので4つ並びの方がいいかな?とも思いましたが、ヨメレバではAmazon、Kindle、楽天、楽天kobo、7net、紀伊國屋書店と最大で6つになるので、何れにしても2の倍数の方が良いだろうという事になりました。それに4つ並びだとYahoo!ショッピングだけ長いのが地味に響いてくるんですよね…2つにしても問題でしたけど。

トマレバに関する部分は削除しました

カエレバ・ヨメレバに比べるとあまり使っている方はいないのではないかと思ったので削ってしまいました。もしトマレバを利用されている方はお手数ですが、当エントリーのはじめに紹介したサイトを参考にしてその部分だけ手動で追加して下さいませ。

と言うか、いっその事そのままオリジナルの方のCSSを利用して、サイドバーとフッターに関する部分だけ当サイトのカスタマイズを参考にするのもありかもしれません。

あと、ボタンカラーの部分は.shoplink○○で直接指定する事が出来たので、その前の.kaerebalink-~みたいなセレクタは省略しました。ただ、ムダにホバーの部分を追加してるんで全く軽量化にはなってませんけど。

サイドバー・フッターのウィジェット対応

オリジナルではPC表示の場合、サイドバー・フッターのウィジェットにカエレバのタグを使用すると、カラム幅の関係でほぼ確実にレイアウトが崩れるのでその対応策を追加してあります。(と言うか参考サイトさんは1カラムなので不要ですわね)

出来るだけCSSには!Importantを付けないよう心掛けていますが、フッターのリンク色はどうしても親要素の属性が優先されてしまうのでやむを得ず使用してあります。

ホバー時にボタンがじわっとくるようにしてみました

これは単なる私の趣味ですが、ホバー時にボタンの色がリンク先に合わせたカラーでじわ~っと変わるようにしてあります。モバイルだと全く意味が無いんですけどね…

こういった時の事を考えるとやはり完全レスポンシブ用ではなく、PCとモバイルでCSSを分けた方が少しでもモバイルからのアクセスに対して軽量化出来るかな?とも思うんですが何とも難しいところではあります。

実際の使用例

それでは実際の使用例としてカエレバ作者さんの著書をサンプルにしてみました。サンプルと言っても実際に私のコードが埋め込まれたリンクになりますので、興味の無い方は押さないようにして下さいね? 押すなよ!絶対押すなよ!的な意味ではありませんので、念の為。

あと、サイドバーとフッターにも確認の意味も含めてカエレバで作成したリンクを貼っておきますので、興味のある方はぜひ!そうで無い方は触れない方向でお願いいたします。

カエレバで利用するアフィリエイトプログラムについて

私の場合、AmazonはAmazonアソシエイト、楽天は楽天アフィリエイトを直接利用していますが、それ以外のYahoo!ショッピング・7net・紀伊國屋書店はバリューコマース経由で利用しています。 基本的にカエレバ・ヨメレバ・トマレバの提携先は、もしもアフィリエイト・バリューコマース・リンクシェアの3社で全てカバー出来ますので参考までにどうぞ。

サイドバー・フッターに商品リンクを貼る場合

さすがにいつも同じ商品が表示されるのもちょっとアレだなと思う方は、Ads by datafeedr.comというプラグインを利用して、あらかじめ登録しておいた広告の中からランダムに表示させる事も可能になります。その辺はおいおい別のエントリーで書いてみたいと思っていますが、今はとりあえずそういう事も出来るんだーくらいに思っておいて下さい。

レビュー記事のお供にどうぞ

実際に自分で使ってみて「これいいわー」と思った商品の事をブログに書いている方は結構みえるのではないかと思います。今回のカスタマイズ用CSSを適用すると、エントリーの中だけでなくサイドバーやフッターにもカエレバで作成したリンクをレイアウト崩れ無しに設置出来ますので、ぜひとも活用していただければ幸いです。

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

最新情報をお届けします

スポンサーリンク
トップへ戻る