Simplicity2で作成したブログをスマホで見た際のヘッダー下に生じる間延びした空間をつめてみた。

当ブログはWordPressで作成しているが、使用しているテーマはSimplicity2

無料なのに、とても使いやすく優れたテーマで非常に重宝している。

ただ、スマホで見た時のレイアウトでちょっと気に入らないところがあった。

ブログタイトルのヘッダー下に結構なスペースが空いてしまうのだ。

画像 2018-07-08_13-13-33-366

ここに貼っている画像では、そんなに間延びしているようには見えないかもしれないが、全体的に見るとこのスペースがあるためになんだか締まらない。

ということで、このヘッダーと記事タイトルまでのスペースをちょっとつめたいなと。

画像 2018-07-08_13-13-33-366

と言っても、私にはどうすればいいのか分からないので、ググってみると、調整の仕方は意外に簡単だった。

下記のコードをCSSに加えるだけ。

margin-topの値は任意である。

@media (max-width: 30em) {
  #body {
    margin-top: -20px;
      }
}

で、実際に加えてみる。

これで、ヘッド下のなんか間延びしていた空間が無くなった。

画像 2018-07-08_14-38-58-637

以上。

広告

シェアする

広告