[Cocoon]外部ブログカードのサイトアイコンを上に移動した

2020.09.26

以前、funtion.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。

しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。

この記事で説明すること

こんなふうに変えました

いつものようにビフォー・アフターをお見せします。

↓こうなりました。

ちゃんとHTML要素を変更せずにデザインを変えることができました。

ポイントはblogcard-footer要素の位置をabsolute（絶対配置）にして、移動することです。

親要素内に自由に配置できるので、あとはblogcard-title要素の上にスペースを開けてあげれば完成です。

/**
 * 外部ブログカードのアイコンを上に
 * */

.external-blogcard-footer {
  position: absolute;
  top: 8px;
}

.external-blogcard-title {
  margin-top: 1.4em;
}

実はけっこうかんたんでした🌟

こちらもどうぞ