
もっと魅力的な画像をサイトに掲載したいけれど、WordPressの機能だけでは記事の幅より大きな画像を表示できないとお悩みの方に朗報です。
あなたのサイトを一段と魅力的に彩る方法を知りたい方は必見です。
\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/
目次
画像(写真)を横幅いっぱいに表示する
画像を横幅いっぱいに表示してみます。

ただし、右側(または左側)にサイドバーを表示している場合は、サイドバーに重なって表示されるので注意してください。
画面幅いっぱいに表示する 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 で実現します。
横幅いっぱいに配置するとサイトや記事がまた一層かっこよくなりますね。
40代・50代「会社員におすすめ」の在宅でできる副業5選
40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる) | ドンドン!副業情報局
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる) | ドンドン!副業情報局
地方がチャンスのおすすめ副業を紹介!
【2025年チャンス】地方で副業のおすすめ。在宅、快適、移住先、ノマドを紹介 | ドンドン!副業情報局
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。