画像・動画

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

広告:ページ内にてアフィリエイト広告を利用しています。

CSSで実現する画像を全幅表示する方法

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

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

ポイント

本記事では、

ブラウザの横幅いっぱいに広がるスタイリッシュな画像表示方法を解説します。

ちょっとした工夫と、簡単な CSS で実現する方法です。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

画像(写真)を横幅いっぱいに表示する

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

画像を横幅いっぱいに表示した例

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

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

カスタム HTML ブロックで 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 完成です

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

ポイント

横幅いっぱいに表示する場合は、記事ページを「1カラム化」(サイドバーが表示されない状態)にしてください。

サイドバーが表示されるページでは、中途半端な横幅で表示される場合があります。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

PR

まとめ

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

ポイント

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

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

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

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

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

続きを見る

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

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

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

続きを見る

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

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

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

続きを見る

ブログノウハウアフィリエイトスク―ル
レンタルサーバースピードで比較
AFFINGER限定購入特典
もっと WordPress のノウハウを知りたいときは

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

クリックアイコン

おすすめ副業「ブログ・アフィリエイト」

アフィリエイト初心者や経験者にとって、

正しいスキルを学ぶことは成功につながる重要な要素です。

必要なスキルを身につけることができるアフィリエイトスクールで

アフィリエイトを学びましょう!

\やるなら一日でも早い方がお得/

おすすめアフィリエイトスクールはこちら

https://boonboonblog.com/entries/entry-38763.html

PR
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

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