monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

はてなブログのテーマづくり フッターの幅を100%にする

前回の続き

過去記事:はてなブログのテーマづくり 1カラムレイアウトにする - monoのメモ帳

フッターは横幅100%にしたいので、

501行目当たりのこの部分を

/* container */
#container,
#footer {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 768px) {
    #container,
    #footer {
        width: 720px;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    #container,
    #footer {
        width: 940px;
    }
}

こんな風に変更

/* container */
#container,
#footer {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 768px) {
    #container {
        width: 720px;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 768px) {
    #footer {
        width: 100%;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    #container {
        width: 940px;
    }
}

独学なのでテーマを作るのにどこから手を付けていいのかわかりませんが、とりあえずレイアウトはこれでいいかな。

完成したレイアウト

  • スマートフォンで見たとき→1カラム
  • タブレット縦で見たとき→1カラム(サイドバー部分は記事下に2列表示)
  • パソコンで見たとき→1カラム(サイドバー部分は記事下に3列)

以上です。

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。