カエレバ、ヨメレバのカスタマイズに挑戦

アフィリエイトをやっている人なら誰でも知っている「カエレバ」「ヨメレバ」ですが、そのまま使う人は少なくて、リンクをボタンにするなどカスタマイズする人が多いと思います。今回はCSSの勉強を兼ねて自分でカスタマイズをしてみたいと思います。

最終的なCSSだけ欲しい方がいたらこちらです。

「カエレバ」「ヨメレバ」のカスタマイズ開始

カエレバ初期画面です。非常にシンプルですね。このままでは背景に同化してしまうので枠線をつけます。

カエレバに枠線を付けた

余白がないので窮屈な感じがします。余白を付けます。

枠線に余白をつけた

黒だと色がきついので、薄くしてみます。blackから#808080に変更

枠線の色を薄く

角を丸くします。border-radiusで丸みをつけます。

枠線の角を丸くした

枠線に影をつけたい。box-shadowで影をつけます。

枠線に影をつける

商品画像の右に商品名を表示したいと思いました。この場合は商品画像を左に寄せればいいのかと

二つのボックスがくっついた

二つの商品がくっついてしまいました。

ボックスの下にmarginをとって切り離します。

marginをとってきりはなす

画像と商品名がくっついて見にくいので少し間を開けます。

画像の右に余白を追加

キャノンの文字が下に来ています。overflow: hiddenでfloat要素を解除して並びをよくします。

floatを解除

文字を全体的に小さくします。

文字を一回り小さく

カエレバのリンクはもっと小さくてもいいかな。

カエレバをもっと小さく

商品名を目立たせるために大きくします。

商品名を大きく

今日のまとめ

どうでしょうか。何もしないよりは良くなったと思いたいです。この後、お店のリンクをボタンにするのと、モバイルに対応させなければならないですね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする