IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

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

2024/06/13Luxeritas

【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
ナツメグチャンネル

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

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

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

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

スマホ 記事一覧 03
ナツメグチャンネル

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

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

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

スマホ 記事一覧
ナツメグチャンネル

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

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

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

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

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

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

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

今回はカード型を選択。

グリッドレイアウト 02
ナツメグチャンネル

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

グリッドレイアウト 03
ナツメグチャンネル

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

グリッドレイアウト 04
ナツメグチャンネル

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

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

記事一覧 PC 01
ナツメグチャンネル

スマホの記事一覧。

記事一覧 モバイル 01
ナツメグチャンネル

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

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

カラム操作
ナツメグチャンネル
  • コンテンツ領域の項目を結合
  • サイドバーの項目を結合
  • コンテンツ領域とサイドバーを分離

にチェックを入れます。

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

コンテンツ領域とサイドバー
ナツメグチャンネル

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

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

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

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

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

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

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

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

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

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

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

現在の見た目
PC画面。

記事一覧 PC 02
ナツメグチャンネル

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

スマホ画面。

記事一覧 モバイル 02
ナツメグチャンネル

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

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

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

前回の記事

スタイルシートに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;
}

こうなりました。

記事一覧 PC 04
ナツメグチャンネル

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;
	}
}

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

記事一覧 モバイル 03
ナツメグチャンネル

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をスタイルシートに
コピペすればすぐ終わるので使ってみて下さい。

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

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

追記

記事下 メタ情報のカテゴリー
ナツメグチャンネル

記事下のメタ情報のカテゴリーの
表示が切れてしまったので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;
	}
}

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

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

【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一【カスタマイズ】
【Luxeritas】メタ情報のカテゴリーのカスタマイズ
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】ブログカードのカスタマイズ
【Luxeritas】デベロッパーツールの使い方【Google Chrome】
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー(グローバルナビ)とフッターの色を揃える
【Luxeritas】ページネーションのカスタマイズ
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】新着記事のカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける

Luxeritas