カエレバ、ヨメレバをCSSでオシャレにカスタマイズする方法

どうもこんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

多くのブロガーがお世話になっているであろうかん吉さんのカエレバやヨメレバ。
Amazonやヤフーショッピングなどのリンクをおしゃれに飾ることができる便利ツールです。

そのままでも十分使えるんですけど、少し手を加えたいなと思うことありませんか?

Before便利なんだけどちょっと寂しい気も・・・

今回はもっとおしゃれにカスタマイズするCSSをご紹介しますね。

追記:
2020年4月現在、カエレバは利用していません。当時の雰囲気としてお楽しみください。

CSS

CSSはPC用とスマホ用の2つに分けて紹介します。

あ、そうそう、CSSに変更を加えることになるので事前に子テーマの準備とCSSカスタマイズを確実に反映させる方法に目を通しておいてください。

また、今回のCSSコードはカエレバでamazolet風-2を選択している必要があります。
それ以外だとレイアウトが崩れる可能性があるので注意!

カエレバ

次のコードをスタイルシートにコピペしましょう。

PC用

/*————————————–
ヨメレバ・カエレバ(PC)
————————————–*/
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;

}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
border: solid 1px #808080;
box-shadow: 0px 0px 5px #808080;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 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: #ff9901;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 2px solid #FF9901 !important;background: #f5dfc1;}
.shoplinkrakuten a{color:#c20004 !important;border: 2px solid #c20004 !important;background: #e6bdbe;}
.shoplinkkindle a{color:#007dcd !important;border: 2px solid #007dcd !important;background: #b2d8f0;}
.shoplinkkakakucom a{color:#314995 !important;border: 2px solid #314995;background: #9ba6c7;}
.shoplinkyahoo a{color:#7b0099 !important;border: 2px solid #7b0099 !important;background: #b687c2;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

スマホ用

続いてスマホ用はこちら。

/*————————————–
ヨメレバ・カエレバ(スマホ)
————————————–*/
@media screen and (max-width: 480px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% – 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}

これでオッケー!
あとはキャッシュを削除してページを更新してみてください。こんな風に見た目が変わりましたよね。

PC表示

After

スマホ表示

IMG 7375

PC表示だとボタンは横並び、スマホだとレスポンシブ対応になって縦に並んでます。

STORK(ストーク)サイトでも紹介されてるけど

実はこのブログのテーマを販売するOPEN CAGEのサイトでもカエレバ、ヨメレバのCSSカスタマイズコードって紹介されてます。

でもあれはamazlet風(改)-1が対応になってるんですよね。

今までずっとamazlet風-2でリンクを貼っている僕のような人が使うとデザインが崩れちゃいます。

今までのリンクを張り替えるのも面倒なので、amazlet風-2を使ってる人にはぜひ利用してほしいCSSです。

さらにカスタマイズする

上で紹介したコードにさらに手を加えるともっと自分好みのスタイルに仕上げることができます。

次を参考にしてみてください。

枠線を変える

今のカスタマイズでは細い2本の線で枠を作っていますが、これを変更した場合は「.booklink-box, .kaerebalink-box」の部分に書いてある border をいじりましょう。

Border

ここでは枠線の種類太さを指定することができます。

僕は枠線の種類(double:二重線)と色(#CCC:灰色)しか指定していません。
ちなみにborderの構成はこんな風になってます。 

Borderdetail

あとは自分の好きなように指定することで思い通りの枠線を作ることができます。

枠線の種類

枠線の種類はこちら。

  • solid(実線)
  • dotted(点線)
  • dashed(破線)
  • double(二重線)
  • groove(谷型)
  • ridge(山型)
  • inset(左と上が濃い)
  • outset(右と下が濃い)

色を決める

色は16進数で指定すると細かい調整が可能です。

こちらの原色大辞典を参考にして好きな色を選んで#から始まる番号を書き換えましょう。

背景に画像を設定する

枠線の中に画像を入れることもできます。

これもさっきと同じように.booklink-box, .kaerebalink-boxから始まる部分に次のコードを書き加えます。

background: url(http://sakura.png);
background-size: cover;

こんな風になります。

Ex

url(http://〜)から始まる部分はアップロード済みの画像URLを指定します。

さらにbackground-sizeをcoverに設定することで枠いっぱいに画像が広がるようになります。

僕はこの部分に季節を感じる画像を入れていて、今の時期なら春の桜ですね。

ピンクの背景にうっすら桜が見えて季節感を演出しています。 

ボタンの見た目を変更する

アマゾンリンクやヤフーショッピングリンクのボタンを変更することも出来ます。

先ほど追加したCSSの中に「ボタンを変えるときはここから」という項目があります。

そこに shoplinkamazon や shoplingrakuten などという単語がありますので、さっき勉強した枠線の種類や16進数で色を指定することにより自由にアレンジできます。

Ex2

色々変更してオシャレなカスタマイズに挑戦してみましょう。

比べてわかる!カスタマイズの大切さ

それではここでカスタマイズしてない時とした時を比べてみることにしましょう。

カスタマイズなし

Before

カスタマイズを加えてないとシンプルで見やすいですが寂しいですね。

カスタマイズあり

After

CSSでカスタマイズした場合。
リンク先のボタンも見やすく、ついクリックしたくなるようなデザインです。 

さらにカスタマイズ

After2

そしてこれは背景に画像を設定した場合のカスタマイズ。
挿入する画像を選ぶ必要はありますが、見た目のインパクトが違いますね。

このあたりはお好みでどうぞ。

こうやって比べてみてもやっぱりカスタマイズしたほうがいいなと感じます。

CSSでカスタマイズしているブログはたくさんありますが、今回のように画像まで指定しているケースは珍しいかもしれませんね。

まとめ

導入するのはちょっとハードルが高く感じるかもしれませんが、一度設定してしまえばあとは楽ちん。

デザインはクリック率にも影響を与えるため少しずつ調整しながら親しみやすいカスタマイズを実現しましょう!

ゆーすけ(守屋祐輔)

ゆーすけ(守屋祐輔)

複業サラリーマン

会社員×ブログ×デザイン×講師×投資の5つの働き方・稼ぎ方を実践する複業サラリーマンブロガー ▼複業で立ち上げたご署名ネットではこれまで1,600人以上、11,000点以上の作成実績。TV, ラジオ, 雑誌など出てます。▼経験から学んだノウハウや考え方、自分の人となりがわかる記事をお届けします

FOLLOW

カテゴリー:
関連記事