WordPressで見出しを装飾してみました

「外観」→「テーマの編集」→style.cssの h4 の所を以下の様に書き換えたり、付け足したりしました。

	.entry-content h4,
	.entry-summary h4,
	.page-content h4,
	.comment-content h4 {
		font-size: 18px;
		font-size: 1.8rem;
		line-height: 1.3333;
		margin-top: 2.6667em;
		margin-bottom: 1.3333em;
	position:relative;
	padding:10px;
	padding-left:15px;
	font-weight: bold;
	font-size: 18px;
	background-color: #51A2C1;
	color: #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	}

	.entry-content h4:before,
	.entry-summary h4:before,
	.page-content h4:before,
	.comment-content h4:before{
	content:''; 
	height:25px; 
	width:4px; 
	display:block; 
	position:absolute; 
	top:10px; 
	left:4px; 
	background-color:#fff;
	border-left: 4px solid #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

.entry-content h4,

.entry-summary h4,

.page-content h4,

.comment-content h4 {

font-size: 18px;

font-size: 1.8rem;

line-height: 1.3333;

margin-top: 2.6667em;

margin-bottom: 1.3333em;

position:relative;

padding:10px;

padding-left:15px;

font-weight: bold;

font-size: 18px;

background-color: #51A2C1;

color: #fff;

border-radius:3px;

-webkit-border-radius:3px;

-moz-border-radius:3px;

}

.entry-content h4:before,

.entry-summary h4:before,

.page-content h4:before,

.comment-content h4:before{

content:'';

height:25px;

width:4px;

display:block;

position:absolute;

top:10px;

left:4px;

background-color:#fff;

border-left: 4px solid #fff;

border-radius:3px;

-webkit-border-radius:3px;

-moz-border-radius:3px;

}

こんな感じ h1

こんな感じ h2

そのまんま h3

こんな感じ h4

そのまんま h5

そのまんま h6

装飾されましたd(^ー゜*)