タイトル一覧

CSSはスタイルシート・responsive.cssの一番下にコピペ。

デザイン見出し1

フォントサイズPC,SP 28px、下に50pxの余白

HTML

<h2 class="design_ttl1">デザイン見出し1</h2>

スタイルシート (style.css)

.home .design_ttl1, .page .design_ttl1, .archive .design_ttl1, .single .design_ttl1, .design_ttl1 {
    font-size: 28px !important;
    text-align: center;
    line-height: 1.5 !important;
    margin: 0 0 50px 0 !important;
    padding: 0 !important;
    font-weight: 600;
}

デザイン見出し2

PC フォントサイズ22px 上40px下に60pxの余白,SP フォントサイズ18px 上20px下に35pxの余白

HTML

<h2 class="design_ttl2"><span>デザイン見出し2</span></h2>

スタイルシート (style.css)

.home .design_ttl2, .page .design_ttl2, .archive .design_ttl2, .single .design_ttl2, .design_ttl2 {
    font-size: 22px;
    font-weight: 600;
    margin: 40px 0 60px;
    padding: 0;
    border-top: 1px solid #ddd;
    text-align: center;
    line-height: 1.5;
}
.design_ttl2 span {
    display: inline-block;
    border-top: 3px solid #0070a4;
    padding-top: 20px;
    margin-top: -1px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .design_ttl2, .page .design_ttl2, .archive .design_ttl2, .single .design_ttl2, .design_ttl2 {
    font-size: 18px;
    margin: 20px -20px 35px;
}
.design_ttl2 span {
    padding-top: 15px;
}
}

デザイン見出し9

フォントサイズPC 24px,SP 18px、下にPC 32px,SP 24pxの余白

HTML

<div class="design_ttl9">
<h3 class="ttl9_title"><span>デザイン見出し9</span></h3>
</div>

スタイルシート (style.css)

.design_ttl9 {
    border-bottom: 1px solid #ddd;
    padding-right: 40px;
    position: relative;
    box-sizing: border-box;
    font-size: 24px;
    margin: 0 0 32px;
    height: auto;
}
.design_ttl9 .ttl9_title {
    bottom: -1px;
    font-size: 24px;
    display: inline-block;
    position: relative;
    border-bottom: 3px solid #c30d23;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    height: auto;
    margin: 0;
    line-height: 1.4;
    padding: 0 0 6px;
}
.design_ttl9 .title span {
    padding-top: 3px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.design_ttl9 {
    margin: 0 0 24px;
}
.design_ttl9 .ttl9_title {
    font-size: 18px;
}
}

デザイン見出し3

フォントサイズPC 20px,SP 18px、下に24pxの余白

HTML

<h2 class="design_ttl3">デザイン見出し3</h2>

スタイルシート (style.css)

.home .design_ttl3, .page .design_ttl3, .archive .design_ttl3, .single .design_ttl3, .design_ttl3 {
    font-size: 20px;
    line-height: 1.5;
    margin: 0 0 24px 0;
    padding: 0;
    font-weight: 600;
}
.design_ttl3:after {
    border-top: 2px solid #73ba39;
    content: "";
    width: 150px;
    display: block;
    margin-top: 8px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .design_ttl3, .page .design_ttl3, .archive .design_ttl3, .single .design_ttl3, .design_ttl3 {
    font-size: 18px;
}
}

デザイン見出し4

フォントサイズPC 20px,SP 18px、下に24pxの余白

HTML

<h2 class="design_ttl4">デザイン見出し4</h2>

スタイルシート (style.css)

.home .design_ttl4, .page .design_ttl4, .archive .design_ttl4, .single .design_ttl4, .design_ttl4 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 24px 0;
    padding: 0;
	font-weight: 600;
}
.design_ttl4:after {
    border-top: 2px solid #cb696a;
    content: "";
    width: 64px;
    display: block;
    margin: 8px auto 0;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .design_ttl4, .page .design_ttl4, .archive .design_ttl4, .single .design_ttl4, .design_ttl4 {
    font-size: 18px;
}
}

デザイン見出し5

フォントサイズPC 26px,SP 22px、下に30pxの余白

HTML

<h2 class="design_ttl5">デザイン見出し5</h2>

スタイルシート (style.css)

.home .design_ttl5, .page .design_ttl5, .archive .design_ttl5, .single .design_ttl5, .design_ttl5 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    color: #ffffff;
    background: #000000;
    border-top: 0px solid #dddddd;
    border-bottom: 0px solid #dddddd;
    border-left: 0px solid #dddddd;
    border-right: 0px solid #dddddd;
    padding: 15px 15px 15px 15px;
    margin: 0px 0px 30px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.home .design_ttl5, .page .design_ttl5, .archive .design_ttl5, .single .design_ttl5, .design_ttl5 {
    font-size: 22px;
}
}

デザイン見出し6

フォントサイズPC 22px,SP 20px、下に30pxの余白

HTML

<h2 class="design_ttl6">デザイン見出し6</h2>

スタイルシート (style.css)

.home .design_ttl6, .page .design_ttl6, .archive .design_ttl6, .single .design_ttl6, .design_ttl6 {
    font-size: 22px;
    text-align: left;
    color: #000000;
    border-left: 2px solid #000000;
    padding: 6px 0px 6px 16px;
    margin: 0px 0px 30px;
}

responsive.css (css/responsive.css)

.home .design_ttl6, .page .design_ttl6, .archive .design_ttl6, .single .design_ttl6, .design_ttl6 {
    font-size: 20px;
}

デザイン見出し7

フォントサイズPC,SP 18px、下に30pxの余白

HTML

<h2 class="design_ttl7">デザイン見出し7</h2>

スタイルシート (style.css)

.home .design_ttl7, .page .design_ttl7, .archive .design_ttl7, .single .design_ttl7, .design_ttl7 {
	font-size: 18px;
    text-align: left;
    color: #000000;
    border-bottom: 1px solid #dddddd;
    padding: 3px 0px 3px 20px;
    margin: 0px 0px 30px;
}

デザイン見出し8

フォントサイズPC,SP 14px、下に30pxの余白

HTML

<h2 class="design_ttl8">デザイン見出し8</h2>

スタイルシート (style.css)

.home .design_ttl8, .page .design_ttl8, .archive .design_ttl8, .single .design_ttl8, .design_ttl8 {
	font-size: 14px;
    text-align: left;
    color: #000000;
    border-bottom: 1px solid #dddddd;
    padding: 3px 0px 3px 24px;
    margin: 0px 0px 30px;
}
TOP