ブログの記事に画像を挿入する方法【初心者向け ワードプレス】

ブログに画像を挿入する方法ブログはじめ
チョコ
チョコ

ブログの記事に画像を挿入したいんだけど

どうやったらうまくできるのかな??

なにかコツとかあるのかな?

 

 

さっちん
さっちん

ブログの記事に画像を入れる方法を説明するね!

私はブログを始めてから2年目になります!

今まで画像の処理をしてきた経験を生かして、

今回はワードプレスのテキストエディタで説明していきますね!

 

ブログ記事には、画像などによるイメージが大切な意味を持ちます

 

ブログの記事に画像を挿入することによって、そのブログのイメージが出来上がりますし、

説明する際は手順などを、わかりやすくすることができます。

 

このようにブログには、適度に画像を入れることが、ユーザーにとっても読みやすくなります。

その理由としては

 

*読者が文章を読むだけでなく、画像があることでメリハリができて、楽しめる

*説明文の場合、文字だけよりも画像があるほうがわかりやすい

*ブログのイメージを作りやすい(ペルソナに響きやすい)

*適切にAlt設定をすることで、SEO対策にもなる

 

などの利点があります。

では、

どんな画像を、

どのように探して

どうやって挿入するのか説明していきます。

 

スポンサーリンク

ブログの記事に挿入する画像の選び方

画像の選び方

WordPress のブログの記事に画像を入れる場合、

さし絵だけの意味の場合は、絵や画像の種類にそれほどこだわらなくても大丈夫です。

(ただし、イメージがかけ離れているものは避けましょう)

 

自分のセンスで、

ブログのイメージとぴったりだと思うものを探していきます。

私の場合は、記事を書き終えてから

それに合った画像を探します。

そのときに、抑えるポイントはこちら!

 

どこに画像を挿入するか考えて、入れる画像の枚数を決める

画像を入れていくポイントとなる場所はココ!

 

*アイキャッチ画像(見出しの部分)

*h2タグの下 (記事内の章の区切り部分)

*必要ならh3タグの下

などに入れます。

 

ほかに、操作手順などの説明画が必要な場合は、プラスしていきます。

(操作手順の画像が多めに入ったら、ほかの挿絵は控えめにします)

 

画像のタイプを考える

挿入する画像の場所と枚数が決まったら、

どんなイメージの画像にするか、決めます。

自分のブログのイメージなどを考慮しながら、

統一感が出るように心がけて選びましょう。

または、説明につける画像なら、なるべくイメージしやすいものを選びましょう!

 

フリーフォトなどからキーワードで探す

フリーフォトのサイトから、何枚かキーワードを使ってピックアップします。

このとき、自分の記事のイメージからくるキーワードを入れることで

自分のイメージに近いものを探すことができます。

 

ちなみに私が普段からよく使っているものは、

フォトAC

写真素材なら「写真AC」無料(フリー)ダウンロードOK
無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンクは一切不要です。Web、DTP、動画などの写真素材としてお使いください。

(ただし無料の場合は、検索回数が一日5回までです)

いろんな条件で、さまざまな種類の写真があり、とても役立ちます。

 

O-DAN

O-DAN (オーダン)- 無料写真素材・フリーフォト検索
高品質な無料写真素材・フリーフォトを40以上の有名ストックフォトサイトから日本語で横断検索できるサービス「O-DAN(オーダン)」

とても雰囲気のあるきれいな写真が沢山あり、

イメージづくりにはピッタリの写真です。

 

自分の記事内容に合わせて、色々と使い分けてみるとよいです。

この他にも、フリーイラストなどのサイトもありますので、

ぜひお気に入りのものを見つけてみてくださいね。

この時、ダウンロードした素材の使用方法については
使用条件に違反しないように、必ず利用規約を確認した上で、使用してください。

選んだイメージ素材を圧縮またはリサイズする

ダウンロードした素材を、そのまま使用すると、大きさが大きすぎて

貼り付けができなかったり、貼り付けてもサイトの表示スピードが遅くなってしまうことがあります。

そのため、貼り付け前には圧縮をしましょう。

圧縮サイトで圧縮する

私がよく利用しているのは、Website Planet の画像圧縮サイトです。

アプリをダウンロードせずに、オンラインで圧縮ができます。

https://www.websiteplanet.com/

 

自分が選んだ画像を、そのままここにドラッグ&ドロップすることで、圧縮が始まります。

圧縮ができた画像をダウンロードボタンで、自分のパソコンにダウンロードして利用します。

 

かなり、きれいな画像のまま圧縮ができます。

 

プレビュー画面より 編集する

パソコンの中にあるものだけで、画像のサイズを変更できます。

Macの場合

「プレビュー」で画像を開き、「ツール」タブをクリックし、「サイズを調整」を選択します。

Macで画像サイズ変更

写真の幅、高さ、解像度などが出てきますので、これ調整していくと、画面下に調整後のサイズが出てきます。

できれば、100KB 以下に抑えるようにしてみます。

Macで画像サイズ変更

 

自分で取った写真などは、2MBなどの大きさになっていますので、

いきなりオンラインの圧縮ツールを使っても、あまり小さくはなりません。

 

そのようなときは、これである程度小さくして、さらに圧縮したい場合は、

オンライン圧縮ツールを使うと良いでしょう。

 

ワードプレスの圧縮ツールもありますが、

あまりプラグインを入れてしまうと、サイトが重たくなってしまう可能性があるのと

更新などの管理が頻繁にあるので、

なるべくプラグインは必要ない場合は、インストールはしないほうが良いでしょう。

圧縮した画像を Wordpressに挿入する

圧縮した画像を、今度はブログに貼り付けましょう。

*圧縮した画像ファイルをWordpressのメディアライブラリへアップロードする

まずは、ブログをかくテキスト画面の上にある「メディアを追加」ボタンをクリックします。

 

ブログ 画像挿入方法

 

ファイルをアップロード タブと メディアライブラリ タブがあります。

新しくダウンロードしたファイルを使う場合は、「ファイルをアップロード」タブをクリックし

下の「ファイルを選択」ボタンをクリック

 

ブログ 画像アップロード

 

ファイルを選択して、右下の「投稿に挿入」ボタンをクリック。

すると、自分の記事の中に、画像が挿入されます。

画像が挿入される位置は、カーソルがある場所になります。

もし、違う位置に挿入された場合は、画像を選択して、カット & ペーストで

移動できます。

 

画像を加工する場合

ギャラリーを作成する場合、左がわのメニューから、「ギャラリーを作成」をクリックし、

自分がギャラリーに追加したい画像を複数枚選択する。

画像を編集したい場合は、写真右下の「画像を編集」をクリックする。

画像を編集する

 

すると、上に、「切り取り」「回転」「反転」などのメニューが出てきます。

 

画像をトリミングする

 

画像のAltタグを設定する

挿入した画像は、そのままにせず、きちんとAltタグを設定しておきます。

Altタグとは、ウェブサイト上にある画像についての情報を記述するHTMLのタグの1つです。

あまり重要で内容に思えますが、実は、ここに画像の名前を記載することで

画像に、テキストで属性をもたせることができるので、

ここには記事に関連するキーワードを入れておくことをおすすめします

 

alt属性

 

 

 

 

 

 

 

 

 

ブログ記事に画像を挿入する際の注意点

ブログ記事に画像を挿入する際の注意点

以上画像の挿入方法を説明しましたが、

実はこれ以外にも、方法はあります。

 

私は、現在ブログを書くときに、いろんなものを試してみましたが、

一番使い勝手がよく、やりやすいと思ったのが、今回説明した方法です。

 

画像を挿入するときには、いくつか注意点があります。

*画像を挿入する場所は、アイキャッチ、h2タイトル下、必要に応じてh3タイトル下
(ただし、説明用の画像は必要に応じて挿入する)

*圧縮した画像のサイズは100kb前後であること。(大きいサイズはサイトのスピードが落ちてしまいます)

*画像のクオリティがある程度良いこと(ぼやけてしまってよくわからない画像は避けるようにします)

*イメージを統一する(色、雰囲気、などを統一することにより、サイトのまとまったイメージを作ることができる)

*画像の大きさが、画面に対して適当なサイズになるようにする(小さすぎると、イメージが伝わらない)

*画像のサイズを揃える(サイズがまちまちだと、統一感がなくなってしまう)

など。

画像をすべて入れてから、プレビューでもう一度確認してみましょう。

 

ブログのキーワードの使い方について詳しい説明をしている記事がありますので

こちらもぜひお読みください!

ブログの書き方 キーワードを効果的に使う方法 
ブログを書くときには、キーワードを適切な場所に、効果的に入れて書くことが、ポイントになります! せっかくキーワードを選んだのに、うまくコンテンツ内に散りばめられなければ グーグル検索に見つけてもらうことができません。 ポイントを、押さえておきましょう!

 

タイトルとURLをコピーしました