カエレバで出力した広告をレスポンシブ化する方法

アフィリエイト

2014.07.092017.06.07

（2017年6月7日更新）

引き続き、カエレバのカスタマイズ方法の記事です(≧∇≦)/

前回でカエレバ広告内の画像の大きさを変更する方法を記事にしましたが、これをするとスマホでデザインが崩れるデザイン形式が出てきてしまいました。

調べた限り、恐らく「amazlet風-2」と「もかり風-1」以外（左右に画像と文字が分かれるタイプ）はすべて崩れると思います。

でも、右側に文字があるデザインの方がなんとなくスッキリ収まる感じがするので、スマホ以外の画面が大きい端末では右側に文字を収納できるデザインにしたいと思いました。

という事で、手っ取り早く、レスポンシブデザインでその方法を実現。
以下に解説します♪

カエレバで出力した広告をレスポンシブ化したもののサンプル

前回の使用したちょっと大きいサイズVerをレスポンシブ化すると以下のようになります。

（実際にブラウザ幅が480px未満になると右側の文字列が下に落ちると思います）

V.A. WALT DISNEY RECORDS

CSSをいじります。

@media only screen and (min-width: 480px){
	.booklink-image,.kaerebalink-image{
		float:left;
		padding-right:20px;
	}
}

@media only screen and (min-width: 480px){

.booklink-image,.kaerebalink-image{

float:left;

padding-right:20px;

}

こんな感じでスタイルシートに書き加えてあげれば完成です。

もしくは、

<style>
@media only screen and (min-width: 480px){
	.booklink-image,.kaerebalink-image{
		float:left;
		padding-right:20px;
	}
}
</style>

<style>

@media only screen and (min-width: 480px){

.booklink-image,.kaerebalink-image{

float:left;

padding-right:20px;

}

</style>

上記をhtml内に記述すればOKです。

あと、カエレバ側のデザインは必ず「もかり風-1」にしてください。

まあ実際にはヘッダ領域なんかにもっと色々と設定しなきゃいけないんですけど、とりあえずこれで最近のブラウザなら正常に動いてくれると思います(^^A

まあ動かなくても、文字が画像の右側に回りこまないだけなんで、特に問題はないと思いますしヾ(ﾟДﾟ )ｫｨｫｨ

ということで、本日は以上！