Luxeritas(ルクセリタス)の使い方-サイドバーの見出しをきれいに！(検索タイトル等)デザインをカスタマイズしよう

2019年4月25日2019年9月4日

Luxeritas(ルクセリタス)の検索タイトル等のサイドバーの見出しをきれいにデザインしたい！

初期設定では、デザインが非常にシンプルなデザインをしています。そこで、サイトを作っているうちにデザインをきれいに見せたい。そんな風に感じた方も多いかと思います。

そんなあなたのために、サイドバーのデザインをカスタマイズする方法をご紹介していきましょう。

Contents

1. サイドバーの位置について
2. Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン初期設定」
3. Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン設定の仕方」
4. まとめ

サイドバーの位置について

一応確認ですが、サイドバーの位置がわからない方も案外いらっしゃるので、サイドバーの位置を解説しておきましょう。

この部分が「サイドバー」になりますので、間違えないようにしておきましょう。

Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン初期設定」

Luxeritas(ルクセリタス)のサイドバーのデフォルトの見出しのデザインは、下記のような画面になっています。ご覧ください。

このように、何もインパクトがない状態でとても味気ない感じがしますよね。そこで、このサイドバーをデザインして、見やすくしてあげましょう。

実際に投稿している内容を見るとわかるのですが、文章と見出しの境目がわかりにくくなるので、なるべく見出しは大きめに表示するようにデザインする方が読み手にとっても読みやすい記事になるメリットがあります。

Luxeritas(ルクセリタス)のサイドバー「見出しのデザイン設定の仕方」

それでは、実際にサイドバーの見出しのデザインの設定の仕方を解説していきましょう。こちらの画面をご確認下さい。

上図は、「追加CSS」に下記プログラムソースを記述した画面イメージになります。

サイドバーの見出し左横線を付ける設定
下線を付ける設定

＜追加したCSS＞

#side h3, #col3 h3, #side h4, #col3 h4  {
	background: #f5f5f5;
	color: #333;
	padding: 8px 15px 4px; 
	margin: 4px 0 8px; 
	font-weight: bold;
	border-left:10px solid #358be0;
	border-bottom:1px dotted #358be0; 
	font-size: 16px;
	font-size: 1.6rem; 
}