カテゴリー
Twenty Nineteen

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

スクリーンサイズの最低幅が1168px以上の時に、段落の幅がそのスクリーンの半分の大きさになるように調整されていました。読みやすくするためだと思われますが、画像の幅の指定値とあまりにもかけ離れているので、違和感が残りましたので、少し寄せてみました。

スクリーンサイズの最低幅が1168px以上の時に、段落の幅がそのスクリーンの半分の大きさになるように調整されていました。

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

Twenty Nineteen、1168pxスクリーンの段落幅

ワードプレス管理画面 → 外観 → カスタマイズ → 追加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、スクリーン幅1168pxの段落幅、修正後

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

一方、段落は画面サイズの12分割x9から28pxを引いた値になりますから、画面サイズの概ね75%で、この値がコンテンツエリアの幅より大きい場合は画像サイズと揃って見えるという事になります。

私のスクリーンでは890pxが最大値で、最近コンテンツエリアが1000pxぐらいのものまでありますから、特に大きすぎる事はないだろうという事にしました。

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

需要がある記事とも思えませんので、これ以上詳しくは書きません。m(__)m

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

作成者: のろのろ

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

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください