WordPressで画像を横幅いっぱいに表示する - 「礼」の~IT人材を目指して~

本記事では、ブラウザの横幅いっぱいに広がる画像表示方法を紹介します。簡単な CSS で実現できます。ただし、サイドバーを表示している場合は、サイドバーに重なって表示されますので注意してください。

実施すること
まとめ

実施すること

画像を貼り付ける

横幅いっぱいに表示したい画像を記事内に貼り付けます。この状態では、まだ、画像は元のサイズのまま表示されます。

▼横幅いっぱいに表示したい画像を貼り付けたところ

CSS を定義して、画像にクラス名をつける

貼り付けた画像を指定して、WordPress の「カスタム HTML ブロック」を用いて、タグ内に CSS を定義します。

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

<style>
.myClassNameTitle {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}
.myClassNameTitle img{
    display: block;
    height: auto;
    width: 100%;
}
</style>
<figure class="myClassNameTitle">
<img src="ファイルパス+画像のファイル名">
</figure>

<style>

.myClassNameTitle {

margin-right: calc(50% - 50vw);

margin-left: calc(50% - 50vw);

}

.myClassNameTitle img{

display: block;

height: auto;

width: 100%;

}

</style>

</figure>

結果を表示する

横幅いっぱいになりました。

まとめ

今回は、WordPressで画像を横幅いっぱいに表示してみました。

これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。

参考