facebookのログインリンクをボタン化する

前回でfacebookに嫌われてしまい、 若干拗ね気味ではあるものの湯水のごとく課題は出てくるので しばらく放置して、今回はfacebookログインの体裁を整える。

さすがに文字だけで見た目が残念なことになっているので 一旦、ボタンに変えてもっとわかりやすい表現にしたい。

とりあえず、facebookログインのファイルパスの後ろに ボタンのクラスをつける

<%= link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path, class:"btn btn-facebook" %>

そして今度はcssの方で色付け。

application.scssを開いて

.btn-facebook{ color: #FFF; background-color: #3B5998; }

これをbodyタグの上あたりに配置。

background-colorのコードはググったら出てきたので それを拝借。

これでブラウザを更新すれば反映されてるはず。スクリーンショット 2017-08-16 15.28.37.png

おぉ、それっぽい色になってくれてる。 しかし、行間がないのもなぁ。。 上下に<hr>入れてみるか・・。スクリーンショット 2017-08-16 16.30.49.png

ほんのり線が引かれたことによって 若干レイアウト的にも見やすくなった。

 

あとは見た目的にアイコンとかできた方がいいよなぁ。。 SNSには必要不可欠だし。

次でやってみよう。

 

よし今回はここまで

 

ではー。

この記事をシェアする