カエレバ、ヨメレバのリンクをボタンにする方法を一歩ずつ解説するよ

前回は枠線と文字の配置、大きさを変更しました。

簡単に複数のアフィのリンクを貼ることのできるカエレバですが、デザインをカスタマイズすることができます。今回はCSSを変更して、カエレバに枠線を付け、影を付けること方法を一から紹介します。

今回はリンクをボタンにすることに挑戦しようと思います。

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

「カエレバ」リンクをボタンに変更しよう

背景に色を付けます。

背景に色付け

文字を白くします。

文字を白くする

アンダーラインを消します。

アンダーラインを消す

太字にします。

太字にする

display: block;で余白もクリックできるようにします。

横に並べます。

横に並べる

高さを合わせます。

高さを合わせる

内側に余白をとります。

内側に余白をとる

外側にも余白をとります。

外側に余白をとる

横幅を揃えます。

横幅をそろえる

文字を中心に寄せます。

文字を真ん中に寄せる

少し硬いので角に丸みをつけます。

角を丸める

ボタンにカーソルが乗ったときに色が変わるようにします。

カーソルが乗ると色が変わる

今日のまとめ

これでPCでの変更は大体できたのではないでしょうか。後はスマホ対応ですね。

シェアする

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

フォローする