今月公開したポートフォリオサイトに少しずつ機能追加や修正しながらブラッシュアップをしています。 昨日は以下のデザイン修正をしました。
修正したかったところ
まずは before はこちらです。
- 前半のパートが文字文字していてぼやけている。
- Skillのラベルを表現した青色が強く、ボタンに見える（押せそう感がある）
- ポートフォリオの余白が詰まって見難い
といったところを直したいと思いました。
修正しました
after はこちらです。
「前半のパートが文字文字していてぼやけている」の修正
背景にグレーを引いたのと dl 要素のレイアウトを変更しました。
「Skillのラベルを表現した青色が強く、ボタンに見える（押せそう感がある）」の修正
Skillのラベルは、左右を斜めに切って横に一行並んだような感じにしました。
左側は、トゲトゲ痛そうな感じがしたので、行頭にくる要素だけは垂直にしました。
斜めに切る角度は、ロゴマークで使われている角度と合うようにしてページ中のラインの角度が統一されるようにしました。
「ポートフォリオの余白が詰まって見難い」の修正
ポートフォリオは左右互い違いになるようにして、かつ余白を大きく取りました。
見出しと、一番目のポートフォリオの間の余白も、他の見出しの余白ルールを破ってここだけ大きくとっています。
終わり
次はヘッダ部分をなんとかしたいのと、SNSへのリンク部分をナントカしたいと思っています。 よろしければページも見てください。