ブログのノウハウ

【ブログ記事のアクセスが増える】『アイキャッチ画像』の画質を上げる3つの設定方法【クリック率アップ】

こんにちは、yujiです!
このブログではWordPressブログの運営ノウハウを詳しく解説しています。

ブログのトップページで、アイキャッチ画像がぼやけて表示されてしまいます。
デザインにこだわっているので、クリアな写真が表示されるように設定する方法を教えてください。

僕の経験なのですが、せっかくアイキャッチ画像を自作しても、ブログのトップページで粗めな画質で表示されて残念な気持ちになった覚えがあります。

僕のこだわりですが、ブログの顔でもあるアイキャッチ画像は絶対にきれいに表示します。
きれいなアイキャッチ画像には、以下のような効果がある印象です。

きれいなアイキャッチ画像の効果
・記事へのアクセスが増える
・ブログ内での回遊が増える
・関連記事に目が行きやすくなる

このように、アイキャッチ画像をきれいに表示するひと手間で、記事の第一印象は大きく変わります。

この記事では、以上のようなアイキャッチ画像の画質設定について解説します。

Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめています。
【最新攻略法】Amazonアソシエイトの審査方法を解説

【年収7ケタ突破】ブログ収入を稼ぐ仕組みをすべて解説
【効果あり】ブログのアクセス数を増やす方法【初心者向けSEO対策】

【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話
【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法

sponser link

改善するポイント

改善したいポイントは、ブログのトップページに表示される各記事のアイキャッチ画像の画質です。

テーマCocoonで「メインカラム2列」の「大きなサムネイル」で設定しています。
標準の表示だと、パソコンの画面で表示した場合にアイキャッチ画像に粗さが目立ちます。

またスマホ表示で1カラムになったときの画質も、少し物足りないと感じました。

sponser link

アイキャッチ画像の画質設定を3つ解説

アイキャッチ画像の画質設定を解説します。以下の3つを試せばきれいな画質で表示されるようになると思います。

画質設定
①画像のRetinaディスプレイ対応の設定方法
②WordPressのメディア設定を変更する方法
③functions.phpに書き込む方法

詳細を1つずつまとめます。

①画像のRetinaディスプレイ対応の設定方法

画質の低いアイキャッチ画像を、Retinaディスプレイ対応にすることで改善します。

WordPressメニューの「Cocoon設定」から「画像」へ進みます。

「全体画像設定」欄の「サムネイルをRetinaディスプレイ対応にする」にチェックを入れましょう。これで「変更をまとめて保存」をクリックして完了です。

ブログを表示して更新ボタンを押すと、アイキャッチ画像がクリアに表示されています。

僕の場合はこの方法で解決しましたが、Retinaディスプレイ対応の設定で改善されない場合は以下の2つ方法も試してみてください。

②WordPressのメディア設定を変更する方法

サムネイルに利用される画像の設定サイズが小さいとき、以下の方法で解決できます。

WordPressの画像サイズ
・サムネイル…150×150
・中サイズ…300×300
・大サイズ…1024×1024
・フルサイズ

このようにWordPressでは画像をアップロードした際、4種類のサイズが自動的に作成されサーバーに保存されています。

例えばこれがサムネイル150サイズにトリミングされた画像です。
使うテーマによってはこのサムネイル150サイズがアイキャッチに適用されます。

150サイズは相当小さい画像なので、大きな枠に当てはめるためにこの小さいサムネイル画像を無理やり引き延ばすと、画像がぼやけてしまいます。

なのでこのサムネイルサイズを変更します。

「設定」から「メディア」に進みます。

このように「メディア設定」の「画像サイズ」で、画像アップロードの際に生成される画像サイズ(大/中/サムネイル)を設定することができます。

ここでサムネイルサイズを変更しましょう。実際に確認しながら細かく調整するのがおすすめです。

「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」の部分については以下の通り。

トリミング設定
チェックを入れると、オリジナル画像から150サイズの正方形が切り取られます。
チェックを外すと、オリジナル画像がそのまま150サイズに縮小されます。

③functions.phpに書き込む方法

テーマCocoonのPHPを書き換えて、アイキャッチ画像設定を変更する方法もあります。

「外観」から「テーマエディター」を開きます。

この画面から「Cocoon Child(子テーマ)」の「functions.php」を開き、以下のコードを貼り付けます。(※このブログの設定で使っている縦型2列インデックス用のコードです)

縦型2列インデックス用のコード
function get_vertical_card_2_thumbnail_size(){
return ‘large’;
}

このように貼り付けたら「ファイルを更新」をクリックして完了です。

sponser link

改善前と改善後の比較

アイキャッチ画像の改善前と改善後の画質を比較します。

改善前

改善後

改善前はアイキャッチがぼやけていしたが、画質設定をRetinaディスプレイ対応にすることでクリアになりました。

改善前

改善後

スマホ表示も同様にクリアになりました。

最後に、これでも画質が変わらない場合の対策方法をまとめます。

それでもアイキャッチ画像の画質が変わらない場合…

以上の3つの方法を試してアイキャッチ画像の画質が変わらない場合は、設定変更後に「Regenerate Thumbnails」を使ってサムネイルの再生成を行います。

「プラグイン」→「新規追加」と進みます。

検索欄で「Regenerate Thumbnails」を検索します。

検索結果から「Regenerate Thumbnails」をインストールし、有効化します。

有効化ができたら「ツール」から「Regenerate Thumbnails」を表示します。

「Regenerate Thumbnails For All ~ Attachments」をクリックします。

プロセスが開始するので、この画面のまま待機します。

この画面が表示されたらプロセス完了です。
※このブログで実際に画像処理をしたところ15分ほどかかりました。

Regenerate Thumbnailsの使い道
メインカラム幅を小→大などに変更した場合や、メインカラム数を2本から1本化したときなど、変更前の小さいサイズのサムネイル画像が保持され、そのまま引き延ばして表示されることがあります。こういった場合も「Regenerate Thumbnails」でサムネイルを再生成する方法が有効です。

最後に、僕が使っているおすすめの画像編集ソフトを紹介します。

おすすめの画像編集ソフト

おすすめの画像編集ソフトは以下の2つです!

おすすめの画像編集ソフト
①Adobe Photoshop/Adobe Illustrator
②canva

フォトショップやイラストレーターは高度なデザインが可能です。canvaはシンプルで簡単に利用できます。詳細は以下の通り。

①Adobe Photoshop/Adobe Illustrator

デザインツールの王道であり、全てのデザイナーやデジタルフォトグラファー、イラストレーターも使用しているAdobe PhotoshopAdobe Illustrator

ポスターやチラシを作成する場合は、Photoshopで写真を加工し、Illustratorでレイアウトを仕上げるといったように組み合わせます。

無料で利用できるサービスから高度なオプションまで、自分が使いたいレベルで利用することができ、初心者からプロまで幅広くカバーしているツールです。

今なら学生・教職員向けセール中で、71%OFFで購入できます。
学生・教職員向けセールはこちら

②canva

canvaは無料で利用できる画像編集ツールです。初心者向けでとても使いやすく、僕も愛用しています。

洗練されたテンプレートや、各SNSの投稿用に最適化されたフレームを使うことができます。

canvaの使い方は以下の記事ですべてまとめました。興味がある方は是非。
【canva】記事へのアクセスが増えるおしゃれな『アイキャッチ画像』の作り方【スキルなしでもOK】

まとめ

この記事では、アイキャッチ画像の画質設定方法を3つ紹介しました。まとめると以下の通り。

画質設定
①画像のRetinaディスプレイ対応の設定方法。
②WordPressのメディア設定を変更する方法。
③functions.phpに書き込む方法。

また繰り返しになりますが、きれいなアイキャッチ画像には以下のような効果がある印象です。

きれいなアイキャッチ画像の効果。
・記事へのアクセスが増える。
・ブログ内での回遊が増える。
・関連記事に目が行きやすくなる。

このように、アイキャッチ画像をきれい表示することで、ブログ記事の第一印象はよくなりアクセスが増えやすくなります。

この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました!

【年収7ケタ突破】ブログ収入を稼ぐ仕組みをすべて解説
【効果あり】ブログのアクセス数を増やす方法【初心者向けSEO対策】

【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話
【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法

コメント

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