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

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

カエレバ、ヨメレバのカスタマイズに挑戦
アフィリエイトをやっている人なら誰でも知っている「カエレバ」「ヨメレバ」ですが、そのまま使う人は少なくて、リンクをボタンにするなどカスタマイ...

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

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

スポンサーリンク

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

背景に色を付けます。

背景に色付け

文字を白くします。

文字を白くする

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

アンダーラインを消す

太字にします。

太字にする

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

横に並べます。

横に並べる

高さを合わせます。

高さを合わせる

内側に余白をとります。

内側に余白をとる

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

外側に余白をとる

横幅を揃えます。

横幅をそろえる

文字を中心に寄せます。

文字を真ん中に寄せる

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

角を丸める

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

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

今日のまとめ

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

スポンサーリンク

シェアする

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

フォローする