ブログのアイキャッチ画像設定とサイズ

2020年10月9日

サムネイルとアイキャッチ？この違いがいまいちピンと来ていなかったのですが、

結果、アイキャッチ設定した画像がサムネイルとしてリサイズされて利用できることを知りました。

アイキャッチ画像のサイズ変更

ワードプレスで記事を書く時に、設定できるアイキャッチ画像。

テーマはCocoonを利用させていただいています。

こちらで、サイズは800×800px以上か1024×1024pxと公式ページで、教えてくれていました。

自分のブログを見た時に、少し大きくないかなと思ったので、サイズ変更するにはと調べたんですが、

根本的な解決方法がわからず、自分が投稿している記事の画像サイズを調べました。
（これは、PHPとかを触らずに出来る方法を探していたので、画像サイズ変更という結論になりました。）

そして、私がやった方法は、ペイントで1000~600px  ぐらいの画像サイズにする事で解決しました。

縦のサイズを少し小さくすることで、思う大きさに表示することが出来ました。

そして、サムネイルを再生成する為に、プラグインの　Regenerate　Thumbnails。

このプラグインでサムネイル画像表示を同じに設定するように出来ました。

自分で撮った写真も、ペイントを使って同じぐらいのサイズに保存してから、

メディアにアップロードしていますが、縦横の比率を変えたくないので、片方だけのpx変更だけにとどめている為使っています。。

アイキャッチ画像をフリー素材からダウンロードした時も、ペイントでサイズ変更してからメディアにアップロードしています。

アイキャッチ画像として利用させていただいているのは「無料フリー素材のぱくたそ」です。

それと、「かわいいフリー素材集　いらすとや」です。

どちらも種類が多くて助かっています。

メディア設定

ダッシュボードの設定からメディアにいくと、メディアの設定をするところがあります。

メディアライブラリに画像を追加する際、以下でピクセル単位指定したサイズによって最大寸法が決定されます。

Cocoon側の設定

Cocoonの設定で画像設定の所に、全体の画像設定が出来る場所があります。

すべてのページ共通で利用できる画像設定です。

こちらの縦横比を自分の思う設定にして、保存します。

注意点（各個別の画像サイズ）

あまり小さなサイズをアップロードしない方がいいようです。

一番小さな画像でも、300px以上でサムネイルが生成されるので、

自分が保存している画像サイズを確認した方がいいと思います。

まとめ

どんなサイズがいいのか、サムネイルの画像サイズを一緒にしたい。

と言うところから始めました。

全部の画像サイズを変更するのは大変なので、アップロードした画像の中から、

目立って大きく見える物だけを、ペイントでサイズ変更してアップロードをやり直しました。

初めから調べてアップロードしていけばよかったんですが、記事が増えていくうちに、

気になるようになったので、大体のサイズで変更しています。

横幅だけは1000pxで統一していくようにしています。

基本は大きなサイズを推奨されているので、気にならない方は大きなサイズを、アップロードされればいいと思います。