>> サイト内には広告が含まれます。プライバシーポリシーはこちら →
PR

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

ルクセリタス・カスタマイズ
この記事は約2分で読めます。
     

ルクセリタス、記事一覧表示の「タイル型」で、簡単な設定例と少しだけ装飾CSSを追加するプチカスタマイズ方法です。

 

初期表示例

8566_08

カスタマイズ後

8566_01

 

カスタマイザーからの設定

 

グリッドレイアウトの設定

8566_04

 

タイル型に設定(列数はお好みで)

8566_02

サムネイルの次にメタ情報がくるように設定

8566_03

 

サムネイルのサイズ設定

8566_06

お好みですが、例では320*180

8566_05

 

出力するメタ情報の設定

8566_09

例ではカテゴリー名のみ表示

8566_07

 

投稿日も表示した例

8566_10

 

CSS追記

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

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

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

 

メタ情報の装飾

メタ情報(カテゴリー名表示部分)を中央寄せにして、背景色をつけ装飾します。

 

「Luxeritas」→「子テーマの編集」でスタイルシートに以下を追記

#list .meta {
text-align: center; /*テキストを中央寄せ*/
border-radius: 8px; /*角の丸め*/
background: #5787b7; /*背景色*/
font-size: 14px;
padding: 0 10px;
line-height: 26px;
color: #fff;
}
#list span.category a{
color: #fff; /*文字色*/
font-weight: bold;
text-decoration: none;
}
#list span.date {
color: #fff; /*文字色*/
font-weight: bold;
}

 

以上です!

 

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

マカロンビビッドパステル和色セーフ色名 

コメント

タイトルとURLをコピーしました