cafe de nimben

見たものと、読んだもの

ブログのデザインを変えた

あんまり細かく変えようとするとドツボにハマるので、基本的なデザインは使わせてもらいつつ、ここだけは変えたいというところは変え、それ以外はちょっと目を瞑るという現実路線で。

 

テーマの変更

シンプルなレスポンシブデザインに今更したかったので、今のテーマを新規採用。

hitsuzi.hatenablog.com

採用理由は、デザインがとにかくシンプルなところ、レスポンシブなところ、そしてカスタマイズの方法が記述されているところ。

 

自分でちょっといじったところ 

このため、まずは自分のページのCSSを「検証」し、どういうエレメントにどういうCSSが当たっているのか調べ、自分好みの設定が来るようにする、という手段をとった

検証:chromeでエレメントとCSSの組み合わせを確認する

saruwakakun.com

はてなブログの変なところだと思ったのは、見出しが、

エントリーのタイトル:H1

大見出し:H3

と、なぜかH2がない順番になっているところ。H2探しちゃったよ。まあ、そういうものだと諦めるけど。H4以下はあんまり使わないので、デフォルトを採用ということで触らないことにした。

シンプルな画面では、見出しのジャンプ率が大事だと思っている。なぜか(これ以外のテーマでも)H1のフォントの大きさがH3のよりも小さいことがままある。この検証によると、H1のフォントサイズが17pxに固定されているのが問題点。

あと大見出しH3は、一工夫しないと、文字の大きさだけでは視認しづらいので、軽い装飾を入れることにする。

あと、カテゴリータイトルが、その上部に表示されるテキスト広告と紛らわしいので、上記H1と同じフォントサイズにすることにした。

エレメントが確認できたので、次はCSS.

CSSのプチカスタマイズ

CSSのいいところは、デザインを継承してくれるところだけれど、何世代も継承するうちにどれが強いんだっけ、というのがよくわからなくなるのが面倒なところ。今回はテーマ自体をカスタマイズするなんて大掛かりなことはしたくないので、ずるい小手先の設定変更をした。

saruwakakun.com

自分ではてなブログテーマを作るなら、上記の対応1or 2というのが正しい。でも私はこのH1/H3だけを直したいので、対応3を採用。

h1 {font-size: 200%!important;
}
h3 {font-size: 150%!important;
padding: 0.5em 0em;/*上下 左右の余白*/
}

.archive-entries .entry-title {
font-size: 200%!important;
}

H1@エントリータイトルは、フォントサイズ指定を強制上書きするために「!important」で優先度を強制的に上げる。(強制された優先度をさらに強制するので、あまり頭は良くないけどね)

ジャンプ率を上げたいので、200%に。

H3@大見出しは、ジャンプ率を上げつつも、明確にH1とは異なるようにと150%で対応。それだけだとちょっと見辛いので、前後に多少余白を入れるようにした。

ちょっと装飾を入れてみたが、不採用にした。

装飾を入れることで、画面のシンプルさが失われ、それだとそもそもこのテーマにした意味がない気がしてね。

archive-entries, entry-title は、カテゴリーや月別の表示にした時のH1の大きさを設定するもの。H1のフォントサイズは、本当はカテゴリーリストだから記事のよりは小さくした方が好き。しかし、広告はあくまで広告とわかるようにしたいちうことで。

その他

軽くしたかったのでSNS系のボタンは、はてなスターも含めて、全部外しました。シンプルで軽いという初期google的な感じで、読むべきところだけに集中できるようなデザインがいいかなあと思いましてね。

ではでは、ご縁がありましたら、今後ともご覧あそばせ。