【JIN】テーマの画像写真 アイキャッチ画像の高さを揃える方法【WordPress】

ブロガーの方々はどんなテーマをお使いだろうか。

私は simplicity2 や LionMEDIA を経て
ちまたでオススメと言われている【JIN】を使用しています。

使っていくうちに次第に
細かいデザインや使いやすさ、色使いが気になってきます。

そんな中、次の画像のようなズレに気づいてしまいました。

赤矢印のぶんだけ画像の高さが違うんです！！！！

気になりませんか？？

気になりますよね？？？

気になりますよね？？？？？？

 
ということで調べた結果、
アイキャッチ画像の縦横の長さが揃っていないせいで
ズレてしまうということが分かりました。

原因がわかれば解決策もある！！
自分自身忘れないよう、備忘録の意味も込めて残します。

画像の高さをあわせる手順！！

画像を上手に揃えてくれたり
綺麗に揃えてくれるようなプラグインも
もしかしたらあるかも知れません。

でも知らない(´；ω；｀)！！ので、
今回は手動で修正してみます。

 

アイキャッチ画像の編集画面へ

投稿した記事の編集画面にて、
アイキャッチの画像をクリックしましょう。

つぎに、画像のサイズを変えたり反転させたり、
トリミング（※）する為、「画像の編集」をクリックします。

トリミングとは

画像の加工ができるソフトウエアが持っている機能のひとつで、画像の周囲にある不要な部分を非表示にすることで画像の表示範囲やサイズを調整することができます。
出典：なにしろパソコン

サイズの変更（縦横比率）

画像の編集を押すと、
次のような画面がでてきます。

上の画面では数値が入力されていますが、
初めは空白の状態です。
半角で「16：9」と数値を打ち込みましょう。

この比率が画面の 横の長さ：縦の長さ になります。
縦に長過ぎたり横に長過ぎると
トップページで見た時にずれることがあります。

そのため、ここで強制的に縦横の比率を「16：9」に調整します。
アイキャッチ画像の比率を揃えることによって、
すべての記事のサイズを揃え、綺麗な見栄えにすることが出来ます。

次に、この比率「16:9」で画像を切り抜きます。

 

画像をトリミングする

編集したい画像が表示されているので
ドラッグアンドドロップで範囲を選択しましょう。

■ の場所を引っ張ることで自由にサイズを変えられます。

大抵の場合、スマホで撮った写真や
フリー素材でダウンロードしてきた画像などは
16:9とは違う比率であることが多いです。

次にアイコン一番左の
「トリミング」のボタンを押し、

「保存」ボタンで完了です。

この状態で、画像が「16:9」に設定されました。

画像を更新して完了

アイキャッチ画像がしっかりと「16:9」になったら
「アイキャッチ画像を設定」ボタンを押して、完了です。

これでやっと一つの記事のアイキャッチ画像が
16:9の比率に修正されました。

新しく記事を投稿する時も同じ手順で設定しましょう。

手間暇かけて修正した結果・・・・

一つ一つ手作業で修正していきました。
これが100記事とかになってたらと思うと大変です(；´∀｀)

ということで、全て修正して再度確認してみると・・・・

記事の高さが揃ってますね！
バッチリ大成功です。

もっと大きい画像で比較してみました。
高さが揃うことでスッキリと見え、気持ちがいいですね！
いらない余白も減り、大満足です。

 

さいごに・まとめ

この記事では
・画像の切り抜き（トリミング）
・画像の比率を変更
の2つを覚えることが出来ます。

もしかしたら世間では「あたりまえ」の作業なのかも知れませんが
知らないことを知るだけで一つ階段を登れます。

着実にレベルアップしていきましょう！有難うございました。
（もし一発解決できるプラグイン知ってたら教えてください・・・・）

 

私がWordPressの知識を深めるために読んだおすすめの本はこちらです。

初めてブログを書いてみた〜って方や、Wordpressを始めて数ヶ月の方におすすめです。（タイトルだけ覚えて、本屋で立ち読みしちゃいましょう！）

Amazonのお買い物で損をしない方法

• Amazonでギフト券をチャージ→お買い物の時に使うだけ！
• チャージ額×最大2.5%分のAmazonポイントが貰える！

→ → → （つまり最大2.5%安く買える！）

• ギフト券の詳細やチャージ方法は公式サイトでご確認ください。
• 5,000円からのチャージ対応！
• プライム会員は更に優遇！

Amazonギフト券 公式サイトへ