【Luxeritas】記事一覧カスタマイズ【カード型】

2023/07/022024/09/04Luxeritas

ナツメグ

ナツメグです

もうダサくしないカスタマイズ第5回。

いよいよ
Luxeritas（ルクセリタス）の
記事一覧のカスタマイズを
して行きます。

Luxeritasの最大の弱点は
スマホ画面の記事一覧に
記事を沢山
表示出来ない事です。

デフォルトだとこんな感じ。

スマホの画面に1記事しか表示出来ません。

これではスマホユーザーは
画面のスクロールが大変です。

なので1画面に沢山記事が表示されるようにします。

こんな感じのデザインが目標です。

記事一覧が整えば
ブログの回遊率は上がるので頑張りましょう。

Contents

1. 【Luxeritas】記事一覧カスタマイズ

【Luxeritas】記事一覧カスタマイズ

作業の手順

外観カスタマイズで下準備
スタイルシートにCSSを書き込んでデザインを整える
PCの記事一覧カスタマイズ
スマホの記事一覧カスタマイズ

外観カスタマイズで下準備

下準備として
まず外観カスタマイズをします。

外観＞カスタマイズ＞グリッドレイアウト。

今回はカード型を選択。

リスト型トップページ、カテゴリー、アーカイブ
全てカード型（最大1列）を選択。

記事一覧の抜粋の文字数を0。

”記事を読む”（カード型）を空白にします。

PCの記事一覧はこうなりました。

スマホの記事一覧。

かなりすっきりしました。

外観＞カスタマイズ＞カラム操作。

コンテンツ領域の項目を結合
サイドバーの項目を結合
コンテンツ領域とサイドバーを分離

にチェックを入れます。

外観＞カスタマイズ＞コンテンツ領域とサイドバー。

コンテンツ領域に枠線をつける
のチェックを外します。

コンテンツ領域のパディングは
上20px、右10px、下20px、左10pxにしました。

コンテンツ領域が広い方が現代的だからですね。

サイドバーウィジェットの幅は280pxに設定。

サイドバーウィジェットの幅も
狭くした方が現代的だと思います。

有料テーマだと
サイドバーが右端までくっ付いていて
画面全体を広く使っているテーマが
多いです。

なるべく他と同じにした方が
ダサく見えないのでこうしました。

Luxeritasでは右端に空白が出来てしまいます。

仕様みたいなので
しょうがないですね。

サイドバーウィジェットの幅を
280pxにしても
横幅が300pxの広告は貼れるので
大丈夫です。

サイドバーを枠線で囲むのチェックは外しました。

現在の見た目
PC画面。

サイドバーのプロフィール欄と
カテゴリーに枠線が付いてますが
これはCSSでカスタマイズしているので
気にしないで下さい。

スマホ画面。

枠線を消してコンテンツ領域を広くした事で
窮屈さがなくなりました。

次はスタイルシートで
デザインを整えて行きます。

メタ情報のカテゴリーの
デザインは
前回の記事でやりましたので
そちらを見て下さい。

前回の記事

【Luxeritas】メタ情報のカテゴリーのカスタマイズ

もうダサくしないカスタマイズ第4回。今回はLuxeritas（ルクセリタス）のメタ情報のカタゴリーのカスタ ...

https://nutmeg-channel.com/luxeritas-meta-category/

スタイルシートにCSSを書き込みます。

PCの記事一覧カスタマイズ

まずはPCから。

/*記事一覧*/
#list div[id^="tile-"] .term img, #list div[id^="card-"] 
.term img{
	max-width: 575px;
	width: 100%;
}

#list div[id^=card-] .term img{
	width: 200px;
	height: 113px;
	object-fit: cover;
	margin: 0;
}

#list div[id^=tile-] h2, div[id^=card-] h2{
	font-weight: bolder;
	display: table-cell;
	vertical-align: top;
	padding-top: 32px;
}

div[id^=card-] .meta:not(.meta-u){
	position: absolute;
	border-bottom: none;
	margin-top: -11px;
	margin-left: 200px;
}

div[id^=card-] .meta i{
	display: none;
}

#list div[id^=card-] span.date{
	position: absolute;
	margin-top: 94px;
}

#list div[id^=card-] figure.term{
	display: table-cell;
	vertical-align: top;
	padding: 0 12px 0 0;
}

こうなりました。

CSSの解説

一番上の#list div[id^="tile-“] .term img, #list div[id^="card-“]
.term imgは
サムネイル画像の横幅を
元の大きさのまま表示させる指示です。

#list div[id^=card-] .term imgのobject-fit: cover;は
サムネイル画像の縦横の比率を維持します。

#list div[id^=tile-] h2, div[id^=card-] h2の
display: table-cell;は
記事タイトルを
サムネイルの横に表示。

vertical-align: top;で記事タイトルを
要素の一番上に表示して
padding-top: 32px;でメタ情報のカテゴリーの分
下に下げてます。

div[id^=card-] .meta:not(.meta-u)の
position: absolute;は
メタ情報のカテゴリーを
サムネイル画像の左上に配置する指示です。

border-bottom: none;で
メタ情報のカテゴリーの下の
グレーの線を消して
marginでメタ情報のカテゴリーの位置を整えました。

div[id^=card-] .meta iは日付のアイコンで
display: none;で消しました。

#list div[id^=card-] span.dateは日付。

position: absolute;で左上に配置してから
marginで位置を下げました。

#list div[id^=card-] figure.termの
display: table-cell;は
多分サムネイル画像と記事タイトルを
横に並べる指示ですね。

結構理解しないでやってるところもあるので
間違っているかも知れません。

日付は設定＞一般。

日付形式のカスタムにチェックを入れて
Y/m/dと表記しました。

スマホの記事一覧カスタマイズ

次はスマホ。

/*記事一覧スマホ*/
@media screen and (max-width: 575px){
#list div[id^=card-] .term img{
	width: 160px;
	height: 90px;
	object-fit: cover;
	margin: 0px;
	}
}

@media screen and (max-width: 575px){
#list div[id^=tile-] h2, div[id^=card-] h2{
	font-size: 1.4rem;
	font-weight: bolder;
	display: table-cell;
	vertical-align: top;
	padding-top: 32px;
	}
}

@media screen and (max-width:575px){
#list div[id^=card-] figure.term{
	display: table-cell;
	vertical-align: top;
	padding: 0 12px 0 0;
	}
}

@media screen and (max-width: 575px){
div[id^=card-] .meta:not(.meta-u){
	position: absolute;
	margin-top: -11px;
	margin-left: 160px;
	}
}

@media screen and (max-width: 575px){
div[id^=card-] .meta i{
	display: none;
	}
}

@media screen and (max-width: 575px){
#list div[id^=card-] span.date{
	position: absolute;
	display: none;
	}
}

スマホの小さい画面に
記事を沢山表示出来ました。

CSSの解説

#list div[id^=card-] .term imgで
サムネイル画像のサイズを16×90pxにしました。

#list div[id^=tile-] h2, div[id^=card-] h2の
font-size: 1.4rem;で
記事タイトルの
文字のサイズを小さくしています。

元のサイズはfont-size: 1.6rem;です。

#list div[id^=card-] span.dateは
display: none;で日付を消しました。

タイトルの文字数が多いと日付と重なるからです。

記事一覧のカスタマイズは
滅茶苦茶めんどくさいですね。

有料テーマを買う人が多いのも分かる気がします。

この記事のCSSをスタイルシートに
コピペすればすぐ終わるので使ってみて下さい。

こちらの記事を参考にさせていただきました

スマホ表示で記事一覧スタイルを変えるカスタマイズ【Luxeritas】 | ＳＡＴＯＳＩＸ

スマートフォンなどの小さな画面で表示するときのみ、記事一覧のグリッドレイアウトをタイル型からカー ...

https://kenkoukokorokara.com/mobile-view/

ルクセリタスの記事一覧表示をカスタマイズ（カード型・インフィード対応） | 綾糸.ne

バージョンと初期デザインについて当サイトで使用中のバージョンは以下です。（記事作成時） Luxerita ...

https://ayaito.net/luxelitas/l_customize/3790/

ありがとうございました。

ナツメグ

今回は以上です

追記

記事下のメタ情報のカテゴリーの
表示が切れてしまったのでCSSを修正しました。

メタ情報のカテゴリー。

/*メタ情報のカテゴリー*/
span.category{
	background: #fff;
	padding: 1px 6px;
	color: #0099ff;
	border: 1px solid #0099ff;
}

記事一覧PC。

#list div[id^=tile-] h2, div[id^=card-] h2{
	font-weight: bolder;
	display: table-cell;
	vertical-align: top;
	padding-top: 30px;
}

div[id^=card-] .meta:not(.meta-u){
	position: absolute;
	border-bottom: none;
	margin-top: -12px;
	margin-left: 200px;
}

記事一覧スマホ。

@media screen and (max-width: 575px){
#list div[id^=tile-] h2, div[id^=card-] h2{
	font-size: 1.4rem;
	font-weight: bolder;
	display: table-cell;
	vertical-align: top;
	padding-top: 30px;
	}
}

@media screen and (max-width: 575px){
div[id^=card-] .meta:not(.meta-u){
	position: absolute;
	margin-top: -12px;
	margin-left: 160px;
	}
}

これで記事下のメタ情報のカテゴリーの
表示が直ると思います。

それとPC画面での記事一覧の横幅を
ちょっと広くしたのでそのCSSも書いておきます。

/*記事一覧を広く*/
#section.grid{
	padding-left: 0px;
	padding-right: 0px;
}

@media (max-width: 575px){
#section.grid{
	padding-left: 0px;
	padding-right: 0px;
	}
}

左端に少し寄ったので
窮屈さがなくなったと思います。

もうダサくしないカスタマイズ

2023/07/02Luxeritas