ルクセリタス記事一覧（カード）デザインをカスタマイズ
ルクセリタスの記事一覧ページでのカードデザインカスタマイズです。
外観カスタマイズ
前提部分
「外観」→「カスタマイズ」から「グリッドレイアウト」を選択し、内容を変更して下さい。
こちらはカード型最大１列でのカスタマイズですので、そのように設定を。
任意部分
サンプルの設定は以下のようにしていますが、これ以降はお好みで。
「記事を読む」のリンクを非表示にしています。
サムネイルは 320*180を使っています。
カスタマイズ
Before
After
- アイキャッチ画像の角を丸める
- 枠線の角を丸める
- メタ情報（カテゴリー、日付）の位置変更と装飾
- オンマウス時の背景色変更
※上の画像は、下側のカードにマウスが乗った際のサンプル
スタイルシート追記
子テーマのスタイルシートにCSSを追記します。
「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。（Ver.3.7.9以前は「style.cssタブ」）
以下を追記します。
CSS
コードを表示
/**********************
/*記事一覧カード
* ********************/
#list .meta { /*メタ情報*/
text-align: right;
font-size: 14px;
padding: 0;
border:none;
}
#list div[id^="card-"] span.category { /*カテゴリー*/
position: absolute;
top: 2px;
left: 20px;
border-radius: 8px;
background: #5d5855;
font-size: 11px;
padding: 0 10px;
line-height: 22px;
vertical-align: middle;
transition: .3s;
color: #fff;
}
#list div[id^="card-"] .fa-folder:before {
content: none;}
#list div[id^="card-"] span.category a{
color: #fff;
text-decoration: none;
}
#list div[id^="card-"] span.category:hover {
background-color:silver;
}
#list div[id^="card-"] figure.term .wp-post-image{border-radius: 15px;}
.toc{
border-bottom: 1px solid #ccc;
border-radius: 8px;
}
#card-1 .toc:hover:hover{ /*カード オンマウス時*/
background-color: #e6dcdc; /*背景色*/
}
上記CSSの最後の３行を以下のようにすると、関連記事と新着記事ウィジェットもオンマウスで背景色を付けます。
#card-1 .toc:hover ,#related .toc:hover ,#thk-new .toc:hover{
background-color: #e6dcdc;
}
その他の記事一覧カスタマイズ方法
カード型
タイル型
カラーの変更
色や、配置などはお好みで編集してご利用下さい。