本ブログのトップページを見ていたところ、ブログ記事一覧のサムネイル(縮小画像)のサイズがバラバラであることに気づきました。
全て正方形に統一させたかったので、サムネイルのサイズを修正することにしました。
修正前
3件の記事が表示されていますが、1,2件目の記事の左側のサムネイルは長方形になっています。
そこで、3件目のような正方形に統一させることにします。
サムネイルの仕組み
そもそもサムネイルはどのような仕組みで表示されているのでしょうか。
簡単に説明していきます。
画像サイズ
「アイキャッチ画像を設定」や「メディアを追加」からファイルをアップロードした際に、実はサイズの異なる3つの画像が自動生成されています。
自動生成される画像のサイズには、「サムネイル」「中サイズ」「大サイズ」の3種類あります。
それぞれの値は管理画面の設定から変更することが出来ますが、アップロードのタイミングで毎回任意の値を設定することは出来ません。
そのため、最初に設定しておくのが良いでしょう。
記事一覧に表示されるサムネイル
今回修正したい記事一覧に使われていた長方形の画像は、「サムネイル」サイズの一番小さい画像です。
このサムネイル画像の生成時、何らかの理由で長方形になってしまったのだろうと推測出来ますので、まずは画像サイズの設定を確認することにしました。
メディア設定
WordPress管理画面より、設定→メディアをクリックします。
すると、「メディア設定」画面に遷移します。
この「画像サイズ」から任意の値を設定出来ます。
デフォルトでは、
サムネイルのサイズ：150×150px
中サイズ：300×300px
大サイズ：1024×1024px
と設定されているはずですが、確認したところ何故かサムネイルのサイズが640×640pxになっていました。
WordPress初心者の頃に色々設定を変更してみて、そのままになっていたのでしょうか。。。
そして、長方形になっていた画像のオリジナルのサイズは、640×480pxでした。
おそらく、高さが最大寸法に満たなかったために長方形に変換されていたのでしょう。
サムネイルのサイズを150X150pxに修正し、次回以降は正方形のサムネイル画像が生成されることを確認しました。
なお、サムネイルのサイズの項目で、「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」にチェックが入っていますが、このチェックを外すと、元の画像の比率を保ったままサムネイルが作成されるようです。
つまり、元の画像が長方形であれば、長方形のサムネイルが作成されることになります。
Regenerate Thumbnails
次回以降のサムネイルは150×150pxで生成されるようになりましたが、既に生成してしまったサムネイルは設定を変えたところで変更されません。
そこで、サムネイルを再作成してくれるプラグイン「Regenerate Thumbnails」をインストールします。
WordPress管理画面より、プラグイン→新規追加をクリックします。
「プラグインを追加」画面に遷移したら、「プラグインの検索…」のテキストボックスに「Regenerate Thumbnails」と入力(コピペ)すると、プラグインの候補が表示されます。
左上の「Regenerate Thumbnails」の「今すぐインストール」ボタンをクリックします。
インストールが完了したら「有効化」ボタンをクリックします。
有効化されたらWordPress管理画面より、ツール→Regenerate Thumbnailsをクリックします。
「Regenerate Thumbnails For All ** Attachments」のボタンをクリックすると、全てのサムネイルの再作成が始まります。
今回は92画像分でしたので、完了まで数分かかりました。
再作成が完了したら、Webページ上のサムネイルも更新されているので、リロードしてみましょう。
修正後
長方形だったサムネイルが正方形になりました！
まとめ
私のようにサムネイルのサイズを大きくしてしまっていたパターンは少ないかもしれませんが、画像サイズがおかしいかも？といった場合には、まずはメディア設定を確認してみましょう。
また、後から画像サイズを変更し、アップロード済みの画像サイズを変更したい場合に、ボタン一つで画像を再作成してくれるプラグイン「Regenerate Thumbnails」は非常に便利でした。
コメント