30代エンジニアが週に1つ目標挑戦します!!

30代エンジニアが週に1つ目標挑戦します!!

30代エンジニアが1週間に1つ目標を決め、それに向けて努力するブログです。

【10/9週目標進捗確認】ブログデザイン改善状況の確認

 

f:id:hidemaru_1988:20211009142943j:plain

こんにちは、ひでまるです。

 

今週は、ブログデザイン改善を目標に掲げています。

 

hidemaru-1988-sub.hatenablog.com

 

週末になりましたので、その内容を確認していこうと思います。

 

変更点その1 サイドバーの囲み追加 & アイコン追加

f:id:hidemaru_1988:20211010132149j:plain

 

もともとは、吹き出し風にしていたのですが、アイコンを付けるとうまくいかなかったので、吹き出しはあきらめて囲みのみにしました。

 

また、アイコンは『Awesome』というところのアイコンを使っています。

 

変更点その2 見出しデザインの設定

f:id:hidemaru_1988:20211010132515j:plain

上の画像でいう、CSS変更前後の比較という部分のデザインですね。

なるべくシンプルにしつつも、内容を強調できるように考えてこのデザインにしました。

 

また、ブログ全体の色合いも統一するという点にも気を配っております。

今のところ、目次を付けたり、見出しを細かく階層分けしようとは考えていませんので、大見出しのみ設定しております。

 

変更点その3 グローバルメニューの追加

f:id:hidemaru_1988:20211010132902j:plain

これは、ブログの上にカテゴリを表示する機能で、メインとなるカテゴリを表示していこうと思っております。

 

このメニューにもアイコンを設置しつつ、色はシンプルでブログ全体との統一感をもたせるよう気を付けました。

 

このアイコンは、はてな専用のアイコンを使っています。

設定変更せずにすぐに使えるので、ぱっと使う分にはお勧めです。

 

変更点その4 トップに戻るボタンの追加

f:id:hidemaru_1988:20211010133233j:plain

真ん中下にある青い部分のマークです。

基本的にコードをそのまま張り付けるだけでできました。

こちらの記事を参考にしました。

redo5151.hatenablog.com

 

コードの中で、

position: absolute

となっている部分がありますが、こちらを

position: fixed

のように変更しました。

 

変更点その4 イラストではなく写真を多く使う

ブログ記事のアイキャッチ含め、写真を使うようにしました。

使う画像の系統を統一することで、ブログの雰囲気も統一できるのではないかと思います。

 

私自身の感想になってしまいますが、イラストより写真のほうがお洒落感が高い感じがします。出来れば、たくさん使っていきたいのですが、ダウンロード制限があったりするので、こまめに蓄積していく必要がありますね。

 

今後導入していきたいデザイン

今後導入していきたいデザインは色々あるのですが、

・記事一覧を見やすい形で表示する(アイコン+記事タイトルで並べる)

・文章中の装飾(ポイント!/マーカ他)

今週出来るところはここら辺まででしょうか。

色々作りこんでいく中でもっと改善点は出てくるのかなという気もしますが、シンプルであることは重要であると思いますので、いかに記事を見やすくしていくかという点がポイントになってくるのかなと思います。

 

まとめ

f:id:hidemaru_1988:20211010135953j:plain

今回の記事では、今週の目標の進捗状況を確認してきました。

今週末割と時間を取って、デザインをいじったので、それなりに整ってきたのではないかと思います。

 

記事中でも書いていますが、あとは如何に記事の内容を見やすくしていくかという点にこだわっていくことになるかと思っております。アドバイスなどあればコメントしていただけたらと思います。

 

ちなみにアクセスは微増です。

まだまだ副業といえるレベルに到達するには道は険しいですね。

 

それではまた次の記事でお会いしましょう!アディオス!