テーマLuxeritas(ルクセリタス)のサイドバー見出しのデザインをカスタマイズ

ルクセリタスのサイドバー見出しをカスタマイズする

ちなみにデフォルトではこんな感じに見えます。

Pattern1 左側に線を引く

Pattern1 のCSS

#side h3, #col3 h3, #side h4, #col3 h4 {
    border-left: solid 10px #f2a0a1;/* 線の太さと色*/
    font-size: 18px;/* 文字サイズは外観→カスタマイズから*/
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;/* 文字の色 */
    margin: 4px 0 10px;/* 上 左右 下*/
    padding: 4px 10px; /* 上下 左右*/
}

Pattern2 下に線を引く

Pattern2 のCSS

#side h3, #col3 h3, #side h4, #col3 h4 {
	border-bottom: dotted 3px #333;/* 線の種類と太さと色*/
	font-size: 18px;/* 文字サイズは外観→カスタマイズから*/
	font-size: 1.8rem;
	font-weight: 700;
	color: #333;/* 文字の色 */
	margin: 4px 0 10px;/* 上 左右 下*/
	padding: 6px 10px; /* 上下 左右*/
}

Pattern3 左と下に線を引く

Pattern3 のCSS

#side h3, #col3 h3, #side h4, #col3 h4 {
	border-left: solid 10px #f2a0a1;/* 左の線の太さと色*/
	border-bottom: dotted 3px #f2a0a1;/* 下の線の種類と太さと色*/
	font-size: 18px;/* 文字サイズは外観→カスタマイズから*/
	font-size: 1.8rem;
	font-weight: 700;
	color: #333;/* 文字の色 */
	margin: 4px 0 10px;/* 上 左右 下*/
	padding: 6px 10px; /* 上下 左右*/
}

Pattern4 先頭に画像・下に線

Pattern4 のCSS

#side h3, #col3 h3, #side h4, #col3 h4 {
	border-bottom: solid 3px #f2a0a1;/* 線の種類と太さと色*/
	font-size: 18px;/* 文字サイズは外観→カスタマイズから*/
	font-size: 1.8rem;
	font-weight: 700;
	color: #333;/* 文字の色 */
	margin: 4px 0 10px;/* 上 左右 下*/
	padding: 8px 0px 8px 45px; /* 上 右 下 左*/
	background: url(/wp-content/uploads/ic-34.gif) no-repeat left center;
}

Pattern5 先頭にFontAwesomeアイコンを表示

Font Awesome 4 の場合

Pattern5 のCSS

.side-title:before {
	content: "\f0c9";
	font-family: FontAwesome;
	margin-right: 7px;
	color: #888; /* アイコンの色 */
}

Font Awesome 5 の場合

Pattern5 のCSS

.side-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0c9";
	margin-right: 7px;
	color: #888; /* アイコンの色 */
}

Pattern6 背景色をつけて線で囲む

Pattern6 のCSS

#side h3, #col3 h3, #side h4, #col3 h4 {
	background: #f2797b;
	box-shadow: 0 0 0 5px #f38181;
	border: dashed 1px #fff;
	padding: 0.5em 1.0em; /* 上下 左右 */
	color: #fff;
	border-radius: 0.5em;
}

Pattern7 さらに先頭にFontAwesomeアイコンを表示

Font Awesome 4 の場合

Pattern7 のCSS

#side h3, #col3 h3, #side h4, #col3 h4 {
	background: #f2797b;
	box-shadow: 0 0 0 5px #f38181;
	border: dashed 1px #fff;
	padding: 0.5em 1.0em; /* 上下 左右 */
	color: #fff;
	border-radius: 0.5em;
}
.side-title:before {
	font-family: FontAwesome;
	content: "\f0c9";
	margin-right: 7px;
	color: #fff; /* アイコンの色 */
}

Font Awesome 5 の場合

Pattern7 のCSS

#side h3, #col3 h3, #side h4, #col3 h4 {
	background: #f2797b;
	box-shadow: 0 0 0 5px #f38181;
	border: dashed 1px #fff;
	padding: 0.5em 1.0em; /* 上下 左右 */
	color: #fff;
	border-radius: 0.5em;
}
.side-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0c9";
	margin-right: 7px;
	color: #fff; /* アイコンの色 */
}

Pattern8 細い実線で囲む

Pattern8 のCSS

#side h3, #col3 h3 {
	position: relative;
	margin: 10px 0;
	padding: 8px 15px;
	border:1px solid #f26163;
	border-radius: 10px;
	text-align: center;
	color:#333;
}
#side h4, #col3 h4 {
	position: relative;
	margin: 10px 0;
	padding: 8px 15px;
	border:1px solid #4191e0;
	border-radius: 10px;
	text-align: center;
	color:#333;
}

Pattern9 付箋風に色をつける

Font Awesome 4 の場合

Pattern9 のCSS

/* サイドバー見出し */
#side h3, #col3 h3, #side h4, #col3 h4 {
	border-left: solid 30px #116ebf;/* 左の線の太さと色*/
	background-color:#4191e0;
	height:35px;
	font-weight: 700;
	color: #fff;/* 文字の色 */
	margin: 4px 0 10px;/* 上 左右 下*/
	padding: 10px; /* 上下左右*/
	box-shadow: 2px 2px 4px gray; /* シャドー*/
	font-size: 16px; /* 文字サイズは外観→カスタマイズから*/
	font-size: 1.6rem; /* 文字サイズは外観→カスタマイズから*/
}
/* 先頭にアイコン */
.side-title:before {
	font-family: FontAwesome;
	content: "\f0c9";
	margin-right: 7px;
	color: #fff; /* アイコンの色 */
}

Font Awesome 5 の場合

Pattern9 のCSS

/* サイドバー見出し */
#side h3, #col3 h3, #side h4, #col3 h4 {
	border-left: solid 30px #116ebf;/* 左の線の太さと色*/
	background-color:#4191e0;
	height:35px;
	font-weight: 700;
	color: #fff;/* 文字の色 */
	margin: 4px 0 10px;/* 上 左右 下*/
	padding: 10px; /* 上下左右*/
	box-shadow: 2px 2px 4px gray; /* シャドー*/
	font-size: 16px; /* 文字サイズは外観→カスタマイズから*/
	font-size: 1.6rem; /* 文字サイズは外観→カスタマイズから*/
}
/* 先頭にアイコン */
.side-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0c9";
	margin-right: 7px;
	color: #fff; /* アイコンの色 */
}

Pattern10 左と下に線+薄い背景色

Pattern10 の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; /*文字サイズはここに書かず外観→カスタマイズで変更*/
}

あとがき

こちらもどうぞ

関連サイドバーのカテゴリの見出しをカスタマイズ

関連記事の見出しをカスタマイズ