画像の焦点・注目ポイントの合わせ方[CSS]

WordPress のアイキャッチやサムネイルの画像の微調整がしたい

アイキャッチやサムネに画像を設定して実際に確認するとイメージと違う表示のされ方がされている事ありますよね。
例えば、

  • 人物の顔が切れている
  • 人物の顔は映したくない
  • 人物が左右どちらかに寄りすぎ
  • 風景の注目してほしいポイントが切れている

そんな時は CSS の object-position を使いましょう。
実際に↓の object-position ありとなしを見比べてみてください。

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

1枚目の画像はデフォルト、画像の真ん中に焦点があっている状態です。

2枚目の画像は x軸(左右)に 100%ずらす設定をしています。
画像の右端を基準に表示されています。
逆に左端に寄せたい場合は – (マイナス)を使用します。

object-position: ( y軸 x軸 ); で値を入れると画像の焦点を微調整できます。
数値でなく top center left right bottom を使用することも可能です。

css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。