ブログあれこれ

ブログ記事に画像を入れる方法(初心者向け)

記事の画像
LIM
LIM
こんにちわ!
LIMです!

今日も「なんか役に立つブログ」
書いていきます!

僕のプロフィール

・名前:LIM
・職業:会社員
・経歴:大卒/会社員歴10年以上
・好きな事:読書/歌う/ゲーム/ジョギング/筋トレ/韻を踏む
・最近興味あること:ブログ/副業/瞑想/マインドフルネス系

ブログ記事にみんな画像入れてるけど、どうやってるの?

そんな疑問にお答えします。

ブログを始めたら、他の人がやっているような画像挿入もやってみたくなりますよね。そんなブログ記事に画像を挿入する方法を紹介いたします。ワードプレスではとても簡単に設定ができるので是非参考にしてみてくださいね。♪

本記事の内容

  • ワードプレスでブログ記事に画像の挿入する方法

 

どこに画像を入れる?

まずは、どこに画像にを挿入するかです。ブログ記事の中ですか?それとも記事の一覧に表示させたいですか?それにより少し入り口が異なります。まずは入り口を選んでください。

ここに入れたい↓(記事の中=メディアを追加)

記事の中に画像挿入

ここに入れたい↓(記事一覧に表示=アイキャッチ画像)

記事一覧に画像を表示

※ホームの画像の設定方法が知りたい方は別の記事でご説明します。【作成中】

記事の中に画像を挿入する方法

まずはどちらのエディタを使ってるか下記から選んでください。

ブロックエディタを使っていますか?クラシックエディタを使っていますか?それにより少しやり方見え方が違うので選んでください。♪

こっちを使ってる↓(クラシックエディタ)

クラシックエディタ画面

こっちを使ってる↓(ブロックエディタ)

ブロックエディタ画面

>>ブロックエディタとクラシックエディタ(旧エディタ)の違いやメリットデメリットはこちらの記事を参照してください。【作成中】

記事の一覧の画像を設定する方法

まずはどちらのエディタを使ってるか下記から選んでください。

ブロックエディタを使っていますか?クラシックエディタを使っていますか?それにより少しやり方見え方が違うので選んでください。♪

こっちを使ってる↓(クラシックエディタ)

クラシックエディタ画面

こっちを使ってる↓(ブロックエディタ)

ブロックエディタ画面

記事の中に画像を挿入する方法(クラシックエディタ)

クラシックエディタを使って記事の中に画像を挿入する方法です。

まずは、下記のようにクラシックエディタの編集画面から「メディアを追加」ボタンを推しましょう。

メディアを追加ボタン

 

そうするとメディアライブラリが開くので、お目当ての画像を既にアップロード済みの場合はその中から選択ます。 >>もし画像のアップロードがまだならこちらへ!

ブログ記事用の画像

 

選択したら、下記のように右側の「代替テキスト」に何の画像かを入力します。代替テキストは入力しなくても挿入できますが、グーグルが何の画像か認識するための説明です。入力しておいた方がSEO対策になるので必ず入力しておきましょう。入力例としては、「猫の居眠り」とか「犬のお座り」とか本当に簡単なものでOKです。ただし、必ず画像を説明する言葉を入れてください。

ブログ画像挿入説明③

 

最後にサイズを選んで、「投稿に挿入」ボタンを押します。ここでサイズ選びですが、選んだ画像によって大きさが違ってくるので何度か試してみると良いでしょう。下記の画像の場合は、写真では無く画面キャプチャーを使用しているので、「大」を選ぶとこんな感じです。↓

画像サイズ選択

※ちなみにですが、上記のサイズ選択押した後の画面だけを切り取った画像を「フルサイズ」で挿入するとこんな感じです。↓(参考まで)

ブログ記事用の画像④サイズ

 >>MacBookでの画像切り取りの方法はこちらの記事を参照してください。

 

ブログ記事の中に画像を挿入する方法(ブロックエディタ)

ブロックエディタを使って記事の中に画像を挿入する方法です。

まずは、下記のように「+」ボタンをクリックします。

ブロックエディタのメディア追加1

 

続いて、「画像」を選択して「メディアライブラリ」をクリックします。

ブロックエディタでのメディア追加2

 

そうするとメディアライブラリが開くので、お目当ての画像を既にアップロード済みの場合はその中から選択ます。 >>もし画像のアップロードがまだならこちらへ!

ブログ記事用の画像

 

選択したら、下記のように右側の「代替テキスト」に何の画像かを入力します。代替テキストは入力しなくても挿入できますが、グーグルが何の画像か認識するための説明です。入力しておいた方がSEO対策になるので必ず入力しておきましょう。入力例としては、「猫の居眠り」とか「犬のお座り」とか本当に簡単なものでOKです。ただし、必ず画像を説明する言葉を入れてください。

ブログ画像挿入説明③

 

最後にサイズを選んで、「投稿に挿入」ボタンを押します。ここでサイズ選びですが、選んだ画像によって大きさが違ってくるので何度か試してみると良いでしょう。下記の画像の場合は、写真では無く画面キャプチャーを使用しているので、「大」を選ぶとこんな感じです。↓

画像サイズ選択

※ちなみにですが、上記のサイズ選択押した後の画面だけを切り取った画像を「フルサイズ」で挿入するとこんな感じです。↓(参考まで)

ブログ記事用の画像④サイズ

 

記事一覧の画像(アイキャッチ画像)を設定する方法
<クラシックエディタ>

クラシックエディタを使って記事一覧の画像(アイキャッチ画像)を設定する方法です。

まずは、下記のようにワードプレスの右側にある「アイキャッチ画像を設定」ボタンをクリックします。>>もし画像のアップロードがまだならこちらへ!

アイキャッチ画像の挿入ボタン

 

続いて、下記のようにアイキャッチ画像にしたい画像(記事の一覧に表示させたい画像)を選択します。

画像を選択

 

選択したら、下記のように右側の「代替テキスト」に何の画像かを入力します。代替テキストは入力しなくても挿入できますが、グーグルが何の画像か認識するための説明です。入力しておいた方がSEO対策になるので必ず入力しておきましょう。入力例としては、「猫の居眠り」とか「犬のお座り」とか本当に簡単なものでOKです。ただし、必ず画像を説明する言葉を入れてください。

代替テキスト入力窓

 

最後に「アイキャッチ画像を設定」ボタンをクリックします。

アイキャッチ画像挿入ボタン

下記のようになれば完了です。↓

アイキャッチ画像の設定完了

 

記事一覧の画像(アイキャッチ画像)を設定する方法
<ブロックエディタ>

ブロックエディタを使って記事一覧の画像(アイキャッチ画像)を設定する方法です。

まずは、下記のように「+」ボタンをクリックします。

>>もし画像のアップロードがまだならこちらへ!

ブロックエディタのメディア追加1

 

 

 

画像をアップロードする方法

画像をアップロードする方法です。

まずは、メディア追加ボタンをクリックします。

メディア追加ボタン

 

続いて、下記の「ファイルのアップロード」をクリックし、「ファイルを選択」からファイルを選択してアップロードします。

ファイルのアップロード


>>記事の中に画像を挿入する(クラシックエディタ)

>>記事の中に画像を挿入する(ブロックエディタ)

>>記事の一覧の画像を設定する(クラシックエディタ)

>>記事の一覧の画像を設定する(ブロックエディタ)

 

まとめ

  • クラシックエディタとブロックエディタで少しだけやり方が違う
  • クラシックエディタは「メディア追加」ボタンから
  • ブロックエディタは「+」ボタンから
  • 代替できすとには画像を説明する言葉を入れる

>>MacBookでの画像切り取りの方法を知りたい方はこちらの記事を参照してください。

>>そもそも使える画像が無い!という方はまずは素材を取ってくるやり方を参考にしてください。意外と簡単にゲットできます。【作成中】

-ブログあれこれ

© 2022 リムブログ Powered by AFFINGER5