[ 質問者返信待ち ] ページヘッダーの横幅を全幅でなくしたい

[元之古屋]

■ 利用テーマとバージョン :Lightning　Pro

■ 質問内容：標準では、固定ページなどのページヘッダーは、表示ブラウザの右端から左端まで全幅で背景ないし背景画像が表示されるかと思います。これを、コンテンツ表示領域の幅に合わせたりすることは可能なのでしょうか。
モバイルなどでの閲覧ではなく、PC、特に横幅の大きなディスプレイで閲覧する場合、ページヘッダーが嫌に横に長く感じてしまうとのことで、修正を求められています。

[対馬 俊彦]

たしかに、Lightning に限らず、最近の WordPress テーマで作ったサイトを 4K ディスプレイのような特に大きな画面で見るとページヘッダーが大きすぎてアンバランスですよね。

私も気になっていましたが、たいていどこのサイトもそうだし、お客様から要望されたこともないので、まぁそんなものか…と思っていました。

とりあえず、以下の CSS を追加すればページヘッダーがコンテナと同じ幅になります。

.siteHeader, .page-header, .breadSection {
max-width: 1140px;
margin: 0 auto;
}

ただし、「ひと昔前」感が出てしまいます。(個人的意見？)

以下のようにメディアクエリを使って、フルHD(1920px)くらいまでは全幅で表示するのがよさそうです。

@media (min-width: 2500px) {
.siteHeader, .page-header, .breadSection {
max-width: 1140px;
margin: 0 auto;
}
}

[投稿者]

投稿