前回の記事でテキストの表示幅を変えてみたものの、問題点がいくつかありました。
- レスポンシブ対応されていない。
- 記事一覧ページでテキスト以外の幅が調整されておらず、見栄えが良くない。
ので、実装方法変えました。
ブロックの幅を広くする
style.cssに、このような記述をしている場所があります。
/**
* Root Media Query Variables
*/
:root {
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignfull-width: 100%;
--responsive--alignright-margin: var(--global--spacing-horizontal);
--responsive--alignleft-margin: var(--global--spacing-horizontal);
}
@media only screen and (min-width: 482px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
@media only screen and (min-width: 822px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
}
この部分を、下のように変更します。
/**
* Root Media Query Variables
*/
:root {
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignfull-width: 100%;
--responsive--alignright-margin: var(--global--spacing-horizontal);
--responsive--alignleft-margin: var(--global--spacing-horizontal);
}
@media only screen and (min-width: 482px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 780px);
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
@media only screen and (min-width: 822px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 780px);
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
}
2行変えているところがあります。ここだけでOKです。
スクリーンが482px以上の時は、widthを780px以上にするような変更を加えました。
（厳密には、いろいろ計算した結果が幅になるんですが割愛（笑））
また、この変更は親テーマに加えています。:root要素への変更のため、子テーマに記述しようとすると反映するのが難しいです。
この変更によって、こんな感じに見栄えが変わります。
ある程度横幅あったほうが読みやすいですよね。
スマホ表示も違和感ない感じになっています。
まとめ
各要素の幅を変えてみました！外国仕様だからかは不明ですが、少なくとも僕として幅が狭いと感じましたので修正してみました。ちょうどいいと感じる幅に調整してみてください！
デモサイト↓↓
Twenty Twenty-One デモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
