賢威7の見出しデザインの変更カスタマイズ30選まとめ公開!

スクリーンショット 2016-02-13 0.20.28

 

賢威の新しいバージョン『賢威7』がリリースされましたが、前バージョンの6.2とかなり構造が異なり、完全なカスタマイズが公開されていないので、『どうやったらオリジナルカスタマイズができるのだろう…』と悩んでいる方も多いと思います。

というわけで今回は身近なところからカスタマイズということで、簡単にできる見出しのデザイン変更のカスタマイズについてまとめてみました!

また賢威7では記事内で使用する見出しの基準が『H3⇒H2』に変更されましたので、今回はH2のデザインカスタマイズを紹介していきます。

※CSSコードは同じなので、H3の箇所に記述してもらえれば、同じデザインでカスタマイズできます。
⇩賢威についての詳しい情報は下記から⇩
賢威公式サイト

 

賢威7 見出しデザイン30選まとめ

 

一応賢威7のH2のデフォルトデザインは以下の通りです。

2015-12-17_18h28_57

 

 

賢威7のH2のデザインを変更するカスタマイズ方法についてですが

ダッシュボード⇒外観⇒base.cssから以下の場所を探してください。

 

/*——————————————————–
見出し
——————————————————–*/

.section-in > h1:first-child,
.section-in > h2:first-child,
.section-in > h3:first-child,
.section-in > h4:first-child,
.section-in > h5:first-child,
.section-in > h6:first-child{
margin-top: 0;

 

の欄の少し下に

 

.main-body h2{
margin: 60px 0 30px;
padding: 3px 18px;
background: #222;
color: #fff;
font-size: 1.75em;
}

の部分を丸々変更してください。

 

賢威7 背景色なし見出しデザインまとめ

 

斜め棒

 

4

 

 

.mainbody h2{
position: relative;
paddingleft: 30px;
borderbottom: 2px solid #ccc;
fontweight: bold;
fontsize: 22px;
lineheight: 38px;
}
.mainbody h2:after, .heading2:before{
content: ;
height: 18px;
width: 4px;
display: block;
background: #499d48;
position: absolute;
top: 8px;
left: 15px;
borderradius: 10px;
webkitborderradius: 10px;
mozborderradius: 10px;
transform: rotate(45deg);
webkittransform: rotate(45deg);
moztransform: rotate(45deg);
otransform: rotate(45deg);
mstransform: rotate(45deg);
}
.mainbody h2:before{
height: 10px;
transform: rotate(45deg);
webkittransform: rotate(45deg);
moztransform: rotate(45deg);
otransform: rotate(45deg);
mstransform: rotate(45deg);
top: 16px;
left: 7px;
}

棒線&点線

3
.mainbody h2{
margin: 0 0 1.5em;
padding: 0.8em;
borderleft: 7px solid #499d48;
borderbottom: 1px dashed #499d48;
fontsize: 1.143em;
fontweight: bold;
}

四角&アンダーライン

8
.mainbody h2{
position: relative;
color: #111;
fontsize: 1.143em;
fontweight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.7em;
borderbottom: 3px solid #499d48;
}
.mainbody h2:before{
content: “”;
position: absolute;
background: #00ff00;
top: 0;
left: 0.4em;
height: 12px;
width: 12px;
transform: rotate(45deg);
moztransform: rotate(45deg);
webkittransform: rotate(45deg);
otransform: rotate(45deg);
mstransform: rotate(45deg);
}
.mainbody h2:after{
content: “”;
position: absolute;
background: #32cd32;
top: 1.0em;
left: 0;
height: 8px;
width: 8px;
transform: rotate(15deg);
moztransform: rotate(15deg);
webkittransform: rotate(15deg);
otransform: rotate(15deg);
mstransform: rotate(15deg);
}

アンダーライン

1

 

左文字拡大

5

 

.mainbody h2{
color: #111;
fontsize: 1.143em;
fontweight: bold;
margin: 0 0 1.5em;
borderbottom: 2px solid #499d48;
boxshadow: 0 1px 0 #aaaaaa;
webkitboxshadow: 0 1px 0 #aaaaaa;
mozboxshadow: 0 1px 0 #aaaaaa;
textshadow: #999999 0px 1px 1px;
}
.mainbody h2:firstletter{
fontsize:3.0em;
}

2重線

2
.mainbody h2{
margin: 0 0 1.5em;
padding: 0.8em;
bordertop: 3px double #499d48;
borderbottom: 3px double #499d48;
fontsize: 1.143em;
fontweight: bold;
}

吹き出し

9
.mainbody h2{
position: relative;
padding: 5px 20px;
font: bold 28px/1.6 Arial, Helvetica, sansserif;
color: #333;
background: #fff;
textshadow:
1px 1px 0 #fff,
2px 2px 0 #999;
bordertop: #499d48 solid 3px;
borderbottom: #499d48 solid 3px;
backgroundimage: webkitgradient(linear, left top, right bottom,
from( rgba(255, 255, 255, 0.0)),
colorstop(0.4, rgba(255, 255, 255, 0.0)),
colorstop(0.4, rgba(0, 0, 0, 0.1)),
colorstop(0.6, rgba(0, 0, 0, 0.1)),
colorstop(0.6, rgba(255, 255, 255, 0.0)),
to( rgba(255, 255, 255, 0.0))
);
backgroundimage: webkitlineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
     rgba(0, 0, 0, 0.1) 60%,
       transparent 60%
);
backgroundimage: mozlineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: olineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: lineargradient(to bottom 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundsize: 4px 4px;
}
.mainbody h2:before{
content: ” “;
position: absolute;
top: 100%;
left: 24px;
width: 0;
height: 0;
borderwidth: 12px;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #499d48;
}
.mainbody h2:after{
content: ” “;
position: absolute;
top: 100%;
left: 28px;
width: 0;
height: 0;
borderwidth: 8px;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #499d48;
zindex: 1;
}

丸枠線

10
.mainbody h2{
position: relative;
margin: 0 10px;
padding: 0 10px 0 55px;
font: bold 22px/40px Arial, Helvetica, sansserif;
color: #333333;
background: #fff;
zindex: 1;
borderbottom: 3px solid #499d48;
}
.mainbody h2:before{
content: ” “;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
borderright: #fff solid 2px;
background: #499d48;
backgroundimage: webkitgradient(linear, left top, left bottom,
from( rgba(255, 255, 255, 0.0)),
colorstop(0.20, rgba(255, 255, 255, 0.0)),
colorstop(0.20, rgba(255, 255, 255, 0.1)),
colorstop(0.40, rgba(255, 255, 255, 0.1)),
colorstop(0.40, rgba(255, 255, 255, 0.3)),
colorstop(0.60, rgba(255, 255, 255, 0.3)),
colorstop(0.60, rgba(255, 255, 255, 0.5)),
colorstop(0.80, rgba(255, 255, 255, 0.5)),
colorstop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
backgroundimage: webkitlineargradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
backgroundimage: mozlineargradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
backgroundimage: olineargradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
backgroundimage: lineargradient(to bottom,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
zindex:1;
}
.mainbody h2:after{
content: ” “;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
    backgroundimage: webkitgradient(linear, left top, right top,
from( rgba(255, 255, 255, 0.0)),
colorstop(0.20, rgba(255, 255, 255, 0.0)),
colorstop(0.20, rgba(255, 255, 255, 0.1)),
colorstop(0.40, rgba(255, 255, 255, 0.1)),
colorstop(0.40, rgba(255, 255, 255, 0.3)),
colorstop(0.60, rgba(255, 255, 255, 0.3)),
colorstop(0.60, rgba(255, 255, 255, 0.5)),
colorstop(0.80, rgba(255, 255, 255, 0.5)),
colorstop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
backgroundimage: webkitlineargradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
backgroundimage: mozlineargradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
backgroundimage: olineargradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
backgroundimage: lineargradient(to right,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
zindex:1;
}

四角2つ

6
.mainbody h2{
position: relative;
fontsize: 1.143em;
fontweight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 2.0em;
borderbottom: 2px solid #499d48;
}
.mainbody h2:before{
content: “□”;
fontsize: 200%;
position: absolute;
color: #32cd32;
top: 0.8em;
left: 0.3em;
height: 12px;
width: 12px;
}
.mainbody h2:after{
content: “□”;
fontsize: 200%;
position: absolute;
color: #00ff00;
top: 0.5em;
left: 0;
height: 12px;
width: 12px;
}

丸枠線影

11
.mainbody h2{
margin: 0 0 1.5em;
padding: 0.8em;
fontsize: 1.143em;
fontweight: bold;
border: 2px solid #499d48;
borderradius: 18px;
boxshadow: 3px 3px 3px rgba(0,0,0,0.4);
mozboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
webkitboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
oboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
msboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
}

四角枠線影

12
.mainbody h2{
margin: 0 0 1.5em;
padding: 0.8em;
fontsize: 1.143em;
fontweight: bold;
border: 2px solid #499d48;
boxshadow: 3px 3px 3px rgba(0,0,0,0.4);
mozboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
webkitboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
oboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
msboxshadow: 3px 3px 3px rgba(0,0,0,0.4);
}

横線四角枠線

13
.mainbody h2{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em 0 0.8em 1.5em;
border: 2px solid #499d48;
fontsize: 1.143em;
fontweight: bold;
}
.mainbody h2:before{
content: “”;
position: absolute;
background: #499d48;
top: 50%;
left: 0.5em;
margintop :15px;
height: 30px;
width: 8px;
borderradius: 2px;
webkitborderradius: 2px;
mozborderradius: 2px;
}

横丸枠線

14
.mainbody h2{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em 0 0.8em 2.5em;
border: 1px solid #499d48;
fontsize: 1.143em;
fontweight: bold;
borderradius: 20px;
webkitborderradius: 20px;
mozborderradius: 20px;
}
.mainbody h2:before{
content: “”;
position: absolute;
background: #499d48;
top: 50%;
left: 0.5em;
margintop :10px;
height: 20px;
width: 20px;
borderradius: 15px;
webkitborderradius: 15px;
mozborderradius: 15px;
boxshadow: 1px 1px 1px #499d48 inset;
mozboxshadow: 1px 1px 1px #499d48 inset;
webkitboxshadow: 1px 1px 1px #499d48 inset;
oboxshadow: 1px 1px 1px #499d48 inset;
msboxshadow: 1px 1px 1px #499d48 inset;
}

枠線吹き出し

15
.mainbody h2{
position: relative;
padding: 0.8em;
margin: 0 0 1.5em;
fontsize: 1.143em;
fontweight: bold;
color: #333;
background: #fff;
textshadow: 1px 1px 0 #fff, 1px 1px 0 #999;
border: #499d48 solid 2px;
backgroundimage: webkitgradient(linear, left top, right bottom,
from( rgba(255, 255, 255, 0.0)),
colorstop(0.4, rgba(255, 255, 255, 0.0)),
colorstop(0.4, rgba(0, 0, 0, 0.1)),
colorstop(0.6, rgba(0, 0, 0, 0.1)),
colorstop(0.6, rgba(255, 255, 255, 0.0)),
to( rgba(255, 255, 255, 0.0))
);
backgroundimage: webkitlineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: mozlineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: olineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: lineargradient(to bottom 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundsize:4px 4px;
}
.mainbody h2:before{
content: ” “;
position: absolute;
top: 100%;
left: 24px;
width: 0;
height: 0;
borderwidth: 12px;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #499d48;
}
.mainbody h2:after{
content: ” “;
position: absolute;
top: 100%;
left: 28px;
width: 0;
height: 0;
borderwidth: 8px;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #F0F0F0;
zindex:1;
}

吹き出し塗りつぶし

16
.mainbody h2{
position: relative;
padding: 0.8em;
margin: 0 0 1.5em;
fontsize: 1.143em;
fontweight: bold;
borderradius: 5px;
color: #333;
background: #fff;
textshadow: 1px 1px 0 #fff, 1px 1px 0 #999;
border: #499d48 solid 2px;
backgroundimage: webkitgradient(linear, left top, right bottom,
from( rgba(255, 255, 255, 0.0)),
colorstop(0.4, rgba(255, 255, 255, 0.0)),
colorstop(0.4, rgba(0, 0, 0, 0.1)),
colorstop(0.6, rgba(0, 0, 0, 0.1)),
colorstop(0.6, rgba(255, 255, 255, 0.0)),
to( rgba(255, 255, 255, 0.0))
);
backgroundimage: webkitlineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: mozlineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: olineargradient(top 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundimage: lineargradient(to bottom 45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
backgroundsize:4px 4px;
}
.mainbody h2:before{
content: ” “;
position: absolute;
top: 100%;
left: 24px;
width: 0;
height: 0;
borderwidth: 12px;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #499d48;
}
.mainbody h2:after{
content: ” “;
position: absolute;
top: 100%;
left: 28px;
width: 0;
height: 0;
borderwidth: 8px;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #499d48;
zindex:1;
}

賢威7 背景あり見出しデザインまとめ

20
.mainbody h2{
position: relative;
color: #fff;
background: #499d48;
fontsize: 1.143em;
fontweight: bold;
margin: 0 2.8em 1.5em 2.8em;
padding: 0.8em;
boxshadow: 0 1px 3px #777;
mozboxshadow: 0 1px 3px #777;
webkitboxshadow: 0 1px 3px #777;
oboxshadow: 0 1px 3px #777;
msboxshadow: 0 1px 3px #777;
}
.mainbody h2:after,
.mainbody h2:before{
content: “”;
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
bordertop: 5px solid #333;
}
.mainbody h2:before{
right: 0;
borderleft: 5px solid #333;
}
.mainbody h2:after{
left: 0;
borderright: 5px solid #333;
}

横線

17
.mainbody h2{
position:relative;
padding:10px;
paddingleft:15px;
fontweight: bold;
fontsize: 18px;
backgroundcolor: #499d48;
color: #fff;
borderradius:3px;
webkitborderradius:3px;
mozborderradius:3px;
}
.mainbody h2:before{
content:;
height:25px;
width:4px;
display:block;
position:absolute;
top:10px;
left:4px;
backgroundcolor:#fff;
borderleft: 4px solid #fff;
borderradius:3px;
webkitborderradius:3px;
mozborderradius:3px;
}

吹き出し

19
.mainbody h2{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em;
background: #499d48;
color: #fff;
fontsize: 1.143em;
fontweight: bold;
borderradius: 5px;
webkitborderradius: 5px;
mozborderradius: 5px;
}
.mainbody h2:after{
position: absolute;
bottom: 15px;
left: 10%;
zindex: 90;
marginleft: 15px;
bordertop: 15px solid #499d48;
borderleft: 15px solid transparent;
borderright: 15px solid transparent;
borderbottom: 0;
content: “”;
}

マーカー

 

18
.mainbody h2{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em;
fontsize: 1.143em;
fontweight: bold;
color: #fff;
background: #499d48;
boxshadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2);
mozboxshadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2);
webkitboxshadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2);
oboxshadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2);
msboxshadow: 12px 0 0 0 #499d48, 0 12px 0 0 #499d48, 1px 15px 4px -3px rgba(0,0,0,0.2);
}
.mainbody h2:before{
content: ” “;
position: absolute;
top: 100%;
left: 100%;
width: 0;
height: 0;
borderwidth: 12px 12px 0 0;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #00ff00;
}
.mainbody h2:after{
content: ” “;
position: absolute;
padding: 0 20px;
bottom: 0;
left: 0.8em;
width: 10.0em;
height: 1.5em;
background: rgba(255,244,244,0.4);
transform: rotate(1deg);
webkittransform: rotate(1deg);
moztransform: rotate(1deg);
otransform: rotate(1deg);
}

二重丸

22
.mainbody h2{
position: relative;
color: #fff;
background: #32cd32;
fontsize: 20px;
lineheight: 1;
margin: 30px 0 10px 0;
padding: 14px 5px 10px 40px;
boxshadow: 0 1px 3px #777;
borderradius: 0 10px 10px 0;
}
.mainbody h2:before{
content: “”;
position: absolute;
background: #499d48;
top: 50%;
left: 20px;
margintop : 22px;
height: 44px;
width: 44px;
boxshadow: 1px 1px 1px #777;
borderradius: 50%;
}
.mainbody h2:after{
content: “”;
position: absolute;
background: #006400;
top: 50%;
left: 15px;
margintop: 15px;
height: 24px;
width: 24px;
borderradius: 50%;
}

リボン

21
.mainbody h2{
position: relative;
color: #111;
background: #499d48;
fontsize: 20px;
lineheight: 1;
margin: 30px 20px 10px 10px;
padding: 14px 5px 10px 50px;
borderradius: 22px 0 0 22px;
}
.mainbody h2:before{
content: “”;
position: absolute;
background: #fff;
top: 50%;
left: 14px;
margintop :10px;
height: 20px;
width: 20px;
borderradius: 50%;
boxshadow: 1px 1px 1px #777 inset;
}
.mainbody h2:after{
content: “”;
position: absolute;
top: 0;
right: 22px;
height: 0;
width: 0;
border: 22px solid #499d48;
borderrightcolor: transparent;
}

25
.mainbody h2{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em;
fontsize: 1.143em;
fontweight: bold;
color: #fff;
background: #499d48;
}
.mainbody h2:before{
content: “<“;
position: absolute;
top: middle;
left: 10px;
width: 0;
height: 0;
fontsize: 25px;
lineheight: 1.0;
color: #c96;
}
.mainbody h2:after{
content: ” “;
position: absolute;
top: 2px;
left: 10px;
width: 0;
height: 130%;
border: #600 solid 2px;
borderradius:2px;
webkitborderradius: 2px;
mozborderradius: 2px;
transform: rotate(2deg);
webkittransform: rotate(2deg);
moztransform: rotate(2deg);
otransform: rotate(2deg);
}

ボックス

23
.mainbody h2{
position: relative;
padding: 10px;
color: #fff;
background: #006400;
boxshadow:
0 10px 0 0 #499d48,
10px 0 0 0 #006400,
10px 0 0 0 #006400,
0 3px 3px 0 rgba(0,0,0,0.1);
}
.mainbody h2:before{
content: ” “;
position: absolute;
top: 10px;
left: 10px;
width: 0;
height: 0;
borderwidth: 0 0 10px 10px;
borderstyle: solid;
bordercolor: transparent;
borderbottomcolor: #499d48;
}
.mainbody h2: after{
content: ” “;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
borderwidth: 0 10px 10px 0;
borderstyle: solid;
bordercolor: transparent;
borderbottomcolor: #499d48;
}

2色ライン

24
.mainbody h2{
width: auto;
padding: 3px 0 3px 10px;
color: #fff;
backgroundimage: webkitgradient(linear, 0% 0%, 0% 100%, colorstop(0.48, #32cd32), color-stop(0.52, #499d48));
textshadow: 0px 1px 1px #000;
}

グラデーション

28

斜め帯

27
.mainbody h2{
position: relative;
margin: 0 10px;
padding: 5px;
font: normal 28px/1.6 “Times New Roman”, Times, serif;
textalign: center;
color: #ffe8e8;
background: #499d48;
webkittransform: rotate(3deg) skew(3deg);
moztransform: rotate(3deg) skew(3deg);
otransform: rotate(3deg) skew(3deg);
transform: rotate(3deg) skew(3deg);
boxshadow: 0 1px 2px 0 rgba(0,0,0,0.2);
backgroundimage: webkitgradient(linear, left top, left bottom,
from( rgba(0, 0, 0, 0.0)),
colorstop(0.08, rgba(255, 255, 255, 0.5)),
colorstop(0.12, rgba(255, 255, 255, 0.5)),
colorstop(0.12, rgba(0, 0, 0, 0.0)),
colorstop(0.88, rgba(0, 0, 0, 0.0)),
colorstop(0.88, rgba(255, 255, 255, 0.5)),
colorstop(0.92, rgba(255, 255, 255, 0.5)),
colorstop(0.92, rgba(0, 0, 0, 0.0)),
to( rgba(0, 0, 0, 0.0))
);
backgroundimage: mozlineargradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
backgroundimage: olineargradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
backgroundimage: lineargradient(to bottom,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
}
.mainbody h2:before{
content: ” “;
position: absolute;
top: 5px;
left: 0;
width: 0;
height: 0;
borderwidth: 0 0 5px 10px;
borderstyle: solid;
bordercolor: transparent;
borderbottomcolor: #006400;
}
.mainbody h2:after{
content: ” “;
position: absolute;
top: 100%;
right: 0;
width: 0;
height: 0;
borderwidth: 5px 10px 0 0;
borderstyle: solid;
bordercolor: transparent;
bordertopcolor: #006400;
}

斜め

26
.mainbody h2{
position: relative;
padding: 0.8em;
margin: 0 0 1.5em;
fontsize: 1.25em;
fontweight: bold;
textalign: center;
color: #fff;
background: #499d48;
vtransform: rotate(1deg) skew(1deg);
webkittransform: rotate(1deg) skew(1deg);
moztransform: rotate(1deg) skew(1deg);
otransform: rotate(1deg) skew(1deg);
mstransform: rotate(1deg) skew(1deg);
boxshadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48;
mozboxshadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48;
webkitboxshadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48;
oboxshadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48;
msboxshadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #499d48, -1.0em 0 0 0 #499d48;
}

メタリック

30
.mainbody h2{
position: relative;
margin: 0 10px;
padding: 10px 10px 10px 30px;
font: bold 22px/1.2 Arial, Helvetica, sansserif;
color: #666;
background: #ccc;
bordertop: #ccc solid 1px;
borderright: #999 solid 1px;
borderbottom: #999 solid 1px;
borderleft: #ccc solid 1px;
textshadow: 1px 1px 0 rgba(255,255,255,1);
boxshadow:
0 0 0 1px rgba(255,255,255,0.5) inset;
backgroundimage: webkitgradient(linear, left top, left bottom,
from( rgba(220, 220, 220, 1.0)),
colorstop(0.25, rgba(240, 240, 240, 1.0)),
colorstop(0.30, rgba(235, 235, 235, 1.0)),
colorstop(0.36, rgba(240, 240, 240, 1.0)),
colorstop(0.50, rgba(235, 235, 235, 1.0)),
colorstop(0.80, rgba(215, 215, 215, 1.0)),
to( rgba(210, 210, 210, 1.0))
);
backgroundimage: webkitlineargradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
backgroundimage: mozlineargradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
backgroundimage: olineargradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
backgroundimage: lineargradient(to bottom,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
}
.mainbody h2: before{
content: ” “;
position: absolute;
top: 0;
left: 15px;
width: 0;
height: 100%;
borderleft: #ccc solid 1px;
}
.mainbody h2: after{
content: ” “;
position: absolute;
top: 0;
left: 16px;
width: 0;
height: 100%;
borderright: #eee solid 1px;
}

上下点線

29
.mainbody h2{
position:relative;
padding:9px;
paddingleft:15px;
fontweight: bold;
fontsize: 18px;
backgroundcolor: #ccc;
border: 1px dashed #499d48;
borderleft: 5px solid #499d48;
}

まとめ

賢威7の見出しカスタマイズデザイン3o選をまとめてみました!

コピーして使って頂けますので、ぜひカスタマイズにご利用ください。

最後までお読み頂きありがとうございます。

 

賢威7カスタマイズ大図鑑へ戻る

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ