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

2019/05/19

クラゲ社長

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

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部分の数値を変更すると、斜めの角度を変更することも可能です。