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

---

---

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

ブラウザの横幅いっぱいに広がるスタイリッシュな画像表示方法を、ちょっとした工夫と、簡単な CSS で実現する方法です。

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

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

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

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

画面幅いっぱいに表示する 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>

■ Step.3 完成です

完成です。プレビュー画面を表示して、横幅いっぱいを確認してください。

まとめ

WordPress で記事を作成する際、画像（写真など）をブラウザの横幅いっぱいに広げる方法です。ちょっとした工夫と、簡単な CSS で実現します。

• 画像ブロックの高度な設定で、クラス名を定義する
• カスタム HTML ブロックなどで CSS を定義します

横幅いっぱいに配置するとサイトや記事がまた一層かっこよくなりますね。

WordPress の情報、テクニック一覧はこちらをクリック！

 

Presented By Boon Boon Blog .Com