当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

アイキャッチ画像の修正方法を解説【誰でもわかる】

アイキャッチ画像
みきてぃ東西線

ブログを長く運営していくと、必要に応じて記事のアイキャッチ画像を修正しなければなりません。といっても、「どうやってアイキャッチ画像を修正するの?」と悩む方も多いですよね。

今回は、「記事のアイキャッチ画像の修正方法」について、分かりやすく解説していきます。

アイキャッチ画像とは

記事の冒頭部分や、記事一覧ページなどに表示されるサムネイルのこと。

基本的なアイキャッチ画像の修正方法は?

基本的なアイキャッチ画像の修正方法は、以下の3つです。

  • タイトルを修正
  • 文字を修正
  • 画像を修正

タイトルを修正

記事タイトルが変わった場合、そのままでは違和感を覚えることもありますので、アイキャッチ画像内のタイトル文も合わせて修正しておきましょう。

以下は、「金魚の画像」から「金魚の育て方」にタイトルを変えた例です。

アイキャッチ画像の修正1「タイトルを修正する」

文字を修正

背景画像によっては、文字の色などの見直しをする場合があります。

文字の縁取りをする

文字が背景写真の色と重なって読みにくい場合は、文字に縁取りをすることで読みやすくなります。

アイキャッチ画像の修正2「文字を縁取りする」

文字の背後を塗りつぶす透明度を設定

どうしても文字が画像と重なって見づらく感じる場合は、文字の背後にボックスを入れ、さらにボックスの透明度を調整することになります。

アイキャッチ画像の修正3「文字の背後を塗りつぶす透明度を設定する」

背景写真に合わせて文字の色を変える

背景写真と文字の色によっては、文字が見えづらく感じることがあります。文字の色が背景写真に溶け込むことが無いようにしましょう。

以下は、文字の色を濃い青色から黄色に変えた場合の例です。

アイキャッチ画像の修正4「背景写真に合わせて文字の色を変える」

画像を修正

アイキャッチ画像によっては、文字だけでなく、画像の修正が必要になる場合があります。

その場合は、

  • 明るい写真に修正する
  • 画像の配置を調整する

の2点を考慮して、アイキャッチ画像を修正しましょう。

明るい写真に修正

文字より画像が見づらい場合は、画像を明るくします。

GIMPなどの画像編集ソフトを使って、明るさやコントラストの調整を行ってから、再度画像を貼り直ししましょう。

アイキャッチ画像の修正5「明るい写真に修正する」

画像の配置を調整する

イラストなどの画像をアイキャッチ画像の一部として使っている場合は、アイキャッチ画像と文字のバランスが合うように直しておくことが大事です。

特にSNSでブログの記事がシェアされた時に、投稿内容で表示されるサムネイル画像が正方形などでトリミングされることもあるので、その点も考慮した方が良いです。

当ブログにおけるアイキャッチ画像修正の一例

一例として、当ブログにおけるアイキャッチ画像の修正過程をほんの一部だけ紹介します。参考までにどうぞ。

例1:Adobeソフト代わりに使える!買い切り型有料代替ソフトをご紹介」記事のアイキャッチ画像

アイキャッチ画像の修正例1

文字のみだと、さすがにシンプル過ぎると感じたので、イラスト付きのアイキャッチ画像に直しました。

まあ、アイキャッチ画像と記事タイトルは、記事一覧などに表示されるので、文字数はもう少しシンプルにした方が良かったかも、と思います。

例2:もう失敗しない!大学生向けノートPCの選び方【目的・用途に合ったものを選ぼう】」記事のアイキャッチ画像

アイキャッチ画像の修正例2

記事を公開した当初のアイキャッチ画像は黒文字の背後に半透明の灰色の枠で付けていたため、写真が大きく隠れてしまうデメリットもありました。

その後、下に縁取りをした白文字を入れて修正したものの、今度はノートパソコンのキーボードが隠れてしまい、どうしても「シンプルさ」が無かったため、最終的に背景色に文字とノートパソコンのイラストをのせただけのアイキャッチ画像に直しました。

例3:2022年の満月はいつ見られるの?」記事のアイキャッチ画像

アイキャッチ画像の修正例3

こちらのアイキャッチ画像では、記事一覧などで表示されるサムネイル画像が長方形や正方形にトリミングされても困らないように、満月のイラストを右上部分から中央部分に配置し直しました。

アイキャッチ画像を修正した後にやること

アイキャッチ画像を修正した後は、必要に応じて以下の作業を行います。

  • アイキャッチ画像のサイズを軽くする
  • ファイル名を変更する

アイキャッチ画像のサイズを軽くする

アイキャッチ画像では背景画像を使うことが多いため、どうしても画像サイズが大きくなりやすいです。

アイキャッチ画像の修正が完了したら、仕上げに画像圧縮サイトを利用して画像を軽くする作業も忘れずに行いましょう!

プロフィール用アイコン
みきてぃ東西線

WordPressを使っている方は「EWWW Image Optimizer」プラグインを使うと、楽に画像を軽くすることができるよ。

念のためファイル名を変更する

既にアップロードしているファイル名と同じファイル名をアップロードすると、ファイル名の最後に数字番号が付いてしまうことがあります。

そのため、アップロード前には念のためファイル名を変更するのも忘れずに行いましょう。

プロフィール用アイコン
みきてぃ東西線

いちいちファイル名を変更してアップロードし直すのが面倒な場合は、「Enable Media Replace」プラグインを使うと、ファイル名はそのままで画像だけ差し替えることができるよ。

まとめ

というわけで、今回は「アイキャッチ画像の修正方法」について解説しました。

ブログやサイトを長く運営していくと、文章のリライトだけでなくアイキャッチ画像の修正も必要になっていきます。

ブログを読んでいる方が少しでもワクワクするアイキャッチ画像になるように、少しずつ改善していきましょう!

プロフィール用アイコン
みきてぃ東西線

アイキャッチ画像の作り方は、以下の記事を読んでね!

▼あわせて読みたい
初心者でもできる!アイキャッチ画像の簡単な作り方
初心者でもできる!アイキャッチ画像の簡単な作り方

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました