![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
ねえねえ、きれいな夕焼けが撮れたからブログに写真をアップしたいんだけど、どうやればいいの?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
それは嬉しいですね!
文章だけのブログより、画像があるブログの方が華やかになりますよね!
「画像ブロック」を使うと画像(写真やイラスト)をアップできますよ。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
「画像ブロック」…。なんとなく名前は知ってるよ。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
他のブロックの解説のときになんとなく説明していました。
今回は「画像ブロック」について詳しく解説します!
ばっちり覚えてくださいね!
テクこやの解説がわかりやすいのは画像があるこそ!
どんな時でもよく使う「画像ブロック」について、解説していきます。
1度使い方を覚えればスムーズに使えるようになると思いますので、ぜひマスターしましょう!
画像ブロックとは
ワードプレスで画像を挿入するときは、「画像ブロック」を使用して挿入します。
画像(写真やイラスト)を挿入することで、テキスト以上に「読者が内容を理解しやすくなる」というメリットがあります。
画像ブロックは「段落ブロック」「見出しブロック」などと共に、非常によく使われるブロックです。
ワードプレスの編集画面では、以下のような説明になっています。
![画像を挿入し、視覚に訴えます。](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-15_18h05_32.png)
![画像を挿入し、視覚に訴えます。](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-15_18h05_32.png)
画像ブロックの使い方
他のブロック同様、画像ブロックの追加方法は3種類あります。
どこから追加しても同じブロックが表示されますので、1番使いやすい方法で追加してください。
![3種類の方法でブロックを挿入できる](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h26_48-1024x440.png)
![3種類の方法でブロックを挿入できる](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h26_48-1024x440.png)
詳しい追加方法については、こちらをご覧ください。
※「見出し」を「引用」に置き換えてください。
画像を挿入する方法
「画像ブロック」を追加すると、3種類の挿入方法が表示されます。
- アップロード
- メディアライブラリ
- URLから挿入
![画像ブロックを挿入したら表示される画面](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_14.png)
![画像ブロックを挿入したら表示される画面](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_14.png)
それぞれの挿入方法について説明していきます。
1.アップロード
![左側、アップロード](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_1401.png)
![左側、アップロード](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_1401.png)
アップロードをクリックすると、フォルダが開かれます。
事前にアップロードしたい画像をダウンロードなどして用意しておくとスムーズに追加ができます。
![フォルダが開かれる](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h54_46-1024x521.png)
![フォルダが開かれる](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h54_46-1024x521.png)
アップロードしたい画像を選択したら、「開く」をクリックすると挿入完了です。
![](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h54_46-1-1024x521.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h54_46-1-1024x521.png)
![ワードプレスの画面に画像が挿入された](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h01_56.png)
![ワードプレスの画面に画像が挿入された](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h01_56.png)
2.メディアライブラリ
![真ん中、メディアライブラリ](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_1402.png)
![真ん中、メディアライブラリ](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_1402.png)
「メディアライブラリ」とは、使用しているワードプレス内に保存されている画像が一覧で見られる場所です。
「1.アップロード」でアップロードした画像は、この「メディアライブラリ」に保存されます。すでにアップロードされている画像を再度アップロードしたい場合は、「メディアライブラリ」を選択して挿入します。
![メディアライブラリに保存されている画像一覧](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h03_51-1024x921.png)
![メディアライブラリに保存されている画像一覧](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h03_51-1024x921.png)
挿入したい画像を選択して、右下の「選択」をクリックすると挿入完了です。
![画像を選んだら、右下の「選択」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h06_26-1024x921.png)
![画像を選んだら、右下の「選択」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h06_26-1024x921.png)
![ワードプレスの画面に画像が挿入された](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h01_56.png)
![ワードプレスの画面に画像が挿入された](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h01_56.png)
3.URLから挿入
![右側、アップロード](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_1403.png)
![右側、アップロード](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_14h37_1403.png)
「URLから挿入」は、インターネット上に存在する画像のURLを入力することで、その場に画像を挿入します。
挿入したい画像のURLをコピーして、「URLから挿入」へ挿入します。
挿入したい画像のURLのコピー方法は、まずコピーしたい画像などのサイトを開き、画像にマウスを合わせ右クリックをして「画像アドレスをコピー」します。
![①画像を右クリック
②「画像アドレスをコピー」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h14_05.png)
![①画像を右クリック
②「画像アドレスをコピー」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h14_05.png)
次に、「URLから挿入」の四角い枠にコピーしたURLを貼り付け、右側の矢印(適用)をクリックします。
![①コピーしたURLを貼り付け
②矢印をクリックして適用する](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h18_10.png)
![①コピーしたURLを貼り付け
②矢印をクリックして適用する](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h18_10.png)
すると、コピーした画像が表示されますので、挿入完了です。
![ワードプレスの画面に画像が挿入された](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h23_46.png)
![ワードプレスの画面に画像が挿入された](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h23_46.png)
外部サイトの画像を挿入した場合は、引用元のサイトを明記するのを忘れないようにしましょう。
![](https://techkoya.com/wp/wp-content/uploads/2022/09/techkoya_20220902-300x169.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2022/09/techkoya_20220902-300x169.jpg)
画像のサイズを変更する方法
画像を挿入すると、その画像のサイズそのままで表示されます。
しかし、「画像が大きすぎる」と思うこともあるでしょう。その場合は、メディアライブラリからサイズを変更できます。
メディアライブラリは、「ダッシュボード」「投稿」などが表示されている左側のバーの「メディア」→「ライブラリ」から開けます。
![メディア→ライブラリ](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h25_10.png)
![メディア→ライブラリ](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h25_10.png)
メディアライブラリからサイズを変更したい画像を選んだら、画像の下部にある「画像を編集」をクリックすると「添付ファイルの詳細」が表示されます。
![「画像を編集」は下部にある](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h27_43.png)
![「画像を編集」は下部にある](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h27_43.png)
![「添付ファイルの詳細」が表示される](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h29_15-1024x921.png)
![「添付ファイルの詳細」が表示される](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h29_15-1024x921.png)
サイズの変更だけでなく切り抜きや回転もできますので、お好みの形に編集します。
編集が終わったら「保存」をクリックして、サイズ変更は完了です!
![](https://techkoya.com/wp/wp-content/uploads/2022/05/background-transparency_featured_image_yagi04-300x169.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2022/05/background-transparency_featured_image_yagi04-300x169.jpg)
画像にリンクを貼る方法
文字と同様に、画像にもリンクを貼ることができます。
貼り方も文字と同じです。
リンクを貼りたい画像を選択してブロックツールバーから「
![画像を選択して「リンク」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h34_50-1.png)
![画像を選択して「リンク」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h34_50-1.png)
![URLを入力して適用をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h37_17.png)
![URLを入力して適用をクリック](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h37_17.png)
「プレビュー」で画像をクリックして、設定したリンクに飛ぶことを確認します。
※リンクについて、詳しくは以下の説明をご覧ください。
画像を挿入した後にできること
画像を挿入すれば読者が見られるようになるので、そこで終わりでも問題ありません。
しかし、代替テキストを入れたり画像のスタイルを設定することもできます。
スタイルの設定
スタイルとは、画像の形のことを指しています。
画像を挿入したときは「デフォルト(四角形)」になっていますが、他に「角丸」にすることもできます。
画像の雰囲気などに合わせて形を選ぶと良いでしょう。
↓デフォルトの場合(違いが分かりやすいよう、背景を黄色にしました)
![デフォルトにすると画像そのままのスタイルになる。
この場合は四角形](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h48_58-1024x652.png)
![デフォルトにすると画像そのままのスタイルになる。
この場合は四角形](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h48_58-1024x652.png)
↓角丸の場合
![角丸にすると丸くなる](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h51_38-1024x667.png)
![角丸にすると丸くなる](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h51_38-1024x667.png)
キャプション
![キャプション](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h58_55.png)
![キャプション](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h58_55.png)
キャプションは、「画像の簡単な説明文」です。
画像の下に小さい字で表示されるため、画像の補足などをする際に使用します。
必ず書かなければいけない訳ではありませんが、書いてある方が読者が理解しやすくなります。
ALTテキスト(代替テキスト)
![](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h45_37-1024x637.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_15h45_37-1024x637.png)
ALTテキスト(代替テキスト)とは、「画像をテキストで説明する」ものです。
目の不自由な方がテキストリーダーなどでサイトを閲覧した際に、ALTテキストを読み上げることで画像の説明をします。
もし、ALTテキストが設定されていない場合は、その画像の説明は飛ばされてしまいます。
また、Googleの検索エンジンに画像の説明をするためにもALTテキストは必要です。
検索エンジンはALTテキストを参考にして検索結果を表示しているため、ユーザーが検索したときに作成したページを表示させるためにも、ALTテキストの設定は重要であると言えます。
しかし、すべての画像にALTテキストが必要という訳ではありません。
ALTテキストを入力する欄の下にある説明の通り、「画像が単なる装飾の場合」は、設定する必要はありません。
もしALTテキストが必要かわからない場合は、目の不自由な人が読むときに画像の説明は必要か想像すると、必要か不要か判断しやすいかもしれません。
おさらい・まとめ
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
画像ブロックについて解説しましたが、理解できましたか?
実際に挿入してみましょう!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
はーい!
まずは新規作成を開いて…
![「投稿」の新規作成](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h07_28-1024x546.png)
![「投稿」の新規作成](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h07_28-1024x546.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
画像ブロックを選ぶんだよね
新しく画像を入れたい場合はどれだっけ?
![画像ブロックを挿入](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h08_40.png)
![画像ブロックを挿入](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h08_40.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
「アップロード」です!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
そうだった!じゃあ夕焼けの画像を挿入するよ!
![挿入する画像を選択](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h09_32-1024x521.png)
![挿入する画像を選択](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h09_32-1024x521.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h12_47.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h12_47.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
挿入されました!
綺麗な写真ですねー。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
でしょ!
形はどうしようかなー?
今回は「デフォルト」のままにしよう。
![デフォルトを選択](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h14_19-1-1024x504.png)
![デフォルトを選択](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h14_19-1-1024x504.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
あと、ALTテキストも入れるんだよね。
うーん、迷うなあ。
![「海から見える夕焼け」というALTテキスト](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h15_36.png)
![「海から見える夕焼け」というALTテキスト](https://techkoya.com/wp/wp-content/uploads/2022/12/2022-12-16_16h15_36.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
これでオッケー?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
オッケーです!
画像の挿入ができましたね!
この解説でもたくさんの画像を使用しましたが、多くのシーンで画像ブロックは使用されます。
覚えておくととても便利なので、ぜひ積極的に使用してください!
質問などあれば気軽に書き込んでくださいね♪