Wordpress

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

JIN アイキャッチ画像の高さを揃える画像

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

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

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

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

画像の高さ違い

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

気になりませんか??

気になりますよね???

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

にゃんかず
にゃんかず
一度見つけたらずっと気になります・・・・

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

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




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

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

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

 

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

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

「編集」とは書かれていませんので画像をクリックして編集します。
もしかしたらテーマによっては「編集」の項目があるかも知れません。

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

トリミングとは

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

にゃんかず
にゃんかず
不要な部分を取り除く「トリミング」はよく使うキーワードなので、覚えておきましょう
ゆず
ゆず
ペットの毛の長さを揃えるのも“トリミング”っていうんだニャ〜





サイズの変更(縦横比率)

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

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

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

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

アスペクト比について

縦横の比率を「アスペクト比」と言います。パソコンのモニターやハイビジョン画像で採用されており、地上デジタル放送でも用いられていいます。
以前は4:3が主流でしたが、今後は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円からのチャージ対応!
  • プライム会員は更に優遇!
あなたへのおすすめ記事

POSTED COMMENT

  1. うずら より:

    とても参考になりました!ありがとうございます。

  2. macaron より:

    ありがとうございます

    ワードプレス初心者なんですが
    アイキャッチ画像の高さがバラバラで
    編集の仕方が全く理解できなかったのですが
    こちらの記事を見つけて、凄く細やかな説明だったので、私でも理解できて、修正しています

    実は、こちらの記事は偶然みつけたのです
    と、言うのも、アドセンスの事が書かれていて
    拝見してました

    アマゾンアソシエイトの申請は通ったのですが
    グーグルアドセンスには2回落ちて、どうしたら受かるのかと・・・
    考えあぐねています

    また、再度、アドセンスの審査を申請した時に
    記事内にアマゾンの商品を載せていても大丈夫なのか?とも思いました

    海外ドラマとかが好きで、できればアマゾンの商品画像を使いたいのですが
    でも、2週間後位にアドセンスの審査を受けるとしたら、また、アマゾンの商品画像を削除するのも大変かなって・・・

    ご教示頂ければうれしいです

    ちなみに、私も猫好きです(余談)ですが・・・

  3. にゃんかず より:

    どうもコメント有難うございます!
    お役に立てれば幸いです(^^)
    アドセンス審査については少し長くなりそうだったので、
    メールをお送りしました。御覧ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です