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

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

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

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

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

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

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

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

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

/* PC表示でメインビジュアルの広がりを抑える */
@media screen and (min-width: 960px) {
    .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幅を上限に中央配置されるようになります。
大画面での見た目が整い、余白をもたせた上品な印象に仕上がります。

コードのポイント

• @media screen
  スマホ表示には影響を与えず、PC表示のときだけ制限がかかるようにしています。
• max-width:
  ここに「1600px」や「2000px」など、実際に作成した画像サイズを指定してください。
• margin: 0 auto:
  画面幅が1600pxを超えたとき、メインビジュアルを中央に配置します。

max-widthと画質の関係

max-width に指定する数値は、使用している画像そのものの横幅（ピクセル数）に合わせるのがベストです。

• 画像と同じサイズに設定
  ブラウザが画像を無理に引き伸ばさないため、ボケることなく、高画質なまま表示できます。
• 画像より大きく設定
  画像が拡大されて表示されるため、画質が劣化し、ぼやけた印象になってしまいます。

最近の高解像度ディスプレイ（Retinaなど）を考慮すると、画像は 1800px〜2000px 程度で作成し、CSSでその数値に制限をかけると、どんな環境でもきれいに表示されやすくなります。

まとめ

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

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