十を聞いて一を知る

要領の悪い高専生がプログラミングをします。

ブログのデザインを変更してみる

こんばんは。
二日目から早速遅刻です。

まずヘッダーを変えていきます。
f:id:taira1999120:20170226232454p:plain
緑部分(パディングは)ここで、
f:id:taira1999120:20170226230810p:plain
点々はここで指定してあるので、
f:id:taira1999120:20170226230813p:plain
デザインCSSで以下のように指定します。

#blog-title #blog-title-inner {
    background: none;
}

#title {
    padding: none;
}

するとこうなります。
f:id:taira1999120:20170226233018p:plain


デザインCSSで以下のようにパディングを指定し直すと、

#blog-title {
    padding: 32px 0 32px;
}

こうなります。
f:id:taira1999120:20170226233350p:plain



カテゴリが赤背景なのがちょっと浮いてるように見えるので、
このテーマのメインカラー、紺色に変更します。
f:id:taira1999120:20170226234054p:plain
ここで指定してあるので、
f:id:taira1999120:20170226234235p:plain
これを以下のようにすると、

.categories a {
    color: #102e83;
    border: solid 1px #102e83;
    background: none;
}

こうなります。
f:id:taira1999120:20170226234835p:plain


さて、次は文字を少し大きくします。
タイトル、本文共にパーセントで指定されていたので、共通の親要素である div #container に文字の大きさを指定します。

#container {
    font-size: 18px;
}

それに合わせて div #wrapper のwidthを変更します。

#wrapper {
    width: 650px;
}

これが
f:id:taira1999120:20170227000728p:plain

こんな感じになります。
f:id:taira1999120:20170227000739p:plain

以上です。お役に立てれば幸いです。
はてな記法で書いてみたら段落分けし辛いし、画像のプレビューされないしで踏んだり蹴ったりでした。
推敲もしてないしグダグダなので後日修正します。

スクリーンショット撮るのがかなり手間でしたし、修正するのはもっと手間でした。
自分でもやるようになって先輩方のすごさがわかります。効率化せねば。
というあたりで失礼します。
また明日。