ルクセリタスの記事一覧（カード）デザインをプチカスタマイズ
ルクセリタスで、トップページやアーカイブなどの記事一覧ページでの表示方法は、以下の通り９種類あります。
今回は、カード型（最大２列）での表示例ですが、その他のタイプにも応用可能です。
変更箇所
BEFORE
↓
AFTER
具体的には以下のデザインを変更しています。
- メタ情報（カテゴリー名）の表示方法
- 「記事を読む」リンクの表示方法
基本設定
レイアウト
「外観」→「カスタマイズ」から「グリッドレイアウト」を選択。
リスト型トップページ、カテゴリー、アーカイブのそれぞれのリストタイプを選択
今回の例では「カード型（最大２列）」
「記事を読む」（カード型）のところに表示したい文字を入力。
例：More・・ などでもOK
※グリッドレイアウト設定下の方にあります。
サムネイル
「サムネイル（アイキャッチ）」の設定から表示する画像サイズを選びます。
今回の例では「ノーマル（150*150）」
「メタ情報の表示位置」から表示するメタ情報を設定。
今回の例では「カテゴリー名」のみですが、お好みで。
カスタマイズ
CSS追記
「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。（Ver.3.7.9以前は「style.cssタブ」）
メタ情報のデザイン
↓
メタ情報部分の装飾は以下です。色やサイズ等、お好みに編集して下さい。
/*記事一覧のメタ情報装飾*/
#list .meta {
text-align: center; /*テキストを中央寄せ*/
border-radius: 8px; /*角を丸める*/
background: #9d9d9d; /*背景色*/
font-size: 14px; /*文字サイズ*/
padding: 0 10px; /*余白*/
line-height: 26px; /*行の高さ*/
color: #fff; /*文字色*/
}
#list span.category a{
color: #fff;
text-decoration: none; /*下線を消す*/
}
「記事を読む」のデザイン
↓
「記事を読む」の装飾は以下です。色やサイズ等、お好みに編集して下さい。
/*記事を読む*/
.read-more-link,
.read-more-link i {
position: relative; top:-45px; left:-10px; /*表示位置の調整*/
display: inline-block;
padding: 8px 10px 5px 1px; /*余白の調整*/
text-decoration: none; /*下線を消す*/
width:107px; /*幅*/
background: #fff;
border: solid 1px; /*枠線*/
color: #7f7f7f; /*文字色*/
border-color:#7f7f7f; /*枠線色*/
text-align:center; /*テキスト中央寄せ*/
}
表示する文字を「記事を読む」にした場合の例です。違う文字列で表示する場合は、文字数に応じて幅の部分を調整して下さい。
リンクのホバー色も変える場合は以下をお好みの色に変更して追記して下さい。
.read-more-link:hover {
color: #fff; /*ホバー時の文字色*/
background: #7f7f7f; /*ホバー時の背景色*/
text-decoration: none;
}
色の変更
色の変更は以下もご利用下さい。
その他の記事一覧カスタマイズ
カード型（最大１列）のカスタマイズ
https://ayaito.net/luxelitas/l_customize/3790/
タイル型のカスタマイズ
