注目キーワード
  1. 仕事
  2. 美輪明宏
  3. キリスト教
  4. 哲学
サムネイルの切り抜き

サムネイルを綺麗に切り抜き、再設定する『Post Thumbnail Editor』

サムネイルの切り抜き

テーマ・テンプレートによっては、サイドバーやヘッダーのアイキャッチ画像を効果的に表示する為、独自のサムネイルを自動生成するものがあります。

このサイトも、WordPressデフォルトの「サムネイル」「中サイズ」「大サイズ」の他に、「icatch (中)(大)」というオリジナルのサムネイルを自動生成しています。

しかし、画像によっては上手く生成されず、頭半分が切れてしまったり、ポイントとなる動物や花が枠外にはみ出してしまったり、

たとえば、こういう画像。

サムネイルの切り抜き

テーマ独自のアイキャッチ画像を自動生成すると、ポイントとなる顔が枠外にはみ出しています。

アイキャッチ画像の切り抜きと再設定

かといって、一つ一つ、画像ソフトなどを編集→アップロードを繰り返すのは大変ですね。

そこでおすすめしたいのが、画像編集プラグインの『Post Thumbnail Editor』。

投稿画面の『アイキャッチ画像』の編集から簡単に切り抜きと保存 Crop&Save ができます。

WordPress.org 日本語

Fed up with the lack of automated tools to properly crop and…

アイキャッチ画像の横幅×高さを測定

まず、アイキャッチ画像の画像枠の長さを測定します。

フリーソフトの『ピクセル定規』など使って、アイキャッチ画像のサイズを測定します。

切り抜く際の指標にするので、大体、把握できればOK。

アイキャッチ画像のピクセル数を測定

このテーマの場合、icatch大サイズは、横幅1280ピクセル、高さが330ピクセルです。

比率は、横幅 / 高さ = 3.87 

サムネイルを綺麗に切り抜く

『Post Thumbnail Editor』を有効化すると、投稿画面の『メディアの追加(もしくはアイキャッチ画像)』→『添付ファイルの詳細』に『Post Thumbnail Editor』という項目が現れるので、これをクリック。

添付ファイルの詳細

編集画面に切り替わったら、Crop(切り抜き)したいサムネイルの種類を選択します。

この場合、「icatch1280」

続いて「Options」を開き、Aspect Ratioに「横幅/高さ」の比率を入力します。

上記の計算では、3.87・・ですが、少し余裕をもって3.5に設定しています。数字が小さいほど、1:1の比率に近くなります。

「Crop and save」にチェックを入れると、切り取った後、自動保存します。

Jpegの圧縮が必要な場合は、JPEG Compressionでパーセントを指定。

サムネイルの編集

画像の上で、マウスの左ボタンを押しながら、切り抜く範囲を指定。

指定した比率に準じたCrop枠が表示されます。

切り抜き画面

切り抜きと保存が成功すれば、画面右側に切り取った画像が表示されます。

一度、Crop&Saveを行えば、やり直すことはできないので、慎重に。

切り抜いたサムネイル

これでヘッダー画像の見映えがよくなりました。

見映えがよくなったヘッダー画像

プラグインの開発は4年前に終了していますが、まだまだ現役で使えるので、画像の位置が合わずなくてイライラしている方はぜひお試し下さい。

サムネイルの編集は『Crop Thumbnail』の方が使い勝手がいいのですが、(紹介記事はここ)、使用中のテーマやプラグインが干渉して、上手く動作しないこともあるので、Crop Thumbnailが駄目なら、Post Thumbnail Editor をどうぞ。

WordPress.org 日本語

"Crop Thumbnails" made it easy to get exacly that specific i…

海洋小説 《曙光》 MORGENROOD
ブックカバー
宇宙文明を支える稀少金属ニムロディウムをめぐる企業の攻防と、海洋社会の未来を描く人間ドラマ。心に傷を負った潜水艇のパイロットが、恋と仕事を通して成長する物語です。


Fatal error: Uncaught Error: Call to undefined function WP_Optimize() in /home/marier/novella.works/public_html/wp-content/plugins/wp-optimize/cache/file-based-page-cache-functions.php:149 Stack trace: #0 [internal function]: wpo_cache('<!DOCTYPE html>...', 9) #1 /home/marier/novella.works/public_html/wp-includes/functions.php(4552): ob_end_flush() #2 /home/marier/novella.works/public_html/wp-includes/class-wp-hook.php(288): wp_ob_end_flush_all('') #3 /home/marier/novella.works/public_html/wp-includes/class-wp-hook.php(312): WP_Hook->apply_filters('', Array) #4 /home/marier/novella.works/public_html/wp-includes/plugin.php(478): WP_Hook->do_action(Array) #5 /home/marier/novella.works/public_html/wp-includes/load.php(947): do_action('shutdown') #6 [internal function]: shutdown_action_hook() #7 {main} thrown in /home/marier/novella.works/public_html/wp-content/plugins/wp-optimize/cache/file-based-page-cache-functions.php on line 149