これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。
ブログカードのデザインを少し変更しました。
そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。


CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。
img{
object-fit:cover;
aspect-ratio: 100/100;
}
また、ドメイン名の色を変更することで、タイトルと区別しやすくしました。
/*** ブログカードのデザインを整える
*/
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のもとのデザイン)がこんな感じです。これを、はてなブログ風にしてみたいんですよね。出典:「はてなブログ OSSコミュニティ支援プログラム」「はてなブログ 学校支援プログラム」を開始しました ...


ブログをnote風のデザインにしてみた
今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。◆ note風デザインの記事一覧 ◆「note(ノート)」というブログサービスをご存知ですか?...
QRコードを読み込むと、関連記事を確認できます。