ルクセリタス記事一覧(カード)デザインをカスタマイズ

カスタマイズ

ルクセリタスの記事一覧ページでのカードデザインカスタマイズです。

外観カスタマイズ

前提部分

「外観」→「カスタマイズ」から「グリッドレイアウト」を選択し、内容を変更して下さい。

こちらはカード型最大1列でのカスタマイズですので、そのように設定を。

任意部分

サンプルの設定は以下のようにしていますが、これ以降はお好みで。

「記事を読む」のリンクを非表示にしています。

記事一覧カード型の設定

 

サムネイルは 320*180を使っています。

記事一覧カード型の設定 記事一覧カード型の設定

 

カスタマイズ

Before

記事一覧カード

 

After

記事一覧カードカスタマイズ

  • アイキャッチ画像の角を丸める
  • 枠線の角を丸める
  • メタ情報(カテゴリー、日付)の位置変更と装飾
  • オンマウス時の背景色変更

記事一覧カードカスタマイズ

※上の画像は、下側のカードにマウスが乗った際のサンプル

 

スタイルシート追記

子テーマのスタイルシートにCSSを追記します。

 

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。(Ver.3.7.9以前は「style.cssタブ」)

Luxelitasスタイルシート編集画面

 

 以下を追記します。

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の最後の3行を以下のようにすると、関連記事と新着記事ウィジェットもオンマウスで背景色を付けます。

#card-1 .toc:hover ,#related .toc:hover ,#thk-new .toc:hover{
background-color: #e6dcdc;
}

 

 

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

カード型

タイル型

 

カラーの変更

色や、配置などはお好みで編集してご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名 配色パターンサンプル