A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

ヨメレバ・カエレバのデザインを分かり易く、スマホ対応にカスタマイズしよう!

   

費用:0円 時間:10分

カエレバというブログサービスは、物販アフィリエイトに欠かすことができませんね!

カエレバ・ヨメレバを使って、商品紹介を効率的に買いやすく売りやすく!
費用:0円 時間:5分 記事の中で商品紹介をしたいときってありますよね。 俺の場合、基本的に...

初期状態

既定だと上の画像のような感じ。悪くはないですね!

しかし、カエレバをもっと自分好みのデザインに変えたいですね。

予定としては各サイトリンクをボタンのように大型化してクリックしやすくして、スマホ対応にします。

sponsored link

前提条件

まず、前提としてカエレバ・ヨメレバのデザインは、amazlet風(改)-3を利用します。

理由としては、サイトリンクのコマンドが横並びになっていることなどが挙げられます。

そして、イメージですが、画像大でもおkなようにしています。

スマホの場合は、画像の下に商品情報が表示されるように設定します。

そして最終形は以下のような形です。

ということで、簡単に解説をしたいと思います。

編集方法

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;
}
}

メディアクエリの大きさはサイトによってことなるかもしれませんが、これでこのサイトに実装しているようなカエレバ・ヨメレバになります。

 

みなさんも、ぜひお試しください!

 - アフィリエイト, プログラミング

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事