スポンサーリンク
スポンサーリンク

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

ニッチな話題ホームページ運用

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

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

スポンサーリンク

こんなふうに変えました

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

↓こうなりました。

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

CSSコードはこちら

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

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

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

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

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

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

こちらもどうぞ

QRコードを読み込むと、関連記事を確認できます。
[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】
タイトルとURLをコピーしました