ルクセリタスの記事一覧（カード）デザインをプチカスタマイズ

ルクセリタスで、トップページやアーカイブなどの記事一覧ページでの表示方法は、以下の通り９種類あります。

今回は、カード型（最大２列）での表示例ですが、その他のタイプにも応用可能です。

変更箇所

↓

具体的には以下のデザインを変更しています。

• メタ情報（カテゴリー名）の表示方法
• 「記事を読む」リンクの表示方法

基本設定

レイアウト

今回の例では「カード型（最大２列）」

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

色の変更

色の変更は以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 赤桃青紫黄橙緑茶黒

その他の記事一覧カスタマイズ

カード型（最大１列）のカスタマイズ

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

バージョンと初期デザインについて 当サイトで使用中のバージョンは以下です。（記事作成時） Luxeritas Child Themeバージョン: 3.0.0 Luxeritasバージョン: 3.5.7 ダウンロードはこちら ルクセリタスに用...

ayaito.net

タイル型のカスタマイズ

ルクセリタスの記事一覧表示をカスタマイズ（タイル型）

ルクセリタスの記事一覧「タイル型」のカスタマイズ例です。 上記デザインは以下をご覧ください。 カード型（インフィード広告対応）のカスタマイズは以下をご覧ください。 バージョンと初期デザインについて 当サイトで使用中のバージョンは以下です。（...

ayaito.net

ルクセリタスの記事一覧タイル型の設定例とプチカスタマイズ

ルクセリタス、記事一覧表示の「タイル型」で、簡単な設定例と少しだけ装飾CSSを追加するプチカスタマイズ方法です。 初期表示例 ↓ カスタマイズ後 カスタマイザーからの設定 グリッドレイアウトの設定 タイル型に設定（列数はお好みで） サムネイ...

ayaito.net