WordPress見出し(h1・h2・h3…)のデザイン変更

スポンサーリンク

…)部分の、デザイン変更のやり方をまとめておきます。



CSSは、[外観]→[テーマ編集]で書き込みます。

見出し部分は、以下のソースを投稿に記入します。

<div class="midasi0001">  
    見出しタイトル部分
</div>





左側に太いラインを付けた見出し


.midasi0001{
    border-left:7px solid #ff1300;
    padding:.6em .8em
}


左側と下にラインを付けた見出し


.midasi0002{  
    border-left:7px solid #0000cf;  
    border-bottom:1px solid #9900ff;  
    padding:.6em .8em  
} 


左側(実践)と下(点線)にラインを付けた見出し


.midasi0003{  
    border-left:7px solid #ccc;  
    border-bottom:1px dashed #ccc;  
    padding:.6em .8em  
}


ボックスで囲んだ見出し


.midasi0004{  
    background:#eee;  
    border-top:1px solid #ccc;  
    border-right:1px solid #ccc;  
    border-left:7px solid #ccc;  
    border-bottom:1px solid #ccc;  
    padding:.8em .9em  
}


左側にラインと、背景色ボックスで囲んだ見出し


.midasi0005{  
    background:#eee;  
    border-left:7px solid #ccc;  
    padding:.8em .9em  
}


両側にラインと、背景色ボックスで囲んだ見出し


.midasi0006{  
    background:#eee;  
    border-right:7px solid #009900;  
    border-left:7px solid #009900;  
    padding:.8em .9em;  
}


アンダーラインと、背景色ボックスで囲んだ見出し


.midasi0007{  
    background:#eee;  
    border-bottom:7px solid #ff9b00;  
    padding:.8em .9em .3em  
}  


左側にダブルのラインでアクセント、背景色ボックスで囲んだ見出し


.midasi0008{  
    background:#eee;  
    border-left:7px double #0099ff;  
    padding:.8em .9em  
}


上下のラインではさまれた見出し


.midasi0009{  
    border-top:1px solid #ccc;  
    border-bottom:1px solid #ccc;  
    padding:.8em .9em  
}


上下ダブルのラインではさまれた見出し


.midasi0010{
    margin: 0 0 1.5em;
    padding: 0.8em;
    border-top: 3px double #993300;
    border-bottom: 3px double #993300;
    font-size: 1.143em;
    font-weight: bold;
} 


角Rの罫で囲まれた見出し


.midasi0011{
    margin: 0 0 1.5em;
    padding: 0.8em;
    border: 2px solid #009900;
    font-size: 1.143em;
    font-weight: bold;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}


太い罫で囲まれ、左側にラインのある見出し


.midasi0012{
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.8em 0 0.8em 1.5em;
    border: 2px solid #B92A2C;
    font-size: 1.143em;
    font-weight: bold;
}
.midasi0012:before{
    content: "";
    position: absolute;
    background: #B92A2C;
    top: 50%;
    left: 0.5em;
    margin-top :-15px;
    height: 30px;
    width: 8px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}


吹き出しの形をした見出し


.midasi0013{
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.8em;
    background: #ff66cc;
    color: #fff;
    font-size: 1.143em;
    font-weight: bold;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
} 
.midasi0013:before{
    position: absolute;
    bottom: -15px;
    left: 10%;
    z-index: 90;
    margin-left: -15px;
    border-top: 15px solid #ff66cc;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 0;
    content: "";
}


影付き矩形の見出し


.midasi0014{
    margin: 0 0 1.5em;
    padding: 0.8em;
    font-size: 1.143em;
    font-weight: bold;
    border: 2px solid #B92A2C;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
} 


立体的なリボン状の見出し
.midasi0015{
    position: relative;
    color: #fff;
    background: #B92A2C;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0em 1.5em 0em;
    padding: 0.8em;
    box-shadow: 0 1px 3px #777;
    -moz-box-shadow: 0 1px 3px #777;
    -webkit-box-shadow: 0 1px 3px #777;
    -o-box-shadow: 0 1px 3px #777;
    -ms-box-shadow: 0 1px 3px #777;
}
.midasi0015:after,
.midasi0015:before{
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.midasi0015:before{
    right: 0;
    border-left: 5px solid #333;
}
.midasi0015:after{
    left: 0;
    border-right: 5px solid #333;
}


立体的なリボン状の見出し、背景色グラデーション
.midasi0016{
  position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #bbb);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 20px;
  line-height: 1;
  margin: 30px 0px 10px 0px;
  padding: 15px 5px 10px 15px;
}
.midasi0016:after,
.midasi0016:before{
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 5px solid #777;
}
.midasi0016:before{
  left: 0;
  border-right: 5px solid #777;
}
.midasi0016:after{
  right: 0;
  border-left: 5px solid #777;
}


アクセントライン付きの、ボックス見出し
.midasi0018{
    padding: 0 0 0 1.2em;
    border:1px solid #ccc;
	border-top:4px solid #c00;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow:inset 0 1px 0 #fff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f2f2f2), to(#fff));
background: -moz-linear-gradient(#f2f2f2, #fff);
}


アクセントライン付きの、影付きボックス見出し
.midasi0019{
	clear:both;
	padding:5px 0px 0px 18px;
	font-weight:bold;color:#333;
	border-top: 1px solid #e5e5e5;
	border-bottom: 4px solid #c00;
	position:relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f2f2f2), to(#fff));
	background: -moz-linear-gradient(#f2f2f2, #fff);
}






スポンサーリンク

シェアする

フォローする

コメント

  1. […] 飾のデザイン例は、こちらも参照ください。WordPress見出し(h1・h2・h3…)のデザイン変更 […]

  2. […] WordPress見出し(h1・h2・h3…)のデザイン変更 […]