項目ブロックの画像をトリミングし表示サイズを統一する方法

項目ブロックはこちら。

タイトル
あいうえおかきくけこ
タイトル
あいうえおかきくけこ

上記のように、項目ブロックは画像をトリミングせずに表示するため、アップロードする画像の画角がバラバラだと表示がガタガタになってしまいます。そこで、CSS を使って画像をトリミングし、各項目の画像の表示サイズを統一する方法をご紹介します。

カスタマイズ方法

CSS

次の CSS をカスタマイザー > 追加 CSS に貼り付けてください。

.smb-items__item__figure {
  position: relative;
  padding: 75% 0 0 0; /* 75% なら 4:3、56.25% なら 16:9 */
  overflow: hidden;
}

.smb-items__item__figure > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%; /* 画像を上下中央揃えしてトリミング */
  height: 100%;
  width: 100%;
}
特定の項目ブロックにだけトリミングを適用したい場合

エディター上でその項目ブロックを選択し、高度な設定 > 追加 CSS クラスで適当な一意のクラス名を設定してください。そして、上記 CSS の .smb-items__item__figure の部分をその一意なクラス名に変更してください。

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!