どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ブログ内で表示されている新着記事一覧や、関連記事一覧にサムネイル画像を使っている人も多いと思います。
今まではあまり気にしていなかったけど、「なんか他のブログと比べて画質が悪いな。」なんて感じたことはありませんか？
私はワードプレスでブログを運営していますが、ここ最近で使っている画像自体は十分余裕なサイズなのに、それよりも小さいサムネイル画像がぼやけて表示されていることに疑問を感じていました。
そこで今までにブログのカスタマイズで、画質にふれる内容あったことを思い出したので実践してみたところ、サクッと超高画質に激変したのでその方法をご紹介します。
サムネイル画像を見比べてみる
まずは以前まで設定していたサムネイル画像と、変更してからの画像の違いを見比べてみました。
記事内の画像はブログ高速化の兼ね合いで劣化しているかもしれないので、少し違いがわかりにくいかもしれません。
上記画像は記事内の下部にある関連記事ですが、変更前は画像全体がアップされている感じで、少し見切れてしまったりぼやけてしまっています。
ですが、変更後は枠内に画像内容がしっかり収まって、キレイに表示できているのがわかるかと思います。
サムネイル画像を表示するからには、やっぱりできるだけキレイに表示させたいですよね。
画像サイズを決めているのは
私が使っているワードプレスの場合は、どこで画像サイズを決めているかと言うと以下のコードによって指定されています。
<?php the_post_thumbnail( 'thumbnail' ); ?>
このコードは画像を出力する際にサイズを指定するもので、ワードプレスの「phpファイル」内に記載されています。
例えば使用しているテーマによっても若干名称は変わる場合もありますが、phpファイルのよって画像サイズの出力先も違います。
- itiran.php：トップページやアーカイブ
- newpost.php：新着記事一覧
- kanren.php：関連記事一覧
ワードプレスのデフォルトでは、全てのファイルで画像サイズが「thumbnail」で指定されている状態になっています。
「thumbnail」とは何か
「thumbnail」とは簡単に言うと、ワードプレスで設定されているサムネイルサイズを出力するコードで、管理画面左メニューの「設定」⇒「メディア」から画像サイズを確認することができます。
「メディア」内では、デフォルトで以下の３種類のサイズが設定されています。
- サムネイルのサイズ：150px × 150px
- 中サイズ：300px × 300px
- 大サイズ：1024px × 1024px
「thumbnail」というのは、この中の「サムネイルのサイズ150×150」を呼び出すコードになります。
つまり、どんなに高画質な画像であっても150×150でリサイズされてしまうので、それよりも大きいサムネイルサイズでブログ内に表示させると、サイズを合わせるために画像が拡大されて粗くなってしまうという訳です。
画像サイズを変更して高画質にする
画像が粗くならずに高画質のまま表示させる方法としては、以下の２種類があります。
- 「メディア」内で設定中の画像サイズを変更
- phpファイルの「thumbnail」を変更
「メディア」内で設定中の画像サイズを変更
メディア設定の「サムネイルのサイズ」の数値を任意のものに設定するだけで、画像の読み込みサイズを変更することができます。
至って簡単な方法ですが、ここで設定されている３種類の内容は画像をワードプレスにアップロード時に追加されるサイズでもあるので、一応覚えておいた方がいいでしょう。
ワードプレスでは画像をアップロードした際は、原寸サイズとメディア設定の３サイズを含めた計４種類のサイズがサーバー上に追加される仕組みです。
ここで設定されたサイズを記事内で使用している場合は、変更には注意しておきましょう。
phpファイルの「thumbnail」を変更
こちらの方法はphpファイル内に記載された「thumbnail」のコードを、直接違うサイズのコードに変更するものになります。
ワードプレスの管理画面メニューの「外観」⇒「テーマの編集」に移動し、最初の方で説明した３種類のphpファイルから変更したいファイルを開きます。
そうするとファイル内に以下のような記載があるので探してみて下さい。
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumbnail' ); ?> <?php else: // サムネイルを持っていないときの処理 ?>
コードが見つかったら、「( ‘thumbnail’ )」の部分を以下のいずれかに変更します。
- メディアで設定された中サイズ：medium
- メディアで設定された大サイズ：large
- アップロードした画像のフルサイズ：full
例えば中サイズに変更したい場合はこのようにコードを変更します。
<?php the_post_thumbnail( 'medium' ); ?>
これだけでサイズが変更されますが、画像が大きすぎると表示が若干崩れてしまうこともあるので、その辺はブログに合ったものを使用するといいかと思います。
まとめ
たったこれだけの変更で、今まで画質が悪かったサムネイル画像が、高画質な状態を保ったまま表示させることができます。
今までそんなに気にしていなかったことでしたが、意識して見てみると結構気になることだったので、修正できてかなりスッキリしましたね。
こんな簡単な方法で画像が高画質になるんだったら、もっと早くから確認してやっておくべきでした。
もしワードプレスでサムネイル画像の質が悪いと感じている方がいたら、ぜひこの方法を試してみて下さい。
