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

スポンサーリンク

The following two tabs change content below.

ゆーすけ(守屋祐輔)

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。早起き・朝活情報の早起きのプロ。クラシックミニ専門サイトの32miniドットコム

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

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

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

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

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

スポンサーリンク

CSS

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

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

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

CSSの変更が反映されない時の6つの対処法、教えます!

2017.03.02

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

スポンサーリンク

まとめ

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

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

スポンサーリンク


スタイリッシュなサイン、作ります!



世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に対応。

サービス開始からすでに170件以上のオーダーをいただいており、個人はもちろん、歌手、アイドル、俳優、プロスポーツ、経営層、出版、芸術など多種多様な業界からもご好評いただいています。

納品時には書き方のコツ資料、動画、サイン練習帳もお送りするので誰でも真似すればサインを書くことができます。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!