WordPressで簡単に実現！画像や写真を横幅いっぱいに表示する方法（全幅表示、幅100%、CSS活用）

2023年7月17日

もっと魅力的な画像をサイトに掲載したいけれど、WordPressの機能だけでは記事の幅より大きな画像を表示できないとお悩みの方に朗報です。

あなたのサイトを一段と魅力的に彩る方法を知りたい方は必見です。

ポイント

本記事では、

ブラウザの横幅いっぱいに広がるスタイリッシュな画像表示方法を解説します。

ちょっとした工夫と、簡単な CSS で実現する方法です。

「アフィリエイトスクールのススメ」はこちら

1 画像（写真）を横幅いっぱいに表示する
2 画面幅いっぱいに表示する CSS
3 WordPress で利用する場合の簡単な方法
4 まとめ

画像（写真）を横幅いっぱいに表示する

画像を横幅いっぱいに表示してみます。

ただし、右側（または左側）にサイドバーを表示している場合は、サイドバーに重なって表示されるので注意してください。

画面幅いっぱいに表示する CSS

画面幅いっぱいに表示する CSS です。

.myClassNameSample1 {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.myClassNameSample1 img{
    display: block;
    height: auto;
    width: 100%;
}

「myClassNameSample1（名前は任意）」で親となるクラスを定義して幅（左右のマージン）をブラウザ幅いっぱいに計算して定義しています。

親となるクラス内のイメージは width:100% で横幅いっぱいに表示しています。

WordPress で利用する場合の簡単な方法

■ Step.1 画像にクラス名をつける

WordPress の画像ブロックで、高度な設定から、追加 CSS クラスに任意の名前を入力します。

■ Step.2 CSS を定義する

WordPress の「カスタム HTML ブロック」を用いて、<style> ～ </style> タグ内に CSS を定義します。

※ サイト全体に適用したい場合、WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」でCSSを定義しても構いません。

<style>

.myClassNameSample1 {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.myClassNameSample1 img{
    display: block;
    height: auto;
    width: 100%;
}

</style>