ブログ

アイキャッチ画像が上下左右切れてしまう理由

アイキャッチ画像、上下左右切れる現象

ブログを始めて1か月が過ぎました。
この1か月に投稿記事にアイキャッチ画像を設定する方法も途中で発見し、
入れてきましたが、画像が上下左右が切れることがありました。

なぜだろう?
サイトを色々検索した結果、
画像サイズに気を付けなければならないことが分かりました。
調べているうちに、
アイキャッチ画像とサムネイル画像というものがあることも分かりました。

  • アイキャッチ画像 記事を代表する画像
  • サムネイル画像  多数の画像を一覧表示するために、縮小された画像

サムネイル画像は、記事の中に貼り付けている画像なのでしょうか?
まだここはよく分かりません。

画像サイズを横760px 縦428pxにすることで解決

「JIN」公式マニュアルを見ると、以下の記述がありました。

JINではアップロードしてもらった画像を、
16:9の比率になるよう自動トリミングするようになっています。
そのため横幅が760px以上の画像をいれてもらえると
綺麗に入ります
(縦は自動で切り取られます。)
厳密に言えば、横760px:縦428pxが16:9にあたるので、
これくらいの画像サイズで作成するとアイキャッチが
綺麗にはまります。
それ以上の大きさでも、16:9の比率を守れていると
特に綺麗にはまります。

画像のサイズを、今まで全く意識してなかったです。
縦長でも、横長でも、JINが自動で画像を伸縮してくれると
考えていました。

画像のサイズもどこで設定するのか分からなかったのですが、
とりあえず画像を処理している「ペイント」を開きました。
ありました!
ここで画像の大きさを設定するようです。

アイキャッチ画像、サムネイル画像を試してみる

ペイントで大きさを設定してアイキャッチ画像を作り、設定しました。
試しに同じ大きさの画像を記事の中に貼り付けると以下のようになりました。

ん?同じ画像を貼り付けたのに、小さくなりました。
サムネイル画像だからこれで良いのでしょうか?
この大きさだと老眼が進んだ私には読めないです。
まだまだWordPressの勉強が足りないです。。。
今後も引き続き継続していきます。

まとめ

CSSやプラグインを使って画像の大きさを統一する方法も
サイトで紹介されていましたが、CSSを修正するのは怖いので試していません。

今後は、

  • 画像のサイズを横760px:縦428pxで作る
  • WordPressの仕組みをもっと勉強する

これからもブログを続けていきます。