見出しのデザインを設定する
ランディングページ用に追加した見出しデザインですが、通常ページでも利用できる設定にしています。
※下部説明の class=”〜” で ” ” が全角変換されていますので、利用時は半角に変更してご利用下さい。
先頭に丸いマーカーの見出し
見出し class=”idx01 red” のテストです！
<h2 class=”idx01 red”> 〜 </h2>
<h2 class=”idx01 blue”> 〜 </h2>
<h2 class=”idx01 green”> 〜 </h2>
<h2 class=”idx01 pink”> 〜 </h2>
<h2 class=”idx01 brown”> 〜 </h2>
<h2 class=”idx01 purple”> 〜 </h2>
<h2 class=”idx01 grey”> 〜 </h2>
の色指定ができます。なお、当説明は「idx09」で表示しています。
グレー背景の見出し
見出し class=”idx02 pink” のテストです！
<h2 class=”idx02 red”> 〜 </h2>
<h2 class=”idx02 blue”> 〜 </h2>
<h2 class=”idx02 green”> 〜 </h2>
<h2 class=”idx02 pink”> 〜 </h2>
<h2 class=”idx02 brown”> 〜 </h2>
<h2 class=”idx02 purple”> 〜 </h2>
<h2 class=”idx02 grey”> 〜 </h2>
の色指定ができます。なお、当説明は「idx01」で表示しています。
下線の見出し
見出し class=”idx03 blue” のテストです！
<h2 class=”idx03 red”> 〜 </h2>
<h2 class=”idx03 blue”> 〜 </h2>
<h2 class=”idx03 green”> 〜 </h2>
<h2 class=”idx03 pink”> 〜 </h2>
<h2 class=”idx03 brown”> 〜 </h2>
<h2 class=”idx03 purple”> 〜 </h2>
<h2 class=”idx03 grey”> 〜 </h2>
の色指定ができます。
囲み枠の見出し
見出し class=”idx04 green” のテストです！
<h2 class=”idx04 red”> 〜 </h2>
<h2 class=”idx04 blue”> 〜 </h2>
<h2 class=”idx04 green”> 〜 </h2>
<h2 class=”idx04 pink”> 〜 </h2>
<h2 class=”idx04 brown”> 〜 </h2>
<h2 class=”idx04 purple”> 〜 </h2>
<h2 class=”idx04 grey”> 〜 </h2>
の色指定ができます。
背景色と下線の見出し
見出し class=”idx05 brown” のテストです！
<h2 class=”idx04 red”> 〜 </h2>
<h2 class=”idx04 blue”> 〜 </h2>
<h2 class=”idx04 green”> 〜 </h2>
<h2 class=”idx04 pink”> 〜 </h2>
<h2 class=”idx04 yellow”> 〜 </h2>
<h2 class=”idx04 purple”> 〜 </h2>
<h2 class=”idx04 grey”> 〜 </h2>
の色指定ができます。
背景色と左線の見出し
見出し class=”idx06 red” のテストです！
<h2 class=”idx06 red”> 〜 </h2>
<h2 class=”idx06 blue”> 〜 </h2>
<h2 class=”idx06 green”> 〜 </h2>
<h2 class=”idx06 pink”> 〜 </h2>
<h2 class=”idx06 brown”> 〜 </h2>
<h2 class=”idx06 purple”> 〜 </h2>
<h2 class=”idx06 grey”> 〜 </h2>
の色指定ができます。
マーカーの見出し
見出し class=”idx07 purple” のテストです！
<h2 class=”idx07 red”> 〜 </h2>
<h2 class=”idx07 blue”> 〜 </h2>
<h2 class=”idx07 green”> 〜 </h2>
<h2 class=”idx07 pink”> 〜 </h2>
<h2 class=”idx07 brown”> 〜 </h2>
<h2 class=”idx07 purple”> 〜 </h2>
<h2 class=”idx07 grey”> 〜 </h2>
の色指定ができます。
片側折れ（リボン風）の見出し
見出しデザイン class=”idx09 blue”のテストです！
<h2 class=”idx08 red bld”> 〜 </h2>
<h2 class=”idx08 blue bld”> 〜 </h2>
<h2 class=”idx08 green bld”> 〜 </h2>
<h2 class=”idx08 pink bld”> 〜 </h2>
<h2 class=”idx08 brown bld”> 〜 </h2>
<h2 class=”idx08 purple bld”> 〜 </h2>
<h2 class=”idx08 grey bld”> 〜 </h2>
の色指定ができます。
Checkタブ付きの見出し
見出し class=”idx09 red”のテストです！
<h2 class=”idx09 red bld”> 〜 </h2>
<h2 class=”idx09 blue bld”> 〜 </h2>
<h2 class=”idx09 green bld”> 〜 </h2>
<h2 class=”idx09 pink bld”> 〜 </h2>
<h2 class=”idx09 brown bld”> 〜 </h2>
<h2 class=”idx09 purple bld”> 〜 </h2>
<h2 class=”idx09 grey bld”> 〜 </h2>
の色指定ができます。
２つの四角背景の見出し
見出し class=”idx10 red”で中央配置で
表示させたテストです！
<h2 class=”idx10 red”> 〜 </h2>
<h2 class=”idx10 blue”> 〜 </h2>
<h2 class=”idx10 green”> 〜 </h2>
<h2 class=”idx10 pink”> 〜 </h2>
<h2 class=”idx10 brown”> 〜 </h2>
<h2 class=”idx10 purple”> 〜 </h2>
<h2 class=”idx10 grey”> 〜 </h2>
の色指定ができます。なお、当説明は「idx09」で表示しています。
