読者です 読者をやめる 読者になる 読者になる

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

ブログのデザインをカスタマイズ

ブログのデザインを少し弄ってみました。
CSSはまるっきしわかんないので、いろんなとこを参考に真似してみたり、勘で適当にいじってみたり。

日付の位置を変更する

↓を参考に、日付表示を記事タイトル上部に移動しました。
http://ymkn.hatenablog.com/entry/2013/03/04/231934
今まで、左側に日付が表示されてできていた、無駄な余白がなくなります。

参考にしたリンク先では、mainの部分の幅を変えてましたが、
このように、今までの日付表示があったbox1の幅を0にして記事の領域を広げました。

.entry-header .date {
  position: relative;
  left: 0px;
}

.entry-header-menu a {
  top: 4px;
  left: 120px;
}
#box1 {
    width: 0px;
}
#wrapper #main {
    width:auto;
    float:left;
    padding:20px;
}

幅調整

ブラウザの表示サイズに合わせてある程度サイズが可変になるようにしました。
↓を参考に、勘で適当にやってます。
http://kyabana.hatenablog.jp/entry/2013/04/04/133728

ブラウザの幅を広げたときに、スーパーpre記法とかで書いたコードがスッキリと見渡せるのがいい感じです。
今回カスタマイズした結果は以下の通り。

.entry-header .date {
    position: relative;
    left: 0px;
}

.entry-header-menu a {
    top: 4px;
    left: 120px;
}

#box1 {
    width: 0px;
}

#wrapper #main {
    width: auto;
    float: none;
    margin-right: 200px;
    padding: 20px;
}

#container {
    width: 80%;
    min-width: 700px;
}

#content-inner {
    zoom: 1;
}

#content-inner:after {
    content: '';
    display: block;
    clear: both;
}

#wrapper {
    float: left;
    width: 100%;
    margin-right: -200px;
}

#box2 {
    float: right;
    width: 180px;
}

div.section pre.code{
   font-size: 90%;
}