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

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。

これも、note風スタイルの一環ですね。

大きな字で見やすいタイトルと正方形のアイキャッチ
大きな字で見やすいタイトルと正方形のアイキャッチ

アイキャッチ画像より、タイトル文に目がいくようにする意図で、変更しました。

常に左から読んで行けるほうが、目にラクな気がします。

といって、そこまでブログ一覧はアクセスがないんですが……笑

スポンサーリンク

CSS

CSSはこんな感じです。

display: flexで下位の要素の順番(order)を変更できるようにしています。

/** 記事一覧 */
article.entry-card {
	display: flex;
	flex-direction: row;
}
.entry-card-thumb {
	order:2;
	padding-bottom: 1.2em;
}
.entry-card-content {
	order:1;
	margin-left: 0;
	margin-right: 0%;
	width:75%;
}

合わせて、サイドバーの記事一覧も変更しました。


/** ウィジェット記事一覧 */
.widget-entry-card {
	display: flex;
	flex-direction: row;	
}
.widget-entry-card figure {
	order:2;
}
.widget-entry-card-content {
	margin-left:0;
	order:1;
	width: 75%;
}

ついでに、関連記事の一覧も変えました。

/** 関連記事一覧 */
article.related-entry-card {
	display: flex;
	flex-direction: row;		
}

.related-entry-card figure{
	order:2;
	padding-bottom: 0.9em;	
	margin-right:0;
	width: 100%;
}

.related-entry-card-content {
	order:1;	
	margin-left:0;
	margin-right:0;
	width: 80%;	
}
.rect-mini-card .related-entry-card-content {
	margin-left:0;
	margin-right:0;
	width: 80%;	
}

編集では、左右のバランスを調整するために、余白(margin)や幅(width)の処理で、いろいろ試行錯誤しました。

note風ブログのフリーイラスト
note風ブログのフリーイラスト クリエイティブ・コモンズ・ライセンス
この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。
http://creativecommons.org/licenses/by-sa/4.0/
https://chiilabo.com/licenses-image/
タイトルとURLをコピーしました