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

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

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

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

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

スポンサーリンク

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

「ヨメレバ」をブログに貼るとこんな感じに表示されます(amazlet風-1(改)を選択しています)。Kindleや他のショッピングサイトへのリンクも貼ることができます。Amazonアソシエイトや楽天アフィリエイトにも使えます。
ヨメレバのamazlet風-1(改)
CSSをカスタマイズすることによってデザインを自分のお気に召すがままに表示することも可能です。

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

amazlet風-2(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カスタマイズです。どのようにいじったかの説明ははしょりますが、僕が思うがままに、ああだこうだやったらこのように表示できるようになりました。
ヨメレバのCSSをカスタマイズしてボタンっぽくした
クリックするときはこんな感じで色が変わります。(amazonにカーソルを合わせたところ)
ヨメレバのCSSをカスタマイズ、クリックで色変わる
特徴はamazonとKindleと楽天市場へのリンクをボタンっぽくすることで、クリックしやすくしています。あとはボタンをシンプル&適度な大きさにして目立ちすぎないようにしています。

今の時代はスマホからブログを見る人のほうが多いようなので、スマホからの見え方も気にしてみました。Xperia Z1で見たらこんな感じに綺麗に表示できました。
ヨメレバをCSSカスタマイズしてスマホから見たところ
ボタンがデカデカとしていなくていいです。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)の中に上のソースをコピペすれば、ボタンのようになりますよ。

まとめ

今回はいろいろと試行錯誤をしてボタンのようにできました。僕が作ったCSSをそのまま使ってもいただいてOKです。みなさんもデザインの好みはあると思うので、「amazlet風-2(cssカスタマイズ用)」を「amazlet風-1(改)」にするCSSから徐々にカスタマイズしてもいいと思います。

カスタマイズといっても、僕はショッピングサイトのリンクあたりしかCSSをいじっていません。それなのにあれだけ見た目が変わりました。

ちなみにCSSカスタマイズによってクリック率が上がったかどうかですが、クリック率の見方を知らないので何とも言えません(笑)。こんなオチですいません。

コメント

トップへ戻る
タイトルとURLをコピーしました