SANGOに最適なアイキャッチ画像のサイズ編集方法【WordPress】

アイキャッチ画像の作成に目覚めたセッコです

いままでアイキャッチ画像なんて最悪無くてもいいや〜と思っていて、テキトーに設定していたんですが、キチンと規格をあわせて作るとなんと見栄えのいいことか!

本ブログは、WordPress専用テーマである「SANGO」と子テーマ「PORIPU」を使用しています。

アイキャッチ画像に興味のない初心者SANGER向けに、写真などをアイキャッチ画像向けのサイズに編集する方法などを解説します!

ブログ記事の「顔」とも言えるアイキャッチ画像はサイズ調整で美しく記事に映えるようになりますよ!※アイキャッチ画像?何それ画像貼っときゃいいんでしょ?な初心者向けの内容です

 

Q.WordPress専用テーマ「SANGO」に最適なアイキャッチ画像サイズは?

SANGOに最適なアイキャッチ画像サイズはコレで決まりです!

・横680ピクセル✕縦390ピクセル

この法則を守ればサムネイルにキレイに画像が表示されますよ。「文字がハミ出て切れてしまう」などの悩みは解決されます。

※偉そうに言いましたが「PORIPU」の公式ページに答えが出てますね!

【PORIPU公式サイト】

参考 SANGOアイキャッチ画像の推奨サイズPORIPU

 

ところが、ブログ初心者はこれだけでは対応できません。

Q.写真やスクリーンショットのサイズ調整のやり方は?

良い質問ですね〜

ブログにアップする画像は自分で撮った写真やスクリーンショット画像が多いと思います。

自力で切り抜き・画像縮小も出来なくはないですが、縦横比(バランス)が崩れたりして大変です。

【Macでのやり方】

①「写真アプリ」で縦横比調整②画像サイズを調整、この2ステップが必要です!

①「写真」で縦横サイズ比を調整する

Mac標準アプリの「写真」にアイキャッチ画像に設定したい画像を入れます

 

←よく見る写真の標準アプリに画像を入れる

 

 

①写真アプリで画像を開き、右上の編集ボタンをクリック

②トリミング③アスペクト比で「カスタム」を選択し、アイキャッチの黄金比「680:390」を入力

これで画像の縦横比が680px:390pxになりました。表示可能な範囲が狭くなってるのが分かりますね?(画像右のカテゴリーの下は切れてしまう部分)

注意点
・あくまで比率が680px:390pxになっただけで、実際のサイズは680px:390pxになっていません!
・あらためて画像サイズの変更が必要です!

これで終わりではありません!

②画像のサイズを調整する

「写真」で縦横比を調整した後は、画像のサイズを680px:390pxに変更しましょう!

「写真」にある画像をデスクトップに一度戻してから開きます

ツールバーにある①ツール②サイズを調整をクリック

開くと現在の画像のサイズが入っています。比率だけが調整されていたのが分かります。

③「縦横比を固定」にチェックが入っている状態で、単位は「ピクセル」であることを確認します。

④幅に「680」を入力すると高さは「390」になるハズです。画像の縦横比にあわせてサイズが変更されます。

こうして、こうじゃ!どんっ!見事アイキャッチに適したサイズの画像が出来ました。

 

Q.アイキャッチ向きの画像が出来たあとはどうするの?

セッコさん

あとは煮るなり焼くなり好きにしなさい!
色んなブログでデザインを勉強するといいぞ!

かくいう私もアイキャッチを作ってもらった、みっこさん(@hitomitsu_tokyo )のブログは超参考になりますよ!

【アイキャッチ画像のデザインなど参考にしたサイトはこちら】

参考 カテゴリ−デザインみっこむ

 

Q.画像は縦横比を調整しないまま「サイズを調整」したらダメなの?

縦横比を調整しないまま「サイズを680px:390pxに調整」すると面白いことになるよ!キチンとバランス取った画像をサイズ調整するようにしましょう。

元の画像のサイズにもよりますが、無理矢理680px:390pxに収めるために画像が伸びたり縮んだりします笑

 

Q.画像サイズの調整前と調整後の違いは?

これも画像で見ると分かりやすいです。サイズ感を意識しないと画像がデデン!と居座ります。

私のブログ記事で比較してみましょう。

記事を開いたトップ画面です。違いが分かるでしょうか?

1つ目の画像はサイズ未調整:大きなアイキャッチ画像だけが見えていますが、それでも全て表示し切れていません。記事本文がいつになったら始まるのか分かりません。

2つ目の画像はサイズ調整後:記事タイトルにスッキリ収まっていて、タイトル下広告も表示されています。この後スッと記事が始まる予感がします。

特に、携帯のスクリーンショットなど縦長の画像を使う場合は、なかなか記事本文にたどり着かないといったユーザビリティの低い記事になってしまうため注意が必要です。

アイキャッチ画像サイズ編集方法まとめ

「アイキャッチなんて内容が分かればいいんだよ!」と言う人もいると思いますが、そんな人でも「サイズ感だけ」意識すれば美しい記事に見えるようになりますよ!

アイキャッチ画像調整まとめ
①SANGO用アイキャッチ画像の最適サイズは680px:390px
②「写真」で縦横比をトリミングで調整
③画像のサイズを680px:390pxに変更

 

以上、SANGOに最適なアイキャッチ画像のサイズ編集方法【WordPress】の記事でした。