webページのデザイン変更、レスポンシブ対応しました！

time 2018/09/17
folder お仕事

友達のサイトのデザイン変更、レスポンシブ対応をしました。

http://iroha8net.blog.fc2.com/

いつもコミティアに参加して擬人化漫画を描いています（私じゃなくて友達が）。
友達のwebページを改変するのはこれで2回目くらいです。

fc2のきれいな和柄のテンプレートを使用していたのを、以前スマホでも見られるようにレスポンシブ対応したり、メニューボタンをつけたりしました

レスポンシブ対応とは、スマホのような狭い画面でwebページを見たときに、PC用デザインからスマホ用デザインに切り替わるようにすることです。
PC用デザインだけだと、スマホの画面にPC画面がそのまま小さくなったものが表示されたりします。文字が小さいし、クリックもしづらいです。
レスポンシブ対応すると、PCで見たときも、画面のサイズを変えたときにデザインが切り替わります。

サイト全体の色味変更、メニューボタンの位置変更、ハンバーガーメニューの実装などを行いました。

今回のデザイン変更では、メニューボタンの位置を、タイトル画像の下からタイトル画像の上、ヘッダー部分に持っていき、画面をスクロールしても上部に固定表示されるようにしました。
また、画面を狭くすると、メニューがハンバーガーメニューに切り替わり、クリックするとメニューが表示されるように変更しました。
あと、「TOPへ戻る」ボタンを右下に実装し、クリックするとスムーズな動きでページの上部に戻るようにしました（今までは、記事の下部や、コメント入力ページの下部にテキストリンクで入っていました）。
あとは、マウスオーバーすると、滑らかな動きで色が変わったり、矢印アイコンの位置が動いたり、画像がちょっとだけ拡大したりするようにして、リンクをわかりやすくしました。
あとは名刺を作った時のイラストをタイトル画像として（とはいっても背景画像として）配置しました。

今のサイトやブログデザインもいろいろ見比べて、今っぽい感じをところどころ取り入れるよう工夫しました。