【保存版】ワードプレスで画像を貼る方法(圧縮してサイトを軽くしよう)

ワードプレスでブログ記事を作成する際に必要となる画像の貼り方や探す方法、アレンジについて詳しく解説しています。この記事では以下のことが学べますので、ぜひ参考にしてみてください!

  • アイキャッチ画像の探し方、編集方法、貼り方
  • ブログ記事内に貼る方法、トリミングやサイズ変更
  • 画像を貼る際に意識してほしいSEO対策

基本的な操作方法ではありますが、ワードプレスを始めたばかりの方や当サイトでも使用しているTHE THOR(ザ・トール)を購入した方など、参考にしていただければと思います。

使用する画像ですが、オリジナリティを出すためにもできる限り自分で撮った写真の使用をおすすめします。他サイトから使用する場合は、なるべく無料サイトのものから探し、画像の編集が可能なものや出展元の記載が不要なものにすると安心ですよ。

 
なりまい
当サイトの画像は基本的に自分で撮影した写真と無料サイトの画像を使用しています
無料や商用可能と記載のないサイトからの画像を使用する時は、ブログに使用可能なものか、出展元の記載が必要かなど、十分に確認してから使うようにしてください。取り扱いはくれぐれも慎重にお願いします。
スポンサーリンク

アイキャッチ画像の探し方

 

画像を記事内に貼り付ける方法

まずはアイキャッチ画像の探し方ですが、ブログ記事トップにタイトルと一緒に表示させるイメージ画像ですので、記事タイトルのイメージ画像にもなりますので、適当に選ぶのではなく、その内容に沿った画像を探しましょう。

 
なりまい
第一印象は3秒で決まりますからね!

読者がその記事を読むか見極める重要項目あたりますので、アイキャッチ画像は全ての記事に設定してください。適当な画像が表示された記事と、内容に合った画像が表示されたら、迷わず後者を選択するはずです。

おすすめ①:Pixabay

無料で商用利用可能な写真がたくさんある有益サイト

他にも無料サイトは多数ありますが、最初はこれ一つだけで十分です。基本的に自分で撮影した画像を使用していますので。このサイトはユーザー登録なしで、ブログ向けの良質な画像がたくさんありますよ!また、画像の加工や編集も可能ですので、アレンジして他ブログと差別化するのも良いと思います。

画像の保存方法は、使用したい画像が見つかったら右クリック→画像を名前を付けて保存を選択してください。

私の場合は特に加工や編集をしないで、そのまま使用していました。画像の容量だけ縮小していますね。容量圧縮方法は以下で説明しています。

スポンサーリンク

おすすめ②:Canva

当サイトのアイキャッチは最近リニューアルして全てCanvaでオリジナルに変更しました。こちらも基本的に無料で写真や文字装飾、加工が自由にできますよ!

私が使用しているアイキャッチ画像サイズは、Blogバナーから作成しています。クリックすると無料のテンプレートがたくさん出てくるので、イメージを決めて、あとは文字を追加したり、写真を載せたりしています。

作成できたら左上のダウンロードでJPEG保存しています。サイズは後で変更できるので、とりあえずフォルダ保存しましょう。

アイキャッチ画像の設定方法

 

アイキャッチ画像の挿入方法

まずワードプレスの投稿画面から、新規追加で記事を作成します。

右側の文書のタブを下にスクロールしていくと、アイキャッチ画像のカテゴリーがあります。開くと、メディアライブラリーが開くと思います。ワードプレスの中にまだ画像が無い場合は、予め保存しておいたフォルダをアップロードのタブから写真をドロップしてアップロードしましょう。

有料テーマの優れているところは、一つ一つ画像の大きさや容量を設定しなくても、自動でアイキャッチ画像を表示してくれるところです!

アイキャッチを載せる際ですが、画像は名前を付けて保存すること。またアイキャッチのキャプションを入力すること。
  • 画像はそれぞれ名前をつけて保存する

記事数が増えるとその分使用する画像の枚数が増えます。重複して他の記事に画像を貼り付けないようにしっかりとフォルダ分け、名前分けをしておきましょう。間違えてブログ記事から画像を削除してしまっても、外部のフォルダには残っていますので、またアップロードできますし、編集して文字を加えたりする機会もあると思うので分かりやすい名前にすることをおススメします。

  • アイキャッチの代替テキストを入力

空白だったり、ここにキーワードを盛り込みすぎるとスパムと間違えられるので、簡単な画像の説明文でオッケーです。この一手間がSEO対策にも繋がります。

スポンサーリンク

(SEO対策)ブログ記事に画像を載せる方法

 

ブログ記事に画像を挿入する方法

次は、記事内に画像を貼る方法です。既にワードプレス内に画像が保存されていたらメディアライブラリから追加、まだでしたら隣のアップロードから画像をドロップして保存しましょう。

予め保存した画像をメディアを追加から貼り付けます

ブログ記事に写真を挿入する

画像が表示されたら以下の赤枠の部分も合わせて入力しておくことをおススメします。

写真の代替テキストを入力

  • 代替テキスト(画像表示に不具合がある際など代わりに読み上げてくれるのがこの部分です。SEO対策にもなりますので、簡潔に説明しましょう)
  • タイトル
  • キャプション(その画像の簡単な説明)
  • 概要(画像のメモがわりに使用します)

上記それぞれ入力が終わったら投稿に挿入して完成です。

代替テキストはキーワードを詰め込みすぎたり、説明が長すぎると間違ってスパムと認識される場合もありますので、できるだけ短く一言でまとめてください。

画面のスクリーンショットから画像を載せる

パソコン画面のスクリーンショットには2通りの方法があります。

  1. パソコン画面全体を保存したい場合→キーボードの右上にあるPrint SCを押します
  2. 今開いているページのスクリーンショットをしたい場合→Alt+Print SCを押しましょう

画像の保存サイズ目安

記事に使用した画像は上記でも説明しているように都度名前を付けて保存し、容量も大きすぎないように編集しておきましょう。

 
なりまい
当サイトでは予めカテゴリーごとに分けて写真フォルダを作成していますので、重複しないように区別しています

フォルダに保存する際のポイントとしては、

  • 画像は必ず名前を付けて保存(画像の保存は、JPGまたはPNGにしてください)
  • 画像容量は最大でも100KB、できればそれ以下が好ましい(容量が大きいとページの表示速度が遅くなります)
  • 保存画像が大きい場合は、ペイント機能でトリミングしてください(横795px、縦300px)

ここまでできたら画像貼り付け作業は完了です。細かく地道な作業ですが読者目線での読みやすさを心がけて頑張りましょう。

画像のサイズ変更とトリミング方法

 

画像の編集、加工はペイントを使おう

画像の圧縮やトリミングには、ペイントを使用します。方法はいたって簡単です。

まずはトリミングしたい画像を右クリックでコピーしておきます

次にパソコンの左下スタートボタンからペイントを探し開きます

ペイントを開くと下の画面が開くと思います。(見えづらくてすみません)

写真の加工はペイントを使おう

上の赤い矢印部分の「選択」をクリック
トリミングしたい箇所をマウスで選択して囲いましょう→最後に画面の選択横にあるトリミングをクリック

これで余計なスペースが削除されます。

画像のサイズ変更

ペイントのトリミング下にあるサイズ変更をクリックします。私がよく使うのがピクセルの方ですね。サイズ変更して軽くした方が表示速度も上がりますので小さくして貼りましょう。以下サイズの目安です。

  • Blogバナーのアイキャッチ→1280×720ピクセル
  • ファビコン→512×512ピクセル
  • 記事内画像→およそ700×350くらい(ここは使用する画像によって変動しています)

画像に入っている文字を消す方法

スクリーンショットなどの画像を使用する場合、そのまま載せると個人情報が掲載されることがありますので、気を付けてください。

私が文字を消すときはペイント画面上にある図形から□を選択し、まず消したい箇所を囲います
その後に、ブラシ左側の塗りつぶしをクリックし、色を選択して文字を消しています。

編集やトリミングした画像は、必ず上書き保存することを忘れないでくださいね!

投稿前にはプレビュー画面で確認

 

画像投稿前の最終チェックをしよう

画像の貼り付け方、編集方法はこれで完璧です。貼り付けたらいよいよブログ記事を投稿したいこところですが、最後に必ずプレビュー画面で確認するようにしてください。

読者はほぼスマホから記事を読むことが多いと思いますので、画像サイズが大きすぎてスクロールしないと見れないような画像は止めましょう。また、貼り付けた画像が記事の内容と合っているのか今一度確認してください。

気を付けたいところは以下ですね。どれもSEO対策として必要なので、忘れずに設定してください。

  • 画像は必ず名前を付けてJPNまたはPNG保存→画像には代替テキストを入力
  • 画像容量は100KB前後→表示速度を上げる
  • 保存画像のサイズはトリミングで横795px、縦300pxに変更

ワードプレスのザ・トールにおける画像挿入方法は以上となります。

何か操作でお困りの際は連絡してくださいね。

スポンサーリンク
画像の貼り方
最新情報をチェックしよう!