こんな方に読んで欲しい！
- ブログの画像がぼやけているので修正したいが原因がわからない
- アイキャッチがみきれたり、余白があったりするので修正したい
- ブログのサイズにあっていない画像を一括修正したい
- テーマを変更したらサムネイルのサイズが変になったのでなおしたい
ブログを更新していいて「前からこんなに画像荒かったっけ？」って思うことはありませんか？
画像を変更したわけでもないのにアイキャッチに余白が入ったり、画像がぼやけていたりする場合、もしかしたらWordPressのテーマを変更したことが原因かもしれません。
ここがポイント！
ブログの画像は数が半端ないので修正するのは大変ですが、今回紹介するプラグインは膨大な数の画像を一括でブログにぴったりになるようサイズを修正してくれます。
1. WordPressの画像登録の仕組み
WordPressはアップロードされた画像をある程度決まった大きさに自動でリサイズしてくれるので、テキトーに気に入った画像をアップロードしても問題になることはありません。
1-1. サムネイルってそもそも何？
サムネイルとは「親指の爪のように小さくて簡潔」という意味で、表示範囲が限られている場合に代替えで表示されるイメージのことを言います。
写真や画像であれば、印象の強い部分を切り抜いたものや全体的に縮小したものが使われます。
1-2. WordPressはサムネイルを自動生成
実はWordPressに画像をアップロードするとユーザーが意識することなく、複数のサイズが異なるサムネイルを自動的に作り適切な場所に配置します。
代表的な例はアイキャッチ、ユーザーがWordPressに画像をアップロードしてアイキャッチに指定すると下記のようなパターンで画像を自動的に配置します。
- ブログ本文の最上位に大きめのサイズで配置
- 投稿一覧のタイトル付近に中くらいのサイズで配置
- ブログカードなど、内部リンク付近に小さいサイズで配置
1-3. WordPressの画像サイズの初期設定
WordPressではいくつかのサイズのサムネイルを自動生成しますが、ユーザーがサイズを指定できるサムネイルが下記の3つです。
- サムネイルサイズ( thumbnail )
- 中サイズ( medium )
- 大サイズ( large )
WordPressの管理画面>設定>メディア を開くと、WordPressが自動的に生成するサムネイルサイズ、中サイズ、大サイズと3つのサイズそれぞれの上限を設定する項目があります。
1-4. テーマのサムネイルサイズ設定
ユーザーが設定できるサムネイルの他にWordPressのテーマが指定するサムネイルサイズがありますが、これはテーマ開発者が設定するものでテーマごとに使用するサムネイルサイズが違います。
ここに注意！
テーマが適応された状態で画像をアップロードした場合、WordPressはテーマが必要とするサムネイルサイズも同時に生成するため問題は起きませんが、ブログを途中で別のテーマに変更すると、そのテーマが必要なサムネイルサイズが存在しないので、余白があったり画像がぼやけたりする不具合が発生します。
2. Regenerate Thumbnailsのメリット
Regenerate Thumbnails が再生成するサムネイルは下記のとおりです。
ここがポイント！
- ユーザーが指定できる大中小3つのサイズのサムネイル
- テーマが使用するサムネイル(数はプラグインによってさまざま）
プラグインRegenerate Thumbnailsは、必要なサムネイルを調べてWordPressにアップロードされている画像から再生成して配置済みのサムネイルに置き換えます。
3. Regenerate Thumbnailsの導入方法
Regenerate ThumbnailsはWordPress公式プラグインなので、WordPress管理画面>プラグイン>新規追加 から簡単にインストールできます。
3-1. Regenerate Thumbnailsインストール手順
右側のキーワード検索テキストボックスで「 Regenerate 」と検索すると一番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。
インストール済みプラグイン一覧にRegenerate Thumbnailsが表示されていればインストール完了、このプラグインは初期設定などがないのですぐに使えます。
4. Regenerate Thumbnailsの使い方
Regenerate Thumbnailsは、WordPress管理画面>ツール>Regenerate Thumbnails から使用、下記は実際の操作画面です。
チェックボックス①②の内容を確認してボタン①②を押せば、ユーザーが指定するサムネイルサイズとテーマが使うサムネイルサイズが再生成、再配置されます。
4-1. 操作画面の解説
4-1-1. チェックボックス①
ここにチェックを入れると、ユーザーとテーマが指定するサムネイルサイズに一致しないものだけを対象としますので、作業時間を短くできます。
4-1-2. チェックボックス②
ここにチェックを入れると、不要になったサムネイルを自動的に削除するのでサーバーの空き容量をふやすことができます。
4-1-3. ボタン①
ボタン①を押すと記事本文に挿入された画像などWordPressメディアに登録したすべての画像サムネイルを再生成-再登録します。
4-1-4. ボタン②
ボタン②を押すとアイキャッチのサムネイルを再生成-再登録します。
ここがポイント！
アイキャッチは英語でFeatured image、アイキャッチの画像だけ修正したい場合はこちらをクリックします。
4-1-5. サムネイルサイズ情報
ユーザーが指定できるサムネイルとテーマが指定するサムネイルとそのサイズが一覧で表示、テーマを変えるとこの内容は大きく変化します。
5. Regenerate Thumbnailsでアイキャッチ画像を一括修正する
実験的にWordPressのサムネイルサイズを設定変更してRegenerate Thumbnailsを使ってアイキャッチのサイズを修正してみようとおもいます。
WordPressのサムネイルサイズ設定を変更
前項でも触れましたが、ユーザーが指定できるサムネイルサイズは WordPress管理画面>設定>メディア で設定できますので、今回は適当にサムネイルサイズを150から100に変更します。
WordPressのテーマを変更する
WordPress管理画面>外観>テーマからTwenty Fourteenという少し古めのテーマに変更、現在よく使われているテーマのサムネイルサイズと大きく違うテーマをあえて選びました。
テーマを変更するとアイキャッチに指定している画像に変な余白があるのがわかります。
Regenerate Thumbnailsでサムネイルの再生成
WordPress管理画面>ツール>Regenerate Thumbnailsから操作、下記ではユーザーが指定するサムネイルサイズとテーマが指定するサムネイルサイズが変更されているのがわかります。
下記はRegenerate Thumbnailsを実行した後のサムネイル画像、余白がなくなり記事本文のサイズにぴったりです。
6. まとめ
Regenerate Thumbnailsを使えばテーマが必要としているサムネイルサイズが表示される上に、サイズが合わなくなっているサムネイルがある場合は一括で修正して適切な場所に再配置されます。
画像がぼやけていたり、無駄な余白があったりする場合はRegenerate Thumbnailsをダウンロードして確認してみてはいかがでしょうか？