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 のおすすめテーマ
- SEO に強く【集客力強化】が望める
- かっこいい（かわいい）ホームページを作りやすい
- 初心者でも使えて、上級者になっても満足できる
本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」！
WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。
-
-
AFFINGER（アフィンガー）テーマは「ここ」がすごい！【WordPress 初心者必見！】
AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ（読者）を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。
続きを見る
WordPress の情報、テクニック一覧はこちらをクリック！
