もののもの

20台後半の無職デザイナー 。会社を勢いで辞めたので収入を得ようと奮闘してます! いつの日か移住することが目標! このブログは、ブログ、デザイン、フリーランス、商品紹介などについて記事を書いていきます。

ブログ初心者のデザインいじり CSS、Boilerplateを使ってみる

ブログを始めて四日目になりました。

ブログのデザインを触ってみたいと思います。

はてなブログはCSSをいじればいいようで、以前CSSをちょっと触っていたのでどうにかなりそう。

 

 

 

  

デザインのコンセプト

ひとまずどのようなデザインにするか決める上で、コンセプトを決めようと思います。

 

1、わかりやすい

視認性をよく

2、装飾的すぎず簡素すぎず

あまり装飾的でごちゃごちゃさせたくないのと、かと言ってシンプルになりすぎるのも嫌なので、ちょうどいいところをめざします。

3、多色での展開

始めのうちは、賑やかに、多色で展開したいと思います。

そのうちブログにあった色が 見つかったら、テーマカラーとして色数を絞る考えです。

  

テーマの変更方法

テーマに沿ったデザインにするための方法として、以下があります。

  1. テーマストアで探す
  2. テーマストアで探したものを改変する
  3. 一から自分でつくる

 

 まずテーマストアで探してみるも

なかなかこれだ、といった自分の好みのでデザインが見つかませんでした。。

2のテーマの改変でもありなのですが、はてなブログのデザインを改変するページが重すぎて、面倒くさそうなので諦めました。

 

一から作るろうとしていたら、Boilerplateを発見、とても好み

staff.hatenablog.com

 

いいものを発見しまいた。

はてなブログが自前で自作テーマ用のテンプレートを配布していまいた。

余計な装飾などなくとても好みでした。 

 少し味気ないので、このテーマを元に少し手を加えようと思います。

 

使い方

  1. リンク先、GitHubでCSSが配布してあるので保存
  2. CSSを開いてまるまるコピー、
  3. はてなブログの「デザイン設定」「デザインCSS」にまるまる貼り付け

 

 Boilerplateを元にいじってみる

見出しを変更

見出しが文字を大きく太くしただけだったので、変更してみようと思います。

 

参考記事

saruwakakun.com

www.okotono.net

 

 

ヘッダーの色を変更

テーマのままでは黒だったので、背景色と同じ白へ変更

 

参考記事

happylife-tsubuyaki.hatenablog.com

 

まとめ

思いのほか早く気に入ったデザインテーマが見つかったのでよかったです。

今後も暇な時にデザインを見直し、改善してきます。

 

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 
はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ