[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

2021.11.052021.11.06

これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。

ブログカードのデザインを少し変更しました。

そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。

[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。

img{
    object-fit:cover;
    aspect-ratio: 100/100;
}

また、ドメイン名の色を変更することで、タイトルと区別しやすくしました。

CSSコードのメモ

/*** ブログカードのデザインを整える
*/

article  .blogcard-domain {
	color: #1967d2;
	font-weight:bold;
}
article .blogcard-thumbnail {
	width:160px;
}
.ib-right .blogcard-content, .eb-right .blogcard-content {
	margin-right: 170px;
}

@media screen and (max-width: 840px) {
	article .blogcard-thumbnail {
		width:80px;
	}
	.ib-right .blogcard-content, .eb-right .blogcard-content {
		margin-right: 90px;
	}
	article .blogcard-thumbnail img{
		object-fit:cover;
		aspect-ratio: 100/100;
	}
}
article .blogcard-title {
	margin-top: 1.7em;
	margin-bottom: 0;
}

こちらもどうぞ

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

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

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

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。 note風デザインの記事一覧「note（ノート）」というブログサービスをご存知ですか？ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。２カラムのアメブロと比べてみ...

参考

【CSS】CSSだけで画像をトリミングできる「object-fit」 | FASTCODING BLOG

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

[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

タイトルとURLをコピーしました