初めてのブログ、まずはデザインから

私にとっても初めてのブログです。

いままでプログラミングはやってて掲示板とかよく作ってても自分で利用することは一切ありませんでした。

さて、cssですが自分はこのようになってます。

/*  */
@import "/css/theme/life/life.css";
/*  */

/*  */
body{ background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/F/Flopper/20170808/20170808010053.jpg'); background-repeat: no-repeat; background-color:transparent; background-attachment: fixed; background-position: center top;}
#container-inner{
    max-width:640px;
    margin:0 auto;
}
#container{
    background:none;
}
#content{
    padding:0!important;
}
.entry-date{
    text-align:left!important;
    font-weight: bold;
}
.entry-title{
    font-size:35px;
    color:rgba(0,0,0,0.9);
    text-align:left!important;
    font-weight:bold;
    padding:30px 0;
}
#title{
    padding:20px 0 0 0;
    font-size:13px!important;
    text-align:left;
    color:#2196f3;
}
#blog-title{
    padding:0!important;
}
.entry-content{
    border-top:1px solid rgba(0,0,0,0.2);
    padding:30px 0 100px 0;
}
@media screen and (min-width:480px) {
#container-inner{
    max-width:640px;
    margin:0 auto;
}
#container{
    background:none;
}
#content{
    padding:0!important;
}
.entry-date{
    text-align:left!important;
    font-weight: bold;
}
.entry-title{
    font-size:45px;
    color:rgba(0,0,0,0.9);
    text-align:left!important;
    font-weight:bold;
    padding:30px 0;
}
#title{
    font-size:15px!important;
    text-align:left;
    color:#2196f3;
}
#blog-title{
    padding:0!important;
}
.entry-content{
    border-top:1px solid rgba(0,0,0,0.2);
    padding:30px 0 100px 0;
}
}
/*  */

1分くらいで作ったコードなので整形も何もしていません。
本来であれば、他人に見せるコードは整形しておくことが吉です。
上記の例でいえば、同じcss名がいくつか書かれてますね。
原因としてはメディアクエリ(スマホ用レイアウト)のため、コピペしただけです。

@media screen and (min-width:480px) {
 //スマホ用CSS
}

上記のように記載することでスマホ用レイアウトと仕訳することができます。

この状態でブラウザを伸ばしたりしてみてください。

ちなみにこれは「480px以下から」を示しています。