お問い合わせ

SWELL アイキャッチ画像のアスペクト比(縦横比)を固定するカスタマイズ

  • URLをコピーしました!

SWELLで記事の先頭にアイキャッチ画像を表示させ、その画像が縦長だったりすると記事の先頭にそのまま画像が表示されてしまいます。

一方、記事一覧などでは画像の表示領域が固定されているので、はみ出した部分は表示されません。

SWELLは記事一覧のアイキャッチ画像のアスペクト比をカスタマイザーから指定できます。

以前、記事一覧のアイキャッチ画像のアスペクト比を自由に変更するカスタマイズをご紹介しました。

アイキャッチ画像を予めトリミングしておけばよいという話なのですが、そのひと手間が面倒だと思う人も多いと思います。

この記事では記事先頭に表示されるアイキャッチ画像をトリミングして表示するカスタマイズをご紹介します。

SWELL アイキャッチ画像のアスペクト比(縦横比)を固定するカスタマイズ

カスタマイズのコード

CSSだけで対応します。

適用するには、追加CSSにコピペで大丈夫です。

アスペクト比を変更したい時は、padding-top:50%を変更してください。

アスペクト比を変更したい時のパーセント表記
  • 白銀比率(1:1.414):87.6%
  • 黄金比率(1:1.618):61.8%
  • 一眼(3:2):66.6%
  • ワイド(16:9):56.25%
  • 横長(2:1):50%
  • 超横長(5:2):40%
  • 正方形(1:1):100%
figure.p-articleThumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    position: absolute;
    top: 0;
    object-fit: cover;
}
figure.p-articleThumb:before {
    padding-top: 50%; /* アスペクト比の変更はココ */
    content: "";
    display: block;
}
figure.p-articleThumb {
    position: relative;
    max-height: 500px;
}

まとめ

この記事では、SWELLの記事先頭のアイキャッチ画像をトリミングして表示するカスタマイズをご紹介しました。

CSSをコピペするだけなので簡単に適用することができます。

他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次