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

---

---

もっと魅力的な画像をサイトに掲載したいけれど、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 のお役立ちテクニックはこちら

まとめ

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

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

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

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

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記