【スポンサーリンク】

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)の処理で、いろいろ試行錯誤しました。

こちらもどうぞ。

[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】
以前、funtion.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。 しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。 こんなふうに変えました いつものようにビフォー・アフターをお見せします。 ↓こうなりました。 ちゃんとHTML要素を変更せずにデザインを変えることができました。 CSSコードはこちら ポイントはblogcard-foot...
[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】
ブログ記事のタイトル部分のスタイルを少しいじりました。 作成日時と更新日時を2段になるようにしました。 こちらがCSSです。 .entry-header .date-tags { order: 3; color: #a8abb1; font
note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】
Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。 今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。 これもnoteのデザインを参考にしています。 タイトルと本文の位置が近くなるので、読みやすいですよね。 Cocoon設定やPHP編集もいいけれど…… アイキャッチ位置を変更する方法をざっと調べると… Cocoonの設定でアイキャッチを非表示...

note風ブログのフリーイラスト
note風ブログのフリーイラスト クリエイティブ・コモンズ・ライセンス
この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。
http://creativecommons.org/licenses/by-sa/4.0/
https://chiilabo.co.jp/licenses-image/
QRコードを読み込むと、関連記事を確認できます。

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)
【スポンサーリンク】
タイトルとURLをコピーしました