ルクセリタスのサイトマップ・デザインカスタマイズ

2021-09-16ルクセリタス・カスタマイズ

ルクセリタスには簡単にサイトマップ（記事一覧）を作成できる機能があります。

使い方は以下をご覧ください。

 

 

サイトマップのデザインカスタマイズ

デフォルトサンプル

 

CSSの追記について

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

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

 

サンプル１

左側の縦ラインがゴチャゴチャするので一番外枠以外を消し、リンクの文字色、オンマウス時の文字装飾を変更。

 

サンプル

 

#sitemap a{color:#4a372b;}
#sitemap a:hover{color: #b67070;
text-decoration:underline !important;}
#sitemap li li{border-left: none;}

 

サンプル２

縦線・横線をすべて消し、文字を小さくしたバージョンは以下です。

サンプル

 

#sitemap a{font-size: 12px; padding-bottom:1px;color:#333 !important;}
#sitemap a:hover{color:#78aad2 !important;}
#sitemap li{border-left: none !important;}
#sitemap li::before{content: none !important;}

 

サンプル３

上記に任意の記号を付けたバージョン

サンプル

 

#sitemap a{font-size: 12px; padding-bottom:1px;color:#333 !important;}
#sitemap a:hover{color:#78aad2 !important;}
#sitemap li{border-left: none !important;}
#sitemap li::before{content: "♥" !important; color:#78aad2 !important;}

 

サンプル４

上記に更に、Home　や　カテゴリー名　を枠で囲ったバージョン

サンプル

 

#sitemap a{font-size: 12px; padding-bottom:1px;color:#333 !important;}
#sitemap a:hover{color:#78aad2 !important;}
#sitemap li{border-left: none !important;}
#sitemap li::before{content: "♥" !important; color:#78aad2 !important;}
#sitemap .category_item a{
padding:1px 10px; 
border:solid 1px #333;
}
#sitemap .post_item a{
border:none;
}
#sitemap .sitemap-home{
padding:2px 10px; 
border:solid 1px #333;
}

 

 

 

要素ごとのデザインのカスタマイズは、以下のセレクタで編集可能です。

 

 

その他のルクセリタスに関するカスタマイズは以下をご覧ください。