CSSでブログの見た目をカスタマイズ

ブログの見た目を変えた．今までは公式テーマのnaturalを使っていたが若干修正した．その時のメモ．
blog.hatena.ne.jp

naturalのデザインがシンプルかつ落ち着いた色合いで気に入っていたが，サイドバーがブログの下側に表示されるのがちょっと嫌だった．

サイドバーは横に表示した方が便利だと思う人間なので，どうにかカスタマイズできないか調べたところ，次のサイトにまんま答えが載っていた．
notshown.hatenablog.jp

さらに，横に表示したサイドバーと本文の間に境界線が欲しかったので，次のサイトを参考に境界線を引いた．
chipspd.hatenadiary.jp

最終的に次のようなCSSコードを使えば良いことがわかった．

#container {
  width: 80%;
  overflow:auto;
}
#wrapper {
  float:left;
  width:70%;
}
#box2 {
  float:left;
  width:10%;
  border-left:1px solid #50B5B5;
  padding-left:2%;
}

テーマをはてな公式のnaturalにし，設定からカスタマイズcssに上記コードをコピペすると今のブログのような見た目になる．
線の色は記事タイトルと同じにした．色見本が見つからなかったので，chrome拡張機能のColorPick Eyedropperというものを使って調べた．

調べているうちに，はてなブログで使われているクラスについてまとめた記事を発見した．
kyabana.hatenablog.jp
この内容にそってCSSを追加していけば，さらにオリジナルのデザインへとカスタマイズできそう．