はてなブログのスマホ表示でヘッダーとフッターを消してみる！

はてなブログ

CSSの試験です。
はてなブログのスマホ表示でヘッダーとフッターを消してみましょう！

<style>
#globalheader-container {
    display:none;
}

#footer-menu {
    display:none;
}
</style>

とりあえずは記事本文に書いてテスト。

フッターはきれいに消えた！

ヘッダーは消えたけど、変なスペースが残っている(>_<)

要素を追加

スタイルシートに要素を追加してみましょう！
「#container」が怪しそうです。

<style>
/* 余白調整 */
#container {
    padding-top:0px;
}
</style>

今度はきれいにヘッダーの余白部分もなくなりました！