サムネイルをリサイズして幅と高さをキレイにそろえる方法

 

当テーマではトップページの記事一覧や記事下の関連記事、サイドバーの新着記事などにアイキャッチ画像をサムネイルで表示しています。

正方形に切り抜くよう指定していますが、サイズがばらばらで見映えが悪い場合の対処としてサムネイルをリサイズする方法を解説します。

アイキャッチ画像の登録

まず、今までアイキャッチが不要であったテーマを使っていた方や、これからWordPressを始める方のために、登録方法を解説します。

といっても特に難しいことはなく、記事投稿ページの「アイキャッチ画像」から画像を指定するだけです。

アイキャッチ画像

もしどこにも見当たらない場合、表示オプションを開いてください。「アイキャッチ画像」にチェックを入れれば表示されます。

アイキャッチ表示

アイキャッチ画像(サムネイル)のリサイズ

WordPressサムネイル生成の概要

アイキャッチ画像の生成は、functions.php に記述しています。

100*100px、および 110*110px で生成され、「true」を指定することで切り抜き処理を行っています。ここを任意の値に変更すればどのようなサイズでも生成できるので、カスタマイズ時のご参考に。

ただ問題が一点あって、この生成は画像をアップロードしたときに行われます。

つまり、Gush2 をインストールしたあとにアップした画像は上記のサイズでサムネイルを生成しますが、テーマインストール前にアップされていた画像は指定のサイズになっていません。

そのため、関連記事などでこのように高さがばらばらになったりという見映えになってしまいます。

サムネイルの高さがばらばら

これをキレイにするために、サムネイルを再生成する必要があります。

サムネイルを一括リサイズするプラグイン

再生成処理は、「Regenerate Thumbnails」というプラグインを使うと簡単です。

regenerate thumbnailas

まず、プラグインを検索してインストール。

プラグインインストール

プラグインを有効化して、左サイドバーの「ツール」から「Regen. Thumbnails」を選択します。

管理画面サイドバー

なにやら英文が出てきますが、気にせず「Regenerate All Thumbnails」ボタンを押します。

サムネイル一括リサイズ

自動的にメディア内の画像がリサイズされます。

サムネイルリサイズ中画面

数によって時間がかかるので、しばらくお待ちください。100%になると完了です。

リサイズ完了

これでキレイに指定したサイズでそろいました。

サムネイル再生成後イメージ

切り抜き処理も行われていますね。

まとめ

Gush2 以外のテーマを利用するときや functions.php でサムネイルサイズの再指定を行ったときも、この方法でリサイズすることができます。

いったん再生成を行ってしまえば、プラグインは削除しても大丈夫です。

2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. […] 公式ページで「サムネイルをリサイズして幅と高さをキレイにそろえる方法」が紹介されていますので、ご参照ください。 […]

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。