【はてなブログ】カエレバ、ヨメレバ、トマレバのCSSカスタマイズ【コピペでOK】

f:id:akane1033:20171124083317j:plain

ブログでアマゾンや楽天の商品を紹介する際

かん吉さんという偉大な方が作った「カエレバ」というブログパーツを利用しています。

kaereba.com

 

このカエレバをブログに綺麗に表示させるため

当ブログではゆきひー（id:ftmaccho）さんが作ったカスタマイズを使っていました。

 

この前記事で初めてトマレバ（カエレバの宿バージョン）を使おうとしたんですが

今使っているゆきひーさんのカスタマイズは、トマレバに対応していないことが分かりました。

 

ということで

これまで使っていたゆきひーさんのカエレバとヨメレバのカスタマイズにトマレバを加えて、自分が満足いくようなカスタマイズにしてみました。

 

今回参考にしたリンク

当ブログでは、カエレバのカスタマイズとして

偉大なゆきひー（id:ftmaccho）さんが作ったカスタマイズを愛用していました。

 

ゆきひーさんのカスタマイズはこちらから↓

www.yukihy.com

 

ゆきひーさんのカスタマイズをブログに表示させると、こんな感じに見えます。

パソコンから↓

f:id:akane1033:20171124083525j:plain

 

スマホから↓

f:id:akane1033:20171124083544j:plain

 

シンプルで非常に気に入っていたんですが

ゆきひーさんのこのカスタマイズは、残念ながらトマレバには未対応でした。

 

ゆきひーさんのカスタマイズにトマレバを加えたかったのですが

なんせ私はパソコンはド素人。

 

なので、先人の知恵をお借りしました！

 

こちらも偉大なえむしとえむふじん（id:mshimfujin）さんが作ったカスタマイズを参考にさせていただき

前述のゆきひーさんのカスタマイズと合体させて、自分の好きなようにカスタマイズしてみました。

 

えむしとえむふじんさんのカスタマイズはこちらから↓

blog.mshimfujin.net

 

えむしとえむふじんさんのカスタマイズを使うと、こんな感じになります。

パソコンから↓

f:id:akane1033:20171124083642j:plain

 

スマホから↓

f:id:akane1033:20171124083702j:plain

楽天市場がズレてる＆スマホの方は画像が切れちゃいました、、、。

 

ゆきひーさんのカスタマイズと似ていますが

商品名の上下にバーがあったり、「Posted with カエレバ」の文字が右寄せになっていたり、またスマホ版では画像が上に来るように設定されています。

 

どちらのカスタマイズもとても素敵で1つに決めることが出来なかったので

両方の好きな所を取り出して、自分なりにカスタマイズ、さらにトマレバを追加しました。

 

カスタマイズ実装図

パソコン↓

f:id:akane1033:20171124083729j:plain

 

スマホ↓

f:id:akane1033:20171124083825j:plain

 

スマホ【写真大きめVer.】↓

f:id:akane1033:20171124083844j:plain

上切れちゃいました、すみません。

 

あれ？

あんまり変わってないって？笑

 

基本はゆきひーさんのカスタマイズを使い、えむしとえむふじんさんのカスタマイズの好きな点（posted with カエレバを右寄せ）を残しました。

 

また

商品タイトルの下にある線だけを残し、シンプルながらも商品タイトルが一目で分かるようなデザインにしました。

 

そして

楽天市場のボタン（に限らず、一番最後に表示されるボタン）がズレてしまう問題に関しても修正しました。（と、思います。）

 

スマホのカスタマイズに関しては

えむしとえむふじんさんが作った画像が上に来るデザインが好きで残したいと思ったんですが、、、

スマホに表示させた際画像が上に来る分かなり縦幅を取ることが分かり、結局画像に関してはゆきひーさんのような左表示を残しました。

 

※一応、画像が上にくるバージョンも作りました。

詳しくは下記の「スマホ【写真大きめVer.】」参照。

 

以下のカスタマイズを使う際の注意点

お二方（3人？）のカスタマイズでもそうですが

カエレバのサイトでブログパーツを生成する際、デザインの欄は「amazlet風-2（cssカスタマイズ用） 」 を選択してください。

 

また

今回は「パソコン」「スマホ」と、「スマホ【写真大きめVer.】」を分けて掲載しています。

 

レスポンシブには対応していないので、ご注意ください。 

 

最後に

ド素人が先人の知恵をお借りして作ったカスタマイズになりますので、一応自己責任でお願いします！

 

コードを追加する前に、使っているコードのバックアップをしておくことをおすすめします。

 

カスタマイズ

パソコン

以下のコードを「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けてください。

/*--------------------------------------
  ヨメレバ・カエレバ・トマレバPC
--------------------------------------*/
.cstmreba {
    padding:25px;
margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
    float:left;
    margin:0 15px 0 0;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img, .tomarebalink-image img{
    margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
    margin:0;
line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
border-top:5px;
padding-top:5px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
border-top:1px solid #ccc;
text-align:right;
     padding:2px;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{font-size: 12px;}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{margin-top:10px;}
.booklink-link2 a,
.tomarebalink-link1 a,
.kaerebalink-link1 a {
    width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
text-align:center;
    float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active,
.kaerebalink-link1 a:active,
.tomarebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkamazon img{display:none;}
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.shoplinkrakuten img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakukobo a {
    color: #990000 !important;
    border: 1px solid #990000 !important;
}
.shoplinkseven a {
    color: #82C36F !important;
    border: 1px solid #82C36F !important;
}
.shoplinkjalan a {
    color: #FF9901 !important;
    border: 1px solid #FF9901 !important;
}
.shoplinkjtb a {
    color: #990000 !important;
    border: 1px solid #990000 !important;
}
.booklink-footer{display: none;}
@media screen and (max-width: 1024px) {
.kaerebalink-link1 a, .booklink-link2 a, .tomarebalink-link1 a { /* 購入ボタン */
    width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}
@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box, .tomarebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image, .tomarebalink-image {
    width: 100%;
min-width: initial;
    display: block;
    float: none;
}
.booklink-name > a, .kaerebalink-name > a, .tomarebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{margin-top:5px;}

 

スマホ

画像が左に来るタイプのカスタマイズです。

 

以下のコードを「デザイン」→「スマートフォン」→「記事」→「記事下」に貼り付けてください。

（カエレバを記事だけでなくトップページにも貼る方は「タイトル下」に貼ってください。）

<style>
/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.cstmreba {
padding:15px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
float:left;
margin:0 15px 0 0;
width: 100px;
}
.booklink-image img, .kaerebalink-image img, .tomarebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name > a, .kaerebalink-name > a, .tomarebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
margin-bottom:12px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
text-align:right;
padding:2px;
border-top:1px solid #ccc;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{font-size: 12px;}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{margin-top:10px;}
.booklink-link2 a,
.tomarebalink-link1 a,
.kaerebalink-link1 a {    width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin: 2px 0px;
padding:10px 0px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active,
.kaerebalink-link1 a:active,
.tomarebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkamazon img{display:none;}
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.shoplinkrakuten img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakukobo a {
color: #990000 !important;
border: 1px solid #990000 !important;
}
.shoplinkseven a {
color: #82C36F !important;
border: 1px solid #82C36F !important;
}
.shoplinkjalan a {
color: #FF9901 !important;
border: 1px solid #FF9901 !important;
}
.shoplinkjtb a {
color: #990000 !important;
border: 1px solid #990000 !important;
}
.booklink-footer{display: none;}
</style>

 

スマホ【写真大きめVer.】

画像が上に来るタイプのカスタマイズです。

画像が大きめです。

 

以下のコードを「デザイン」→「スマートフォン」→「記事」→「記事下」に貼り付けてください。

（カエレバを記事だけでなくトップページにも貼る方は「タイトル下」に貼ってください。）

<style>
/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.cstmreba {
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
float:left;
margin:0 15px 0 0;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img, .tomarebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
border-top:5px;
padding-top:5px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
border-top:1px solid #ccc;
text-align:right;
padding:2px;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{font-size: 12px;}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{margin-top:10px;}
.booklink-link2 a,
.tomarebalink-link1 a,
.kaerebalink-link1 a {
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active,
.kaerebalink-link1 a:active,
.tomarebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkamazon img{display:none;}
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.shoplinkrakukobo a {
color: #990000 !important;
border: 1px solid #990000 !important;
}
.shoplinkseven a {
color: #82C36F !important;
border: 1px solid #82C36F !important;
}
.shoplinkjalan a {
color: #FF9901 !important;
border: 1px solid #FF9901 !important;
}
.shoplinkjtb a {
color: #990000 !important;
border: 1px solid #990000 !important;
}
.booklink-footer{display: none;}
@media screen and (max-width: 1024px) {
.kaerebalink-link1 a, .booklink-link2 a, .tomarebalink-link1 a { /* 購入ボタン */
width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}
@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box, .tomarebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image, .tomarebalink-image {
width: 100%;
min-width: initial;
display: block;
float: none;
}
.booklink-name > a, .kaerebalink-name > a, .tomarebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{margin-top:5px;}
}
</style>

 

実装した際のボタン個数別の見え方

ボタン1個（トマレバ）

f:id:akane1033:20171124084009j:plain

ボタン2個（カエレバ）

f:id:akane1033:20171124083729j:plain

ボタン3個（ヨメレバ）

f:id:akane1033:20171124084038j:plain

ボタン4個（ヨメレバ）

f:id:akane1033:20171124084058j:plain

 

ボタンは2～3個の方が見栄えがいいかもしれません。

 

まとめ

今回は、はてなブログで使えるカエレバ、ヨメレバ、トマレバのCSSカスタマイズを紹介しました。

 

ド素人が四苦八苦しながら挑戦した物ですが、ぜひ使ってみてください。

 

また、何か改善点などあれば知らせていただけると幸いです。

 

最後にもう一度。

 

カエレバ、ヨメレバ、トマレバの開発者であるかん吉さん

Yukihy Life運営のゆきひー（id:ftmaccho）さん

えむしとえむふじんがあらわれた運営のえむしとえむふじん（id:mshimfujin）さん

 

ありがとうございます！

 

おわり！

 

ブロガーのサブ機におすすめ！激安２in１タブレット「Chuwi Hi10 Pro」についてはこちらの記事から↓

www.akane1033.com

 

伊香保温泉にある「ホテル金太夫」についてはこちらの記事から↓

www.akane1033.com

コメント

  1. kirinup より:
    2017年7月7日 8:06 PM

    このレベルでど素人なんですか!!!　すでについていけない自分が悲しい…^^;同年代のオヤジでこういう系好きなやつに言わせると、見慣れないだけで、弄っているうちにわかってくる、というのですが….^^;

    返信
  2. akane1033 より:
    2017年7月8日 6:46 AM

    きりんあっぷさん、コメントありがとうございます！
    いやいや、本当に私は合体させただけなんですよ（汗） すごいのは、こういうコードを書けちゃう方々です！
    そうなんですよ！私も最初は何のことかサッパリだったんですが、よーく見てみると英語表記だし、いじってるとほーんの少しだけ分かるようになります！
    この機会に本を買って勉強もしてみたいなぁとは思うんですが、、、うーん、どうもこういうのはとっつきにくいですね^^;

    返信
  3. e-wave より:
    2017年9月30日 7:27 AM

    使わせていただきました。期待したとおりの結果でした。あざーっす！

    返信
  4. akane1033 より:
    2017年9月30日 6:18 PM

    電磁波モードさん、コメントありがとうございます！
    使っていただけて、そして紹介までしていただいて嬉しいです(*ﾟ▽ﾟ*)
    こちらこそ、ありがとうございます♬

    返信
  5. mochi-mochi-kun より:
    2018年1月15日 1:15 AM

    カエレバを導入するにあたってスマホ版のカスタマイズについて調べていたら辿りつきました。
    おかげさまでスマホ版の商品リンクがすっきりと見やすいレイアウトになりました。
    ありがとうございます(^ω^)
    これから過去記事の貼り替え作業してきますｗ

    返信
  6. akane1033 より:
    2018年1月15日 3:05 PM

    桜餅さん、コメントありがとうございます！
    使っていただけて嬉しいです(о´∀`о)
    この記事通りデザイン設定のページにコードをコピペしたのであれば、過去記事に貼ったカエレバのデザインも自動的に変更されますよ！なので何もする必要はありません^^ チェックしてみてくださいね！

    返信
  7. yacchyhiroshima より:
    2018年9月27日 4:39 AM

    初めまして！広島に住むやっちぃ＠と申します♪
    「トマレバ」のカスタマイズをされている方に巡り会えず困ってたところに、
    こちらのブログへとたどり着きました。
    今回紹介して頂いたトマレバのカスタマイズを使わせて頂きます！
    ご紹介して頂き、ありがとうございました♪

    返信
  8. akane1033 より:
    2018年10月1日 6:07 PM

    やっちぃ@さん、コメントありがとうございます！
    「トマレバ」のカスタマイズしてる人ってなかなか少ないですよね(^◇^;)
    使っていただいて嬉しいです♬ありがとうございます(o^^o)

    返信
  9. fc090031 より:
    2018年11月6日 10:47 AM

    使用させていただきました。
    大変分かりやすく助かりました。
    ありがとうございます！

    返信
  10. akane1033 より:
    2018年11月6日 9:16 PM

    おくおおさん、コメント&使ってくださりありがとうございます！
    もし不具合があったらぜひ報告してくださいね♬

    返信
タイトルとURLをコピーしました