ヨメレバの見た目をカスタマイズしてボタンっぽくしたからクリック率上がるかな[CSS紹介]

2014.10.04 2014.10.01

このブログでは「ヨメレバ」という書籍紹介ブログパーツを使って、書籍や漫画を紹介しています。

書籍紹介ブログパーツヨメレバ

「ヨメレバ」を使えば、一瞬にしてAmazonや楽天などのショッピングサイトへのリンクが作れます。画像も入ってわかりやすいし、Amazonと楽天市場への両方のリンクを表示できる点がすばらしく、僕も利用させてもらっています。

「ヨメレバ」は「わかったブログ」を運営しているかん吉さんという方が作っていまして、本以外の商品を紹介する「カエレバ」、iPhoneアプリを紹介する「ポチレバ」もあります。

ヨメレバはこんな感じで表示される（見た目）
amazlet風-2(cssカスタマイズ用)を使ってカスタマイズに挑戦
1. まずは「amazlet風-2(cssカスタマイズ用)」を「amazlet風-1(改)」のようにする
2. 「amazlet風-1(改)」からボタンっぽくカスタマイズ
まとめ

ヨメレバはこんな感じで表示される（見た目）

「ヨメレバ」をブログに貼るとこんな感じに表示されます（amazlet風-1(改)を選択しています）。Kindleや他のショッピングサイトへのリンクも貼ることができます。Amazonアソシエイトや楽天アフィリエイトにも使えます。

CSSをカスタマイズすることによってデザインを自分のお気に召すがままに表示することも可能です。

今回はCSSをいじるのが好きな僕が「ヨメレバ」のCSSのカスタマイズにチャレンジしましたので、その一部始終を公開します。

amazlet風-2(cssカスタマイズ用)を使ってカスタマイズに挑戦

まず、これからヨメレバを使う時は「amazlet風-2(cssカスタマイズ用)」を使うことを心に決めます。
そして「amazlet風-2(cssカスタマイズ用)」で作成したソースをブログに貼るとこんな感じになります。

さきほどの画像と違ってそのまんま（何のデザイン性もなく）表示されます。

「amazlet風-1(改)」はHTMLにてstyle属性で画像やタイトルリンクなどに対して直接スタイルを指定することによってさきほどの画像のようになっていますが、「amazlet風-2(cssカスタマイズ用)」は何もスタイル指定していないので、そのまんまなのです。

この何のデザイン性もない状態から、CSSでカスタマイズすることによって、まずは「amazlet風-1(改)」のようにして、それからさらにはオリジナルなデザインにしていこうと思います。

はじめから「amazlet風-1(改)」を使わず、わざわざ「amazlet風-2(cssカスタマイズ用)」を使う理由は、「amazlet風-1(改)」を使ってカスタマイズした場合、「amazlet風-1(改)」で直接スタイル指定されたものが後から加えたCSSよりも優先されてしまうからです。

優先されないようにする方法（!importantを使う方法）もありますが、それがしちめんどくせえのでこの方法をとっています。

まずは「amazlet風-2(cssカスタマイズ用)」を「amazlet風-1(改)」のようにする

「amazlet風-2(cssカスタマイズ用)」を「amazlet風-1(改)」のようにする方法ですが、「amazlet風-1(改)」のHTMLでstyle属性でスタイル指定されていたものをCSSに書き換えるだけです。そうすれば「amazlet風-1(改)」になります。

「amazlet風-2(cssカスタマイズ用)」＋CSS＝「amazlet風-1(改)」ということです。

「amazlet風-1(改)」のHTMLテンプレートはこちらで見ることができるので、style属性をちまちま書き出していきます。それをまとめたものが下のCSSになります。

/************************************
** ヨメレバ
**amazlet風-2(cssカスタマイズ用)用
**amazlet-1にするCSS
**カエレバとの干渉解決済
************************************/

.booklink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.booklink-image{float:left;
margin:0 15px 10px 0;
}
.booklink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.booklink-name{margin-bottom:10px;
line-height:120%"
}
.booklink-powered-date{font-size:8pt;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-detail{margin-bottom:5px;
}
.booklink-link2{margin-top:10px;
}
.booklink-box div.shoplinkamazon{
display:inline;
margin-right:5px;
padding: 2px 0 2px 18px;
white-space: nowrap;
}
.booklink-box div.shoplinkkindle{
display:inline;
margin-right:5px;
padding: 2px 0 2px 18px;
white-space: nowrap;
}
.booklink-box div.shoplinkrakuten{
display:inline;
margin-right:5px;
padding: 2px 0 2px 18px;
white-space: nowrap;
}
.booklink-footer{clear: left;}

追記：カエレバのCSSをカスタマイズしてボタン化、ヨメレバのCSSとの干渉回避[CSS紹介]を踏まえて、上記CSSは書き直してあります。

「amazlet風-2(cssカスタマイズ用)」のソースコードをブログ記事などに貼って、上のCSSをスタイルシートに貼ると「amazlet風-1(改)」のソースコードを貼ったときと同じように表示されます。

WordPressでテーマはSimplicity（小テーマ含む）を使っている人は、外観→テーマ編集→Simplicity child: スタイルシート (style.css)の中に上のソースをコピペすればOKです。

「amazlet風-1(改)」からボタンっぽくカスタマイズ

ここからはオリジナルのCSSカスタマイズです。どのようにいじったかの説明ははしょりますが、僕が思うがままに、ああだこうだやったらこのように表示できるようになりました。

クリックするときはこんな感じで色が変わります。(amazonにカーソルを合わせたところ)

特徴はamazonとKindleと楽天市場へのリンクをボタンっぽくすることで、クリックしやすくしています。あとはボタンをシンプル＆適度な大きさにして目立ちすぎないようにしています。

今の時代はスマホからブログを見る人のほうが多いようなので、スマホからの見え方も気にしてみました。Xperia Z1で見たらこんな感じに綺麗に表示できました。

ボタンがデカデカとしていなくていいです。Xperia Z1を横画面で見た場合、パソコンで見るのと同じような表示のされ方になりました。

完成したCSSはこちらです。

/************************************
** ヨメレバ　amazlet風-2(cssカスタマイズ用)
************************************/

.booklink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.booklink-image{float:left;
margin:0 15px 10px 0;
}
.booklink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.booklink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.booklink-powered-date{font-size:11px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-detail{margin-bottom:5px;
}
.booklink-link2{margin-top:10px;
}
.shoplinkamazon{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#000;
}
.shoplinkkindle{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#ff8000;
}
.shoplinkrakuten{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#CC0000;
}
.shoplinkamazon a,
.shoplinkkindle a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 3em;
}
.shoplinkrakuten a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 1.5em;
}
.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;}
.shoplinkkindle a:hover{color:#FFFFFF; background:#ffd5aa;}
.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;}
.booklink-footer{clear:left;}

追記：カエレバのCSSと干渉しないCSSはこちらにあります→カエレバのCSSをカスタマイズしてボタン化、ヨメレバのCSSとの干渉回避[CSS紹介]

WordPressでテーマはSimplicity（小テーマ含む）を使っている人は、外観→テーマ編集→Simplicity child: スタイルシート (style.css)の中に上のソースをコピペすれば、ボタンのようになりますよ。