クールでかっこいいWPテーマ Ver.16 > テーマの機能 > 見出しのデザインを設定する
Release: 2019/02/06 Update: 2019/02/11

見出しのデザインを設定する

ランディングページ用に追加した見出しデザインですが、通常ページでも利用できる設定にしています。

※下部説明の 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>

の色指定ができます。

 

2つの四角背景の見出し

 

見出し 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」で表示しています。

 

HOME



コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。