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; }