WordPressって投稿までの細かい設定がなんか面倒…
そう思った事ありませんか？
実は私はいまだにそう思います。
WordPressを始める前から私は無料ブログを利用していました。
「ブログって写真を適当に撮って載せればいいから簡単だよ」
って知人に教えてもらって、本当にそこら辺の写真を適当に撮って、
ブログに載せてたんです。
それこそガラケー時代から。
無料ブログでは適当に添付しても普通に使えた縦写真。
そんな無料ブログのノリで始めたWordPress。
いつもの感じで画像アップしたら、なぜかレイアウト崩壊。
メディアライブラリで縮小しても直らない。
「えっ？なんで？」
と脂汗流しながら数時間溶かした事があります。
やっとたどりついた原因は
『アスペクト比』。
今回は、50代からWordPressをやり始めた私が1番手こずり、
いまだにやらかしている画像のサイズや選び方、
加工方法を記事にしようと思います。
無料ブログで縦長写真をアップしても画像が崩れないのはなぜ？
私もWordPressを始めるまでは、ほとんど知りませんでした。
無料ブログの多くは、スマホ表示に最適化されていることが多く
スマホで撮った縦長写真が画面いっぱいに表示されるよう
初期設定から工夫されているそうです。
WordPressで縦写真が崩れる理由
WordPressで縦長の写真がトリミング（切り抜き）される主な原因は
サイトのデザインを整えるために
『決まった比率』で表示する設定になっているからです。
「縦写真が使えない」 のではなく、
“テーマが想定している比率と合っていないと崩れる”
が正解でした。
WordPressテーマには「推奨画像サイズ」がある
・テーマごとにアイキャッチ推奨サイズがある
例）Cocoon：1200×630px、または1280×720px
※テーマやカスタマイズ状況によって異なる場合があります。
・横1200×630などが多い
・WordPress外観 → カスタマイズ → 画像設定で確認できる場合もあります。
アスペクト比って何？
画像には法則がある
簡単に言うと、縦と横の比率のことです。
例えば
🔶 4:3 → 記事内画像でよく使われることが多い
🔶 16:9 → アイキャッチや動画向き
🔶 1:1 → インスタ系
🔶 3:4 → 縦写真
このような感じです。
想定している比率と違うと崩れるのです。
これは仕様なので仕方のない事。
今まで適当に画像を貼り付けていたので、
画像にもルールがある事をその時知りました。
私がやらかしたこと
WordPressのメディアライブラリで簡単に画像編集できると思っていた
まだWordPressで記事を書き始めた頃の話。
以前撮った縦長の写真を使おうと思ってメディアライブラリに保存した。
画像は思い切り縦長。
⬆️元の縦長写真はこちら。
加工しようか縮小しようとしたけど、思うようにいかない。
「じゃあトリミングとかいうこの機能をいじったら縮小すりゃ良くない？」
と、あれこれいじっても上手くいかない。
というか、これ、半分くらい切れてない？
⬆️こちらはWordPressのメディアライブラリで4:3にトリミングしようとしたときの画面です。
赤い囲みの箇所が切り抜きされています。
なんか思ったのと違う…と思いつつ
かれこれ数時間格闘。
だんだん疲れてきて、やっとネットで調べるという事を思いつき調べることに。
すると、どうやら比率とかいうのがある事を知りました。
そこでようやく、メディアライブラリではなくスマホの写真設定をいじってみる。
すると、私のテーマでは、比率が合わず崩れていた事が判明。
「大元の写真かよ！」
思わず心の中で叫んでしまいました。
早くネットで調べておけばよかった…
かといって、体で覚えたので忘れないし、
無駄そうで無駄ではなかった気がします。
失敗から学んだ失敗回避方法と対策法
今回の失敗で、もう2度と簡単な原因で面倒を起こさないように対策を練りました。
と言っても、いたってシンプル。
①撮影時から横向きで撮る
スマホ持ってるとついつい縦で撮影しがちですよね。
でも、ブログやってて思う事は
「いつ記事に使える写真が撮れるかわからない」。
スマホ待ち受け用以外は基本横向きで撮るようにしておくと使い勝手がいいです。
②Canvaでサイズ統一
正直、Canvaは苦手なのですが、リサイズする時はよく使います。
小さい画像も簡単に引き伸ばす事ができるので、かなり重宝。
Canvaの「カスタムサイズ」で1200×630px（16:9）を登録しておくと、
どの画像も統一されて見た目が整います。
JPEGで保存すると容量が軽いのでサイトが重くなりにくいです。
作った後、
ダウンロード→ファイルの種類をPNGからJPGに変更→ダウンロード
これでJPEGに変換、保存できます。
③スマホである程度サイズを加工しておく。
横長の写真を切り抜き→比率やアスペクト比のアイコンから
「16:9」を選んで保存すると、WordPressのメディアライブラリに保存する時もかなり楽です。
④アップ前チェック
アップ前にプレビューで確認して、本当に画像がキレイに収まってるか確認。
ここで画像が崩れてたら、必ずどこかに原因があるはずです。
画像の容量が大きすぎるとサイト表示が遅くなることがあります。
ここは要チェック。
そしてもっと大事なことは
ファイル名を英小文字に書き換えること。
NG例：
IMG_1234.jpg
OK例：
wordpress-aspect-ratio-4-3.jpg
わかりやすい名前をつけておくと、画像を探す時とても楽です。
これをせずに膨大な枚数で気づいたら本当に大変。
意外と忘れちゃうんですけどね…
縦で撮っていた私が自然と横で撮るようになった理由
ブログ目線が身についた
WordPressで記事を書くようになって
「どうすれば外から見て読みやすいか」
を気にするようになりました。
無料ブログを書いていた頃はまったく考えていなかった。
まさか、50代でWordPressに再挑戦して、
画像のアスペクト比とか勉強する事になるとは数ヶ月前は思ってもいませんでした。
今みたいに少しずつ回転するまで多く失敗したけど、決して無駄ではありませんでした。
あの時の脂汗も、今では笑い話です。
失敗しながらでも、50代からちゃんと身につく。それがWordPressでした。
WordPressで縦写真を使うなら覚えておくこと【まとめ】
✅テーマの推奨サイズを確認
✅アスペクト比を揃える
✅横向き撮影を意識
✅Canvaで統一
✅ファイル名を英小文字に
ここを押さえておくと安心です♪
