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

• 以前、funtions.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。
• しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。

[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】

Cocoonテーマのブログカードをはてなブログ風のデザインに変更する方法を紹介します。functions.phpファイル内のurl_to_internal_blogcard_tag関数を修正して、ブログカードの要素の表示順を変更します。ブログロゴを上部に移動させ、CSSで抜粋のフォントサイズなどを調整することで、目的のデザインを実現できます。

chiilabo.com

1. こんなふうに変えました

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

↓こうなりました。

HTML要素を変更せずにちゃんとCSSでデザインを変えられました。

2. CSSコードはこちら

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

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

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

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

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

実は意外とかんたんでした🌟

こちらもどうぞ

[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】

Cocoonテーマのブログカードをはてなブログ風のデザインに変更する方法を紹介します。functions.phpファイル内のurl_to_internal_blogcard_tag関数を修正して、ブログカードの要素の表示順を変更します。ブログロゴを上部に移動させ、CSSで抜粋のフォントサイズなどを調整することで、目的のデザインを実現できます。

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。