【Luxeritas】関連記事を2列表示にカスタマイズ

2019年9月1日2019年12月28日Luxeritas

Customize Luxeritas related articles in two columns

Luxeritasは標準で記事下に関連記事が表示されます。サムネイルとタイトル、抜粋文が1列で表示されますが、PCだと少し間延びした感じになります。そこでPCサイズでは2列表示になるようにカスタマイズしてみました。

1. 関連記事表示設定
2. ビフォー⇒アフター
3. CSS設定
4. 関連記事表示件数を6件に変更
- 4.1. テーマのrelated.phpを編集
- 4.2. テーマをアップデイトしても上書きされないようにするには
5. まとめ

ビフォー⇒アフター

初期表示

カスタマイズ後

2列にしたおかげで高さが約半分になりコンパクトに表示できます。

あと、初期設定では関連記事は最大5件表示ですか、それだと最後のセルが空白になるので、6件表示に変更してます。

CSS設定

2列表示にするのは下記のCSSを追加するだけです。追加する場所は、Luxeritas → カスタマイズ（外観）→ 追加CSS または、Luxeritas → 子テーマの編集 → style.css です。前者の方が変更がすぐ確認できるのでhatenaはもっぱら前者の方に追加しています。

/*記事下 関連記事*/
@media only screen and (min-width: 575px){
	#related {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	}
	#related .toc {
		float:left;
		margin-right: 0;
	    width: 49%;
	}
	#related .excerpt{
		max-height: 145px;
		overflow-y: hidden;
	}
}

画面幅が575px以上では2列表示、それ以下ではオリジナルのまま1列表示になります。