ブログのCSSをいじってみました。

こんにちは！株式会社スマレジ、開発部のmasaです。

今週はプライベートで色々と忙しく、少しバテ気味です汗。 それはそうと、桜が咲き出しましたね。 masaはこの時期になると、大学入試のことが毎年のように思い出されて、ちょっと涙腺が緩みます笑 実はmasaは3月のこの時期にようやく合格通知をもらえた人でして、色々とメンタルがギリギリだったのでホッとしていたのが思い出されます。

今日は見てわかると思うんですが、このブログのCSSをいじってみた話をします。

はてなブログのCSSをいじってみた。

前から殺風景なテーマだなとは思っていたんですが、変えようという気持ちにもあまりならなかった不思議。 まあ、前の無機質なデザイン性の薄い感じも実は嫌いではないのです。

CSSはこんな感じ。

/* <system section="theme" selected="life"> */
@import "/css/theme/life/life.css";
/* </system> */

/* <system section="background" selected="95a5a6"> */
body{background:#a5a5a5;}
#container{
    background:#eee;
    border-radius: 10px;
    color: #4a4a4a;
}

h2,h3,h4 {
    color: #4a4a4a;
}

h2 {
    border-left: 5px solid #a5a5a5;
    padding-left: 5px;
}

h3 {
    border-left: 4px solid #a5a5a5;
    padding-left: 4px;
}


h4 {
    border-left: 3px solid #a5a5a5;
    padding-left: 3px;
}

#header-body {
    background:#a5a5a5;
}
/* </system> */

CSSを入れるところ

はてなブログの管理画面から、デザイン設定 -> カスタマイズ（レンチのアイコン）を選んで、一番したの「カスタムCSS」を開いて、テキストボックスにスタイルを突っ込めばOK。

趣味ポイント

色

masaは灰色が好きなのです。灰色いいよね。 デザインセンスがなくても、なんかそれっぽくなる魔法の色だと思っています。 なので透明水彩とかのグレイッシュトーン系の色も好きです。個人で作成するときはよく使います。

ちなみに嫌いな色は特にないんですが、masaは昔から蛍光灯の光を見ていると頭痛がしてしまいまして、 ガンガンに照らされたオフィスとか、辛い人です。なので#ffffffは苦手です。目に優しくない色全般も苦手です。(#ff0とか）

containerクラスの背景色をbackground:#eee;で指定しているのもそのせいです。 ホワイトスモーク(#f5f5f5)くらいでも問題ないんですが、好みの問題です笑。

後、文字色も#000は目に刺さる感じがするのでちょっと灰色味にしています。

ヘッダ

h1とかh2にpadding-leftでちょっとだけ詰め物をして、色指定をしてあげるやつです。 古の時代からあるやつですよね。でもこれ好きなんですもの（今作っているスケジューラーアプリの見出しもこれ）

学生時代はもうちょっと凝って、付箋みたいな見た目とか作ったりして遊んでたこともあるんですが、 三十路に入ると、ごちゃごちゃしたものよりこういうのが良くなるんですかね。

border-radius: 10px;

角は丸いのが好きなのです。とんがっているものを見ると目が疲れるんですよね。。。 （目が疲れてくると、勝手に瞼が閉じてしまうこともちょいちょいありまして。。。）

作業時間

仕事の合間にちょちょっと変えたんで、所要時間は20分もない感じです。 ブログのテーマって初めて変えましたけど、サクッとできて楽しいですね。

また気が向いたら変えます。