WordPressで画像を表示させるには

WordPressで画像を投稿するにはどうしたらよいのでしょう?いくつか方法があるのですが、目的に応じてやり方を変更しないと、思ったとおりに画像が表示されません。
このページではWordPressで記事に画像を挿入する方法を複数紹介!

WordPressで画像を挿入する方法

WordPressでは様々な方法で画像を表示させることが出来るのですが、まずはパソコンにある画像をアップロードし、記事の途中に表示させる方法。

画像をドラッグ&ドロップ

ブロックを追加

画像を挿入したい部分の段落ブロックの右側にあるプラスのアイコンをクリック。

画像をクリック

「画像」をクリックします。

画像アップロード画面

このような画面になります。

色で囲った部分に、Windowsなら「エクスプローラー」。Macなら「ファインダー」にある画像をドラッグ&ドロップします。

もちろんすでにアップロード済みの場合は、「メディアライブラリ」を選択して、画像一覧から選択しても構いません。

画像をドラッグアンドドロップする

エクスプローラー(Macならファインダー)から記事に表示させたい画像をドラッグ&ドロップします。

画像が挿入された

画像が表示されました。
大きな画像でもきちんとページのデザインに収まるように縮小されて表示されます。

マーカーをドラッグ

よく見ると画像の右端と下端に⚪️マーカーがあります。
ここをドラッグすると・・・

画像を大きくしたり小さくしたりできます。

数値で画像の大きさを指定する

画像の幅を入力

数字できっちりと大きさを指定したい場合は、右側の「ブロック」タブの中にある画像の詳細設定にある「幅」の中に数値を代入します。

数値を代入したところ

数値を代入してみました。

「高さ」は自動で調節されます。

<figure class="wp-block-image size-large is-resized"><img src="https://example.com/wp-content/uploads/2024/04/2006-07-24_16-21-55_800-1024x680.jpeg" alt="" class="wp-image-51" style="width:350px"/></figure>

このように「IMGタグ」の「width」ではなく、スタイルシートで幅を指定するようです。

<figure class="wp-block-image size-large is-resized"><img src="https://example.com/wp-content/uploads/2024/04/2006-07-24_16-21-55_800-1024x680.jpeg" alt="" class="wp-image-51" style="width:350px"/></figure>

コメント

タイトルとURLをコピーしました