ブログに画像を入れたいけど、やり方が分からず悩んでいませんか?
この記事では、WordPressで画像を挿入する方法を初心者向けに、手順付きで解説します。
この記事を読めば、画像の入れ方から基本的な使い方まで理解できるようになります。
WordPressで画像を挿入する方法
まずは、全体の流れを確認します👇
- 画像ブロックを追加する(メディア 画像)
- 画像の挿入方法を選び画像を選択する
- 代替テキストを入力する
- 挿入された画像を装飾する
画像挿入の基本手順
ここでは画像ブロックで画像を挿入する手順を、順番に解説します👇
STEP①:画像ブロックを追加
記事へ画像を挿入したい場所をクリックして、「+」をクリックしブロックのメディア 画像を表示します。
画像ブロックとは・・・WordPressの標準機能で、記事の内に画像を挿入・表示するためのブロックです。

STEP②:画像を挿入する
画像の挿入は、『アップロード』『メディアライブラリー』『URLから挿入』のいずれかを選んで、画像を選択して挿入します。
この他には、画像をドラッグ&ドロップしても画像を挿入できます。

・「ドラッグ&ドロップ」からの手順
画像をアップする画面(赤い枠)が表示されるので、挿入したい画像を保存されたフォルダーから選び画像を赤い枠の中へ
ドラッグ&ドロップ(画像をクリックしたまま、移動させて、赤枠の中で離します)すると記事の中に画像が挿入されます。
ドラッグ&ドロップ・・・マウスでつかんで、そのまま移動して離す操作になります。

・アップロード→自分のPC上から画像をアップして記事に入れることができます。
(新しく画像をアップする時に使います。ドラッグ&ドロップで画像を入れられるので早いです。)
・メディアライブラリー→メディアライブラリから既存の画像も選べます。
(メディアライブラリーからもファイルのアップロードタグがあり新しく画像をアップできます。)
・URLから挿入→他サイトの画像URLを貼って画像を表示させる
(他のサイトの画像を使うので、画像が消えると自分のサイトの画像も消えてしまう・勝手に使うと著作権の侵害のリスクなどがあります。)
-
-
【初心者向け】ブログ投稿|法的な注意事項・禁止事項とは?
続きを見る
STEP③:画像の代替テキスト(alt)の設定方法
画像をアップしたら、次に、代替テキスト(alt属性)を入力します。
・代替テキストについて詳しく解説した記事はこちらが参考になります。
代替テキスト(alt)に、画像の説明を入力すると、画像が表示されない時に入力した説明が代わりに表示される・読み上げソフトで読み上げられる・SEO対策(Googleに画像の内容を伝える)をすることができます。
・ドラッグ&ドロップで画像を記事に挿入した場合の手順
挿入した画像の上でクリックしすると、右側の設定パネルが表示され、代替テキストの入力欄がでるのでそこに入力します。
もし、画像をクリックして代替テキスト欄が表示されない場合は、次に記載している、「アップロードから画像を挿入した場合の手順」で操作すると表示されます。

・アップロードから画像を挿入した場合の手順
①画像をクリック
②右上設定マークをクリック
③「代替テキスト」を入力

・メディアライブラリーからの画像挿入のした場合の手順
①メディアライブラリーをクリック
②ファイルをアップロードタブを選ぶ
③ファイルを選択
④メディアライブラリー内に画像が表示される
⑤「代替テキスト」を入力

メディアライブラリーから画像をアップすると、右側のパネルに下記の項目が表示されるので入力します。
- 代替テキスト→画像の内容を文章で入力します。
- タイトル→画像を自分で管理するための名前になります。
- キャプション→画像のすぐ下に説明文が表示されます。
- 説明→管理用の詳細情報・メモの入力なので、(基本は使わなくてもOKです。)
- ファイルのURL→URLは自動で入力されるのでそのままでOKです。

【タイトルについて】
タイトルと表示されているので、記事のタイトルと同じ?何が違うの?ここに入力すると公開されるのか?と心配でしたが、
メディアライブラリーのタイトルは、画像を自分で管理(画像を探したり、整理したりする)するためにつける名前になります。後で何の画像だったかわかる様に名前を付けておきます。
*画像の保存時に名前を付けると自動でタイトルにその名前が表示されます。
・記事タイトル・・・読者向けなので表示されてクリックされます。
・メディアライブラリー タイトル・・・画像を自分で管理するための名前で、基本、読者に表示されないです。
【キャプションについて】
キャプションを入力した場合の画像表示例です。キャプションに「代替テキストを入力している画像です」と入力してみました。画像の下に文章が表示されます。
画像の補足説明などに使います。

最後に、選択をクリックすると記事に画像が挿入されます。
これからブログを始めたい方は、公式サイトで詳細を確認してみてください。
👉 エックスサーバーの詳細はこちら
STEP④:画像の装飾方法
WordPressの画像ブロックは基本的な表示機能ですが、AFFINNGER6でも同じ画像ブロックを使います。
Affinnger6では、画像のスタイル(装飾)やフィルター(デュオトーン)を使って、画像の見た目を変えることができ、
画像の装飾・デザインができます。
画像をクリックすると、右側に設定パネルが表示されます。
その中の『スタイル』から、画像のデザインを変更できます。

【スタイルについて】
デフォルト・角丸・シャドウ・ワイドなどを選ぶことで、見た目を調節できます。
使いたい場面に合わせて選んでみてください。
・枠線は、境界をはっきりとすることができる。
・角丸は、角が丸くなり柔らかい印象。
・シャドウは、強調することができる。
・ワイドは、横に大きく見せることがでる。
・ポラロイド風は、お洒落な印象にできる。
【フィルター(デュオトーン)について】
さらに『フィルター(デュオトーン)』を使うと、画像の色味を変更することができます。
デュオトーンを使うと、画像をツートンカラーにでき、デザインの雰囲気が変わります。
デュオトーンとは・・画像を「2色だけ」で表現するフィルター機能です。

WordPress画像ブロックツールバーでできること
画像をクリックすると上に出てくる、画像ブロックツールバーからは、配置やリンクなどの設定ができます。
必要な場合に設定を行います。
- 画像
- ドラッグ
- 上下移動
- 配置
- デュオトーンフィルターを適応
- リンク
- 切り抜き
- 画像上にテキストを追加
- キャプションを追加
- 置換

↑ 画像ブロックツールバー
ブロックツールの機能については、今後別の記事で詳しくまとめる予定です。
まとめ WordPressの画像挿入は慣れれば簡単
WordPressの画像の挿入は、画像ブロックを使って簡単に行うことができます。
アップロードやメディアライブラリーから画像を選び、リンクや配置調整などもできます。
また、代替テキストの入力も忘れずに行うことが大切です。
最初は難しく感じるかもしれませんが、慣れればスムーズに操作できるようになります。
まずは実際に画像を挿入して、操作に慣れてみてください。
なお、画像は、サイズ変更・圧縮をしてから記事に挿入するのがおすすめです。
画像を軽くすることで、表示速度の改善にもつながります。
画像を軽くする方法については、こちらの記事で詳しく解説しています。
用途に合わせて選んでみてください👇👇自動で画像を軽くしたい方はこちら👇
-
-
【初心者向け】EWWW Image Optimizerの使い方と初期設定|画像を自動で軽くする方法
-
-
【Spuoosh(スクーシュ)】画像圧縮ツールの使い方|初心者でも操作簡単!
WordPressで記事に画像挿入する方法をはじめから見る
WordPressを始めるならサーバーが必要です。
私はエックスサーバーを使っています。使い心地もよく快適です。
✔速い
✔設定かんたん
✔情報多くて安心
初心者でもスムーズにブログを作ることができました。
\参考までに貼っておきます👇/
「いきなりブログは不安…」という方は、本で流れを見てからでもいいと思います。
正直、全部は理解できなかったけどなんとなく流れはつかめました。