カテゴリー
Twenty Nineteen

Twenty Nineteen-6、スクリーンサイズ1168以上の時の段落幅

【2020年3月更新】スクリーンサイズの最低幅が1168px以上の時に、画面がガタガタしているように見えたので、同じ幅に見えるように調整しました。

【2020年3月更新】

スクリーンサイズの最低幅が1168px以上の時に、画面がガタガタしているように見えたので、同じ幅に見えるように調整しました。

コンテンツ幅の調整

画像は、コンテンツエリアに対して100%と指定されていました。

↓読みやすくするためだと思われますが、画像の幅の指定値とあまりにもかけ離れているので、違和感が残りました。

Twenty Nineteen、コンテンツ幅、修正前
Twenty Nineteen、コンテンツ幅、修正前

ワードプレス管理画面 → 外観 → カスタマイズ → 追加CSS

@media only screen and (min-width: 1168px) {
  .entry .entry-content > *,
  .entry .entry-summary > *, .author-bio {
    max-width: calc(9 * (100vw / 12) - 28px);
	}
}
Twenty Nineteen、コンテンツ幅、修正後
Twenty Nineteen、コンテンツ幅、修正後

気になるようだったら、「max-width: 1000px;」などを足すといいかもしれません。

前の投稿、後の投稿の幅

@media only screen and (min-width: 1168px){
.post-navigation .nav-links {
    flex-direction: row;
    margin: 0 calc(10% + 60px);
	max-width: 80%;
	}
}
Twenty Nineteen、前の投稿、後の投稿の幅
Twenty Nineteen、前の投稿、後の投稿の幅

最後までお読みいただきありがとうございました。

作成者: のろのろ

ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です