WordPressで画像を挿入・調整する方法！サイズ変更と配置の基本設定

2026年5月22日

基礎知識

WordPressを使ってブログ記事やWebページを作成する際、視覚的な要素である画像は読者の理解を助けるために欠かせない存在です。

テキストだけのページは読み手に圧迫感を与えてしまいがちですが、適切に画像を配置することで情報を直感的に伝えることが可能になります。

2026年現在のWordPressでは、ブロックエディタの進化により、初心者の方でも直感的に画像を挿入し、自由自在に調整できるようになりました。

この記事では、画像を挿入する基本的な手順から、サイズ変更、配置の調整、そしてSEOに効果的な設定方法まで詳しく解説します。

これからWordPressでサイト運営を始める方はもちろん、操作を改めて確認したい方もぜひ参考にしてください。

目次 [ close ]

WordPressで画像を挿入する基本手順

WordPressのブロックエディタを使用して記事内に画像を挿入する方法は非常にシンプルです。

まずは記事編集画面を開き、画像を配置したい場所にある「＋（ブロック追加ボタン）」をクリックしてください。

検索窓に「画像」と入力するか、表示されている「画像」アイコンを選択することで、画像ブロックが追加されます。

画像ブロックを追加すると、「アップロード」「メディアライブラリ」「URLから挿入」という3つの選択肢が表示されます。

新しくパソコンやスマートフォンから画像を読み込みたい場合は、「アップロード」を選択して対象のファイルを選びましょう。

既にWordPress内に保存されている画像を使いたい場合は、「メディアライブラリ」をクリックして一覧から選択します。

メディアライブラリを活用することで、過去に使用した画像を何度も再利用できるため、管理の手間を省くことができます。

メディアライブラリを効率的に活用する方法

メディアライブラリは、単なる画像置き場ではなく、サイト全体の視覚資産を管理する重要なツールです。

アップロードした画像には、それぞれ個別の詳細情報を設定することができます。

画像をアップロードした直後に、右側の設定パネルでファイル名や代替テキストを整理する習慣をつけましょう。

大量の画像を扱う場合は、検索機能を活用することで目的の画像をすぐに見つけ出すことが可能です。

挿入した画像のサイズを調整する方法

画像を挿入した直後は、テーマのデフォルト設定に基づいたサイズで表示されます。

しかし、コンテンツの内容によっては、画像をより小さく表示したり、逆に画面いっぱいに広げたりしたい場面があるでしょう。

WordPressでは、ブロックの右側に表示される設定サイドバーから簡単にサイズを変更できます。

設定パネル内の「画像サイズ」という項目では、システムが自動生成したプリセットを選択可能です。

標準的な画像サイズの選択肢

WordPressには、デフォルトでいくつかのサイズ設定が用意されています。

サイズ名称	主な用途
サムネイル	正方形に切り抜かれ、リスト表示などに適しています。
中サイズ	記事の中盤で説明用画像として使うのに適したサイズです。
大サイズ	横幅いっぱいに見せたい重要な図解や写真に適しています。
フルサイズ	アップロードした元の解像度でそのまま表示します。

基本的には、表示したい大きさに最も近いプリセットを選択するのがパフォーマンス面でも推奨されます。

カスタムサイズによる微調整

プリセットだけでは対応できない場合、ピクセル単位で数値を入力してサイズを指定することも可能です。

設定パネルの「幅」や「高さ」の欄に数値を入力すれば、画像のアスペクト比を保ったままリサイズされます。

また、エディタ上の画像をクリックすると表示される青い丸（ハンドル）をドラッグすることでも直感的にサイズを変えられます。

マウス操作で直感的に大きさを決めることができるため、デザインのバランスを見ながら調整したい時に便利です。

画像の配置とレイアウトの基本設定

画像の配置場所を整えることで、記事全体の読みやすさは劇的に向上します。

画像ブロックを選択した時に表示されるツールバーにある「配置」アイコンをクリックしてください。

ここでは、左寄せ、中央揃え、右寄せといった基本的な配置を選択することができます。

特に「中央揃え」は、スマートフォンの画面でもバランス良く表示されるため、最も頻繁に使用される設定です。

テキストの回り込みを設定する

「左寄せ」や「右寄せ」を選択すると、画像の横にテキストが配置される「回り込み」の状態になります。

小さなアイコンや補足用の画像を挿入する際、この回り込みを活用することでスペースを有効活用できます。

ただし、スマートフォンのような画面幅が狭いデバイスでは、回り込みが崩れて読みづらくなる場合があるため注意が必要です。

2026年のモダンなWebデザインでは、無理に回り込ませず、画像を独立した段落として中央に配置するのが一般的です。

幅広設定と全幅設定の活用

使用しているテーマが対応している場合、ツールバーに「幅広」や「全幅」というオプションが表示されます。

「幅広」を選択すると、通常の記事本文の枠を超えて少し大きく画像が表示されます。

さらに「全幅」を選択すれば、ブラウザの端から端まで画像を広げて表示させることが可能です。

インパクトを与えたいメインビジュアルや、美しい風景写真などを紹介する際に非常に効果的な設定です。

画像の詳細設定とSEO対策

画像を挿入する際、見た目の調整だけでなく裏側の設定もしっかりと行うことが重要です。

これはSEO（検索エンジン最適化）や、視覚障害を持つ方が利用するスクリーンリーダーへの対応に直結します。

画像ブロックの設定サイドバーにある「代替テキスト（alt属性）」には必ず適切な内容を記述しましょう。

代替テキスト（altテキスト）の書き方

代替テキストは、通信エラーなどで画像が表示されない時や、検索エンジンが画像の内容を理解するために使用されます。

例えば、犬が走っている写真であれば「公園を走るゴールデンレトリバー」のように具体的に記述してください。

単に「画像1」や「写真」といった意味のない名前を付けるのは避けるべきです。

キーワードを詰め込みすぎず、自然な文章でその画像が何を示しているかを説明することがポイントです。

画像へのリンク設定

画像をクリックした際に、特定のページへ飛ばしたり画像を拡大表示させたりすることも可能です。

ツールバーの「リンク」アイコンをクリックし、リンク先のURLを入力します。

「メディアファイル」をリンク先に設定すると、画像をクリックした時に元画像が全画面で表示されるようになります。

ギャラリーサイトやポートフォリオサイトを作成する場合には、この機能を積極的に活用しましょう。

CSSを使用した高度な画像カスタマイズ

標準の設定だけでは満足できない場合、独自のCSSを追加してスタイルをカスタマイズすることもできます。

例えば、画像に影をつけたり、角を丸くしたりすることで、サイト独自の雰囲気を演出できます。

設定サイドバーの「高度な設定」にある「追加 CSS クラス」に任意のクラス名を指定しましょう。

CSS

/* 画像に影をつけ、角を丸くするスタイル例 */
.custom-image-style {
    border-radius: 15px; /* 角を15px丸くする */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 柔らかな影をつける */
    transition: transform 0.3s ease; /* アニメーションの設定 */
}

.custom-image-style:hover {
    transform: scale(1.02); /* マウスホバー時に少し大きくする */
}

このように少しのコードを追加するだけで、他のサイトとは一線を画すプロフェッショナルな外観を整えることが可能です。

まとめ

WordPressでの画像挿入と調整は、コンテンツの質を高めるための基本でありながら、非常に奥が深い作業です。

ブロックエディタの機能を活用すれば、サイズの微調整や自由な配置がプログラミング知識なしで実現できます。

単に画像を並べるだけでなく、代替テキストの設定やサイズの最適化を意識することで、SEO効果も期待できるようになります。

今回ご紹介した基本的な操作方法と高度な設定を組み合わせて、読者にとって見やすく魅力的な記事づくりに取り組んでみてください。

日々の更新の中で操作に慣れていけば、直感的に理想のレイアウトを作れるようになるはずです。