仮想サーファーの波乗り

仮想サーファーの日常

プログラミング・SNS分析・仮想通貨・自動化などに関してよく書く雑記ブログ

はてなブログのトップページのデザインを大幅に変更したよ


突然ですが、ブログのタイトルとトップページのデザインを変更しましたー( ´ v ` )ノ


f:id:virtual-surfer:20181120013740p:plain


以下、変更点。基本的にはPCアクセス時のデザインのみの変更。

・タイトルを「仮想化エンジニアの日常」→「仮想サーファーの日常」に。
・ブログ全体の色合いを2~3色に統一。
・メニューの下にオススメ記事が常時表示されるように。
・noteの紹介画像をプロフィール下に追加
...etc

結構いろいろいじりました〜( ・v・)b


自分のブログのデザインをいじったのは半年ぶりくらい...?? で、もはやCSSの書き方も忘れていたので苦戦しましたがGoogle先生を頼りながらなんとかデザイン調整完了しました。つかれた。いろいろいじってたら3日くらいかかってた。


今回、はてなブログのトップページのデザインを変更するにあたって、どのような手順で進めたのかメモしておきます。「今からはてなブログのデザイン調整するぞー!!」という方の参考になれば!


はてなブログのデザイン調整の手順

はてなブログのデザインを変更する上で、以下の流れで進めました。

①ブログの目的を考え直す
②よく読んでいるブログのデザインで好きなものを選ぶ。
③参考にするブログのデザインのいい部分を取り入れる。


①ブログの目的を考え直す

長期間ブログを運営していたせいか最近はブログ記事を書くこと自体が目的になってしまい、「なぜブログを始めたのか?」「ブログを通して何をしたいのか?」を見失ってしまっていました。

自分がブログを書くことになったきっかけを思い出し、「なぜブログを書くのか」をまずは考え直し。


ブログ開設当初に書いた記事を読み返すと、ぼくはブログを「日常で気になったことを仮説・検証した結果を発信する場」として捉えていたことを思い出しました。

www.virtual-surfer.com


記事を毎日更新することを目的にするとただただしんどいので、自分が試してみて面白かったこと・発見したことをメモしておくための場所としてこのブログを書いているんだなと目的を再確認。


②よく読んでいるブログのデザインで好きなものを選ぶ。

普段読んでいるブログの中で、読者視点で「読みやすいなあ...!!」と思うデザインのブログを選びました。


20個前後のブログのデザインを見ていきましたが、ヒトデさんのブログのデザインがダントツで読みやすいなと。デザインを参考にさせてもらうことに決めました。


今日はヒトデ祭りだぞ!(Powered By ★←ヒトデさん)

www.hitode-festival.com


③参考にするブログのデザインのいい部分を取り入れる。

②で、参考にしたいブログを決めたので、そのブログのHTMLやCSSを読んでどのようにデザインが組まれているのかを観察。


普段サーバーサイドエンジニアとして働いているので、ここ1年くらいCSSやHTMLのプログラミングはやってなかったこともありコードを読むのに超苦戦しました。が、気合いで読む。


具体的には、Chromeのブラウザの検証ツールを使い、どのHTML要素にどのスタイルが適用されてそのデザインになっているのかを見ていきました。


まとめ

以上、「はてなブログのトップページのデザインを変更する時に参考にしたブログと手順」でした。


どのようなCSSとHTMLを書けば同じようなデザインを作れるのか、後日気が向いたら記事にしますね( ・v・)b


では!