SU 見出し

 

無料版では見出しの種類は1つです。

【su_heading style=”default” size=”13″ align=”center” margin=”20″ id=”” class=””]見出しテキスト[/su_heading】とオプションは6つあります。

見出しテキスト
.su-heading-style-default .su-heading-inner {
padding: 1em .5em;
border-top: 4px solid #eee;
border-bottom: 4px solid #eee;
}

 

ちなみに、テーマ毎に、そのテーマ独自の見出し意匠があります。原則h1からh6までの6種になります。

テーマLigntningの標準は次のとおりです。(h4はカスタマイズしています)

h1

h2

h3

h4

h5
h6

個人的には、「見出し」の特殊な意匠を追加するのは、SU見出しではなく「h6」などとセレクタを設定して、「CSSカスタマイズ」などに、そのCSSを追加するほうが、効率的ではないかと思います。

<h6><span>CSS見出しデザイン</span></h6>

CSS見出しデザイン
h6 { position: relative; padding: 1rem 2rem 1rem 4em; background: #fff; } h7 span { position: absolute; top: -10px; left: 20px; display: inline-block; width: 52px; height: 50px; text-align: center; background: #fa4141; } h7 span:before, h7 span:after { position: absolute; content: ''; } h7 span:before { right: -10px; width: 0; height: 0; border-right: 10px solid transparent; border-bottom: 10px solid #d90606; } h7 span:after { top: 50%; left: 0; display: block; height: 50%; border: 1em solid #fa4141; border-bottom-width: 15px; border-bottom-color: transparent; }