読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

Railsでロシア語単語帳ver2.0を目指す day.2 レイアウト改修

chuckです。

ロシアップ改修案件。とは言え、金曜の夜なので控えめに。デザイン変更に留めます。

 

russiup.herokuapp.com

 

chuckwebtips.hatenablog.com

 

 

変更するの

TOP画面です。

f:id:chuck0523:20151009211616p:plain

 

ここです。

f:id:chuck0523:20151009211632p:plain

このaタグ丸出しのリンクを改修します。

 

まずHTMLから

いまはこう。

f:id:chuck0523:20151009211816p:plain

 

まずclass属性をつけます。

link_to - リファレンス - - Railsドキュメント

 

f:id:chuck0523:20151009211900p:plain

コロンとclassでクラスをつけるんでしたね!

 

f:id:chuck0523:20151009212048p:plain

つけました。

 

CSS

書きました。

f:id:chuck0523:20151009214750p:plain

 

結果

こんな感じに。

f:id:chuck0523:20151009214810p:plain

 

申し訳程度のhover

f:id:chuck0523:20151009214833p:plain

 

所感

いまさらだけど、TOP画面に「単語一覧選択」があるのはおかしい気がしてきた…。

単語帳だから、「すぐに単語が見れる!」を売りにしようと思ったんだけど、ちょっと変更した方がいいかもしれない。

 

というわけでデザイン変更でした。

 

書いたSass

gistd03172f10577bbd64418