以前、funtion.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。
しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。
この記事で説明すること
こんなふうに変えました
いつものようにビフォー・アフターをお見せします。

↓こうなりました。

ちゃんとHTML要素を変更せずにデザインを変えることができました。
CSSコードはこちら
ポイントはblogcard-footer要素の位置をabsolute(絶対配置)にして、移動することです。
親要素内に自由に配置できるので、あとはblogcard-title要素の上にスペースを開けてあげれば完成です。
/**
* 外部ブログカードのアイコンを上に
* */
.external-blogcard-footer {
position: absolute;
top: 8px;
}
.external-blogcard-title {
margin-top: 1.4em;
}
実はけっこうかんたんでした🌟
こちらもどうぞ