ヨメレバ・カエレバのデザインを分かり易く、スマホ対応にカスタマイズしよう！
Author:
費用：0円 時間：10分
カエレバというブログサービスは、物販アフィリエイトに欠かすことができませんね！
既定だと上の画像のような感じ。悪くはないですね！
しかし、カエレバをもっと自分好みのデザインに変えたいですね。
予定としては各サイトリンクをボタンのように大型化してクリックしやすくして、スマホ対応にします。
sponsored link
前提条件
まず、前提としてカエレバ・ヨメレバのデザインは、amazlet風(改)-3を利用します。
理由としては、サイトリンクのコマンドが横並びになっていることなどが挙げられます。
そして、イメージですが、画像大でもおｋなようにしています。
スマホの場合は、画像の下に商品情報が表示されるように設定します。
そして最終形は以下のような形です。
ということで、簡単に解説をしたいと思います。
編集方法
WordPressの場合、
WordPress管理画面＞＞外観＞＞テーマの編集 を選択し、 style.cssを編集しましょう。
そして、コードの最後の部分に以下のコードを書き足しましょう。
.booklink-link2 a, .kaerebalink-link1 a{
text-align: center;
display:block;
padding-top:10px;
padding-bottom:10px;
width:99%;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-weight:bold;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
}
.booklink-link2 a:active , .kaerebalink-link1 a:active{
position:relative;
top:1px;
}
.booklink-box, .kaerebalink-box{
border:double 2px #c0c0c0;
padding:3%;
margin-bottom:30px;
}
@media only screen and (max-width: 510px) {
.booklink-info, .kaerebalink-info{
clear:both;
}
.booklink-info div, .kaerebalink-info div{
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
display:block;
text-align: center;
margin:0 auto;
}
.booklink-image, .kaerebalink-image{
margin:0 20% !important;
}
}
メディアクエリの大きさはサイトによってことなるかもしれませんが、これでこのサイトに実装しているようなカエレバ・ヨメレバになります。
みなさんも、ぜひお試しください！
