これでOK!カエレバ・ヨメレバで、もしもアフィリエイトを使う際のカスタマイズCSS

スポンサーリンク

これでOK!カエレバ・ヨメレバで、もしもアフィリエイトを使う際のカスタマイズCSS
カエレバヨメレバと、もしもアフィリエイトの組み合わせって非常に効率が良い!と俺は思っている。だってAmazon、楽天、楽天ブックス、7netのアフィリエイト報酬をひとまとめにできて無駄がない上に、一発でそれらのアフィリンクを作成してくれる。非常に便利で使わない手はないと思う。かん吉さまありがとうございます!もしも

まぁ、ただ、ほら…ちょっと言いにくいんだけどさ、初期デザインが…質素じゃん?もちっと、こう、オサレな感じにしたいじゃん?そんで、ググッて、カスタムを公開してくれてるありがたい御仁のソースを拝借するでしょ?

なぜか上手くいかないわけ。

ま、理由はわかったから後で説明するけどさ、これってもしも特有のトラブルだったりするわけ。これは他に困っている人いるんじゃね?って事で情報共有したいと思いまーす。

ん?ごたくはいいからはよソース出せって?せっかちなやつめ~

上手くいかない原因

上手くいかない大きな原因は、もしもアフィリエイトの広告リンクに1ピクセル画像が挟まっているからなんだけど、これはこれで必要っぽいんだよね。トラッキング的に使用されているからね。とにかくこれのせいでレイアウトが崩れているのは確か。広告リンクの改変は禁止なので、このままで何とかするしか無い!

公開されてるヨメレバ・カエレバ用のカスタマイズCSSっておそらく、もしもアフィリエイト使ってないからレイアウトが崩れていないのではないかと推測する。

さらさらりさん、ありがとうございます!

で、やっぱり俺は真面目系クズ人間であるからして、一からCSS組むとか正直めんどくさい…。パクると決めたら有用な情報がでてくるまで1日中でもサーチエンジンを回し続ける。いや、パクるというのは違うか。情報と情報を組み合わせて新しい情報を生み出す。かっこいいからそっちにしよう。

そして、その情報はググッて10分ほどで見つかった。

ヨメレバ&カエレバ ちゅんこさんのカスタマイズを、Gush2でやってみました。
目次1 ヨメレバ・カエレバは、WinWinなブログパーツ(^^)2 ちゅんこさんのカスタマイズはデザインが素敵(^.^)3 ちゅんこさんのコードからの変更点3.1 セブンネット用の記述を追加3.2 G
こちらのさらさらりさんのサイトで、元となった情報を確認できます。参考にさせていただきました!ありがとうございます!

ただ、俺が試した時はスマホで見た時にCSSが反映されない状態になってしまった。そこでメディアクエリの@media screen and (minwidth : 768px)は削除して使用しています。

ウチで使ってるCSSがこちらです

ウチと丸パクリで良ければそのままコピペしちゃってくださいな。

/*--------------------------------------
  ヨメレバ・カエレバ スマホ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
	width:85%;
	margin: 1em auto 1em auto;
	padding: 5%;
	border:double #CCC;
	overflow: hidden;
	font-size:small;
	background-color:rgba(68, 129, 191, 0.18);
}

.booklink-image, .kaerebalink-image{
	margin:0 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
	display:block;
	margin:0 auto 0 !important;
	text-align:center;
}

.booklink-info, .kaerebalink-info{
	text-align:center;
	line-height:120%;
	overflow: hidden;
}

.booklink-name, .kaerebalink-name{
	font-size:16px;
	margin-bottom:14px;
	line-height:1.2em;
}

.booklink-name a, .kaerebalink-name a{font-weight: bold;}

.booklink-powered-date, .kaerebalink-powered-date{
	 font-size:8pt;
	 margin-top:10px;
	 font-family:verdana;
	 line-height:120%;
}

.booklink-powered-date a, .kaerebalink-powered-date a{
	font-weight: normal;
	color:black;
	text-decoration: none;
}

.booklink-powered-date, .kaerebalink-detail{
	margin-bottom:15px;
}

.booklink-link2, .kaerebalink-link1{
	margin-top:20px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven, .shoplinkkakakucom {
        width:90%;
        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:block;
	margin:0  auto 5px auto;
	padding:10px 2px;
	text-align:center;
	}
	
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkkakakucom: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;
}

.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkkakakucom:active {
	position:relative;
	top:1px;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkyahoo a, .shoplinkseven a,  .shoplinkkakakucom a{
	text-decoration:none;
	font-weight:800;
	text-shadow:1px 1px 1px #dcdcdc;
	font-size:12px;
        display:block;      
}
	
.shoplinkamazon a{
	color:#FF9901;
}

 .shoplinkrakuten a{
	color:#c20004;
}

.shoplinkkindle a{
	color:#007dcd;	
}

.shoplinkseven a{
	color:#314995;	
}

.shoplinkkakakucom a{
	color:#314995;	
}

.shoplinkyahoo a{
	color:#7b0099; 
}

.shoplinkamazon img, .shoplinkrakuten img, .shoplinkkindle img, .shoplinkyahoo img, .shoplinkseven img, .shoplinkkakakucom img{
	display:none;
}


.booklink-footer{
	clear:left;
}


/*--------------------------------------
  ヨメレバ・カエレバ スマホ おわり
--------------------------------------*/

@media screen and (min-width : 1024px) {
/*--------------------------------------
 ヨメレバ・カエレバ PC
--------------------------------------*/
.booklink-box, .kaerebalink-box{
	width:90%;
	margin:20px auto;
	padding:20px;
}

.booklink-image, .kaerebalink-image{
	margin:0 15px 0 0;
	float:left;
}

.booklink-info, .kaerebalink-info{
	margin:0;
    text-align:left;
}

.booklink-name, .kaerebalink-name{
	/*margin-bottom:24px;*/
	line-height:1.5em;
}

.booklink-link2, .kaerebalink-link1{
	margin-top:10px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven, .shoplinkkakakucom {
    float:left;
    width:30%;
	margin:15px 2px 0 auto;
	padding:8px 1px;
}

.shoplinkyahoo a{
	 font-size:10px;
}
/*--------------------------------------
 ヨメレバ・カエレバ PC おわり
--------------------------------------*/

とりあえず、ウチはこれで動いてますが、ダメな所とかあれば教えて下さい!

こんな感じで表示されます↓

あ、もちろん「amazlet風-2(CSSカスタマイズ用)」を使ってくださいね!

スポンサーリンク



ABOUTこの記事をかいた人

jyakoten

好きなことで生活を目指すアラサーのじゃこてんと申します!このブログは身の回りに起きた事や興味のあること、好きなことで稼いだ事例などいろんな事を書いていく雑記ブログになります!