【SWELL】PC表示でメインビジュアルの画像が広がらないようにしたい

画面サイズの大きなPCで表示したとき、メインビジュアル（トップのスライダー画像）が横に広がりすぎてしまうことがあります。
本記事では、メインビジュアルの横幅を固定して、中央に表示させる方法を紹介します。

メインビジュアルの高さ設定

まずは管理画面で高さ設定を確認します。

操作手順：
外観 ＞ カスタマイズ ＞ トップページ ＞ メインビジュアル

メインビジュアルの高さ設定を「画像・動画サイズのまま」にしておきます。

CSSで画像の広がりを抑える

画像が画面幅いっぱいに広がりすぎないようにCSSで制御します。

追加CSSや子テーマの style.css に以下のコードを追加することで、画像が広がりすぎず中央に表示されるようになります。

.p-mainVisual__imgLayer {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

.p-mainVisual__imgLayer picture,
.p-mainVisual__imgLayer img {
    max-width: 1600px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

上記のコードを適用することで、メインビジュアルが最大1600px幅を上限に中央配置されるようになります。
大画面での見た目が整い、余白をもたせた上品な印象に仕上がります。

max-widthと画質の関係

max-width の値は、画像の見た目や画質に大きく関係します。

• max-width を画像サイズ（実際のピクセル幅）と同じ値に設定すると、ブラウザが画像を引き伸ばさないため、ぼやけずに高画質を保てます。
• 一方で、max-width を画像サイズより大きく設定すると、拡大表示されてぼやけやすくなるので注意が必要です。

たとえば、画像が 1600px 幅で作られている場合は、次のように設定します。

.p-mainVisual__imgLayer {
  max-width: 1600px;
}

このように画像の実サイズに合わせてmax-widthを指定することで、余白のバランスを保ちながら、高解像度のまま美しく表示できます。

まとめ

上記の設定とCSSを組み合わせることで、画像のサイズを保ちながら自然に中央配置できます。

デザイン全体のバランスを崩さず、見やすいトップページを作りたい方におすすめのカスタマイズです。