はてなブログのcssのソースの直接編集
はてなブログのcss(デザイン)に関してだが、
http://sesleria.hateblo.jp/entry/2013/05/04/012440の記事が秀逸。
cssのソースを公開している。アレンジすれば自分好みのデザインにすることができる。
「はてなが公開しているテンプレートテーマ」もリンクしている記事なので、非常によい。
とりあえずそのcssをそのままコピーして編集してみることにした。
頭でっかちなやり方ではあるが、むき出しのソースの方が細かい調整をする時は便利だと思う。
今のところ、横幅の調整や行間の調整をやっている。というかそれしかやっていない。
それぞれwidth、line-heightというところを見つければよい。
あとはそれが何処を変える命令なのか把握していけばいい模様。
widthは1000にしてみた。本当はもっと広くしたいのだが、やり過ぎるとブラウザによってはデザインが崩れるらしい。
で、左側は810、右側は180に。ピッタリにしすぎると、はみ出るかもしれないので、少し遊びを設けた。
このへんは、おそらくマージンをどれだけ設けたかに依存する模様。
たぶんピッタリにしても大丈夫だと思うが、何があるか分からないので、あえて余裕を設けてみた。
→変えた。いろんなものを使ってみる予定。結局、上のYunomiって奴がいいかも。ソースが短いから公式より使い易い。
→8月8日。公式のに戻した。迷走している。しばらくコロコロ変わるかもしれないので宜しく。
なお、widthに関してはスマートフォンやタブレットだと違うデザインになっているかもしれない。普通のパソコンを推奨環境としたい。
line-heightの方は1.5でどうか。前のブログがそんなもんだったんで。
行間は書き方でも変わるから難しいものですなぁ。
→1.4にしてみた。このあたりは微妙なところ。後に変わるかも。
→フォントサイズを88%に。その代わり行間を1.3にした(ここも変わるかもしれない)
でも何か字が薄いなぁ・・・明朝体とゴシック体の違いとか、色とかそんなのだろうか。
まぁこのへんは何処が何処に対応しているかの問題なので、ゆっくり考えていきませう。
あら、これ、IEとデザインが違う・・・オペラと文字の大きさが違う。
明らかに字の大きさが統一されていないね、これ。
→何かIEだと文字の間隔が広くなるね。というか微妙に字が大きい?
フォントの種類や文字間隔などの指定をしないとダメみたい。
フォントファミリーとやらをverdanaにしたら少し直った。でもサイドメニューはまだ変。
→font-familyをMS Pゴシックのみにしたら統一された。bodyから全て統一できるようだ。
(愚痴になるけど、IEのデザインセンスと表示の遅さ(重さ)って壊滅的だよね。最も使われているはずなのに最も酷い。)
追記:8月8日
リンクの色が気に入らないので調整してみた。
基本、colorという部分を探していく。リンクのタグはa。hoverやらvisitedやらがキーワード。
で、色は未訪問の場合は#0000FFにして、訪問済み(visited)の場合は#810081にした。
これはIEなどで見られる標準的なデフォルトの色。やはりこれが落ち着く。
追記2:8月10日
文字の色を黒色(#000000)にした。bodyの中のcolorに命令すれば変わる。
何か薄くてインパクトのない字だなぁと思ったら薄い黒色になっていたようだ。
因みに#000000は黒で文字、#ffffffは白で背景がデフォルト。覚えておきたい。