Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress投稿サムネイルのトリミングと編集方法

WordPressは、投稿サムネイルを見栄えの悪い方法でトリミングすることがあります。自動トリミングは画像の重要な部分を切り取ってしまう可能性があります。手動でサムネイルを切り抜き、編集することで、より良いビジュアルを作ることができる。

このガイドでは、WordPress投稿サムネイルのトリミングと編集の方法をご紹介します。これらのヒントは、あなたのサイト上であなたの画像が完璧に見えるようにするのに役立ちます。

手動編集では、サムネイルのフォーカスと構図をコントロールできます。これにより、コンテンツは常に最高の状態になります。

How to Crop and Edit WordPress Post Thumbnails

なぜWordPressの投稿サムネイルやおすすめ投稿画像をトリミング・編集するのか?

サムネイルやおすすめ画像を追加することは、新しいブログ投稿をより魅力的にする最も簡単な方法です。私たちの経験では、うまくトリミングされ、適切に編集されたサムネイルは、ユーザーのエンゲージメントに大きな影響を与えます。

ほとんどのWordPressテーマはアイキャッチ画像をサポートしており、サイト全体に美しく表示することができます。詳細な手順については、WordPressでおすすめ画像や投稿サムネイルを追加する方法についてのエキスパートガイドをご覧ください。

テーマによっては、WordPressが自動的に投稿サムネイルをトリミングする場合があり、必要な部分が切り取られて印象が悪くなることがあります。私たちの豊富な経験に基づいて、最良の結果を確実にするために手動でトリミングすることをお勧めします。

WordPressの投稿サムネイルを手動でトリミングする方法を探ってみましょう。また、サムネイルを効果的に編集するための高度なヒントもご紹介します。

WordPressからの投稿サムネイルの切り抜きと編集

WordPressで基本的な画像編集ができることをご存知ですか?WordPressの「画像の編集」機能を使えば、画像の切り抜き、回転、反転、拡大縮小ができます。

特に、メインのコンピューターでより強力な画像編集ソフトウェアにアクセスできない場合に便利です。

まず、編集したいサムネイルの投稿を開きます。右側の注目画像パネルまでスクロールダウンし、画像をクリックします。

Click on the Featured Image While Editing the Post

アイキャッチ画像を選択した状態でWordPressメディアライブラリが開きます。右側には、画像のaltテキスト、タイトル、キャプション、説明を追加できるエリアがあります。

また、上部の「添付ファイルの詳細」に「画像の編集」リンクがあります。

Click on the 'Edit Image' Link

そのリンクをクリックすると、「画像の編集」ページに移動します。

ここでは、画像のプレビュー、さまざまな方法でトリミングや編集を行うボタン、画像の拡大縮小やトリミングを行うためのその他の便利なオプションが表示されます。

The WordPress 'Edit Image' Page

まず、「サムネイル設定」セクションをご覧ください。ここでは、変更をすべての画像サイズに適用するか、サムネイルだけに適用するか、サムネイル以外のすべてのサイズに適用するかを選択できます。

このサムネイル設定は、「最新の投稿」ブロックを使用する場合など、WordPressがこの画像用に作成する最小の画像サイズ用であることを覚えておいてください。おすすめ画像や投稿サムネイルとは異なります。

Choose to Apply Changes to Thumbnails, Other Image Sizes, or Both

これらの設定により、おすすめ画像や投稿サムネイル用に1つのバージョンの画像を作成し、小さなサムネイル用に別のバージョンの画像を作成することができます。

このチュートリアルでは、初期設定の「すべての画像サイズ」を使用します。

WordPress投稿サムネイルのトリミング

画像をトリミングするには、画面上部の「トリミング」ボタンをクリックします。

画像の各コーナーとエッジにハンドルが表示されます。これらのハンドルをドラッグして、トリミング後に残す部分を選択できます。

Drag the Crop Handles to Select an Area

ハンドルをドラッグしながら、右側の「画像クロップ」にある「選択」フィールドを見て、画像がクロップされる寸法をモニターすることができます。

問題がなければ、もう一度’Crop’ボタンをクリックして画像を切り取ります。

Click the 'Crop' Button Again to Crop the Image

WordPressで投稿サムネイル画像をトリミングする一般的な理由は、1:1(Square)や16:9など、テーマに合ったアスペクト比にすることです。アスペクト比」設定を使えば、正しい比率のエリアを簡単に選択できます。

必要なアスペクト比を入力するだけで、選択したアスペクト比が維持される。

例えば、正方形の画像を確保するためにアスペクト比を1:1と入力します。画像の上でマウスをドラッグすると、形状は常に正方形になります。

Select the Aspect Ratio for Cropping

選択範囲に満足したら、もう一度「トリミング」ボタンをクリックします。

その後、’Save’ボタンをクリックして変更した画像を保存します。

WordPress投稿サムネイルの拡大縮小

サイズが大きすぎる画像は、サイトのパフォーマンスに影響します。さらに詳しくは、ウェブパフォーマンスのための画像最適化ガイドをご覧ください。

携帯電話やデジタルカメラから写真をインポートすると、解像度が非常に高くなります。解像度を下げると読み込みが速くなります。

画像の解像度は2560×1637ピクセルで、投稿サムネイルに必要なサイズより大きい。しかし、最初の「Scale Image」フィールドに入力することで、幅1200ピクセルに縮小することができる。

Scaling an Image

画像の高さが自動的に変わり、画像の比率が保たれていることに注目してください。

次に、’Scale’ボタンをクリックして画像の解像度を変更します。次に、’Save’ボタンをクリックして変更を保存します。

WordPressでは、画像を縮小することしかできません。画像のサイズを大きくすることはできません。

しかし、他の画像編集ソフトを使えば、画質を落とさずに画像を大きくすることができる。

WordPress投稿サムネイルのローテーション

投稿サムネイルが横に回転しているためにおかしく見える場合は、WordPressの画像エディターを使って修正することができます。

画像を回転させる2つのボタンがあります。左回転」は反時計回りに回転させ、「右回転」は時計回りに回転させます。

Rotating an Image

本当に〜してもよいですか’Save’ボタンをクリックして変更を保存します。

WordPressの投稿サムネイルをめくる

画像を反転させることもできます。例えば、画像に書かれた文字が反転して見える場合などに便利です。

Flip horizontal(水平反転)」ボタンをクリックすると、瞬時に鏡像が作成される。

Flipping an Image Horizontally

Flip vertical’ボタンをクリックすると、画像が上下反転します。

終了したら、「保存」ボタンをクリックして変更内容を保存することができます。

Flipping an Image Vertically

WordPress投稿サムネイルの復元

WordPressでは、画像に変更を加えて保存すると、元の画像のコピーが保存されます。その画像はいつでも復元することができます。

WordPress’ Edit image’ 画面に戻ると、’Restore Original Image’ という新しいパネルが表示されます。

Click the Disclosure Triangle to Reveal the 'Restore Image' Button

下矢印ボタンをクリックして、このセクションを展開する必要があります。Restore image’(イメージの復元)ボタンが表示されます。

このボタンをクリックすると、変更内容はすべて破棄され、元の画像が復元されます。

Click The 'Restore Image' Button

この場合、すでにイメージは復元されているので、変更を保存する必要はありません。

コンピューターでWordPressのサムネイルをトリミング・編集する

WordPressの画像エディターは便利ですが、通常はコンピューター上のサードパーティ製の画像編集ソフトを使ってトリミングや編集をする方が簡単です。

Adobe Photoshopは、画像を作成・編集するためのプレミアムソフトウェアアプリケーションです。

投稿サムネイルを編集するには必要以上の機能だが、使い慣れ、すでにコンピューターにインストールされているのであれば、良いオプションだ。

また、手頃な価格のPhotoshop代替ソフトを使うこともできます。Affinity PhotoPixelmator ProGIMPはすべて、画像のトリミングと編集のための包括的なツールを提供しています。

3つ目のオプションは、フォトビューアを使うことだ。これらのアプリケーションは使いやすく、基本的なトリミングや編集機能を備えていることが多い。無料の良いオプションがいくつかあります:

  • Windows用Irfanview(無料)
  • 写真アプリはWindowsオペレーティングシステムにビルトインされています(無料)。
  • Mac用のApple Photos(MacOSでは無料)

これらのツールは似ていますが、それぞれ異なる方法で機能します。アプリケーションを選んだら、そのツールに精通する必要がある。

例えば、これはAffinity Paintの切り抜きツールを使ったスクリーンショットです。

Cropping an Image With Affinity Paint

ブログ投稿サムネイルとおすすめ投稿画像をゼロから作る

多くの初心者がブログで使える画像を探すのに苦労している。

Google検索から画像をダウンロードすることはできません。これらの画像には著作権があり、オリジナル作成者の権利を侵害している可能性があるからです。

幸いなことに、著作権フリーの画像を見つけることができる場所がいくつかあります。

画像を見つけたら、テーマのアイキャッチ画像サイズに合うようにコンピューターで編集することができます。

また、AIツールを使ってブログ投稿用の画像やアイキャッチ画像を生成することもできる。

詳しくは、ブログ投稿用の画像を作成するのに最適なツール(多くは無料)をご覧ください。

このチュートリアルで、WordPressの投稿サムネイルを切り抜き、編集する方法を学んでいただけたら幸いです。WordPress でお問い合わせフォームを作成する方法や、最適なソーシャルメディアプラグインのリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

8件のコメント返信を残す

  1. Javier

    It is possible to do this without a plugin?

  2. NIcole

    This might be so dumb but, I have a image that is showing when I type my website it is a image I use to tell possible clients I am a member of this elite group. However I would so much rather have a image I took when I type out my website. I am with word press and could use guidance please.

  3. Rosa Bosma

    Yay! Thank you so much! This is exactly what I’ve been looking for, since yesterday. I’m very grateful – the plugin does a perfect job. :-)

  4. Gurpreet

    Hi,

    Love that this plugin exists however, I’m still unsure how to determine how to change the image being used for the featured image on the home page.

    Help?

    Thank ou!!

  5. Deb

    I downloaded, but when I crop, I’m only seeing a “crop” button; not a “crop and save” … did I miss something? (thanks in advance for whatever insight you might have.)

  6. Donovan

    Is there any way to modify the default image size options on the plugin?

  7. Umer

    Hi i want To Add A little image On thumbnail on top right Corner on homepage,….
    can you help me..

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。