記事カードのアイキャッチ画像を斜めにカットしておしゃれ感をアップする!【SANGOカスタマイズ】

記事カードのアイキャッチ画像を斜めにする

クラゲ社長

カードタイプの記事一覧に表示されるアイキャッチ画像を斜めにカット!アシメントリーでおしゃれ感を演出できるよ!

Before

After

デザインの変更点

  • アイキャッチ画像の下部を斜めにカット
  • 画像と投稿日のスペースを調整
注意

環境によってはデザインが崩れたりする場合があります。
カスタマイズは自己責任で行なってください。

カスタマイズコードをスタイルシートにコピペする

WP管理画面の「外観→テーマ編集→スタイルシート(style.css)」に下記のコードをコピペする。

コード
/*--------------------------------------
記事カード アイキャッチ画像を斜めカット
--------------------------------------*/
.cardtype__img {
	clip-path: polygon(100% 100%,100% 0,0 0,0 calc(100% - 20px));/*斜めカット*/
	-webkit-clip-path: polygon(100% 100%,100% 0,0 0,0 calc(100% - 20px));/*斜めカット*/
}
.cardtype time {
	margin-top: 0px;/*画像とのスペース*/
}

上記コードの(100% – 20px)の中の20px部分の数値を変更すると、斜めの角度を変更することも可能です。

まとめ

斜めデザインを混ぜることで、サイト全体が引き締まっておしゃれ感を演出することができます。

以前に紹介した記事カードホバーエフェクトとの組み合わせも可能ですので、合わせてカスタマイズしてみてください。

記事カードのホバーエフェクト を変更記事一覧カードのホバーエフェクトをおしゃれにしてみる【SANGOカスタマイズ】

クラゲ社長

白背景のアイキャッチ画像との相性はよくないので注意してね!

コメントを残す

メールアドレスが公開されることはありません。