この記事はSANGOカスタマイズガイドの「見出しの挿入方法と種類一覧」を一部転載したものです。
見出し2の表示例
↑こちらは見出し2を選んだときの表示です。初期設定ではカスタマイズしやすいように、シンプルなものにしています。必要に応じてデザインを変えて頂ければと思います。なお、HTMLは以下のようになります。
<h2>見出し2の表示例</h2>見出し3の表示例
↑こちらは見出し3を選んだときの表示です。HTMLは以下のようになります。
<h3>見出し3の表示例</h3>見出し4の表示例
↑こちらは見出し4を選んだときの表示です。HTMLは以下のようになります。
<h4>見出し4の表示例</h4>見出し5の表示例
↑こちらは見出し5を選んだときの表示です。HTMLは以下のようになります。
<h5>見出し5の表示例</h5>見出し1（h1）は記事のタイトルで使われています。本文では基本的に使わない方が良いため、スタイル設定には表示されないようにしてあります。
CatNose
初期設定の見出しのスタイルはカスタマイズしやすいようにシンプルなものにしています。
SANGOのオリジナル見出しを使おう
上で紹介した見出し以外にSANGOでは多数の見出しが用意されています。
使い方
SANGOのオリジナル見出しはスタイル から適用します。その前に、見出しにしたいテキストをドラッグで選んでおきましょう。
選択できたら、スタイルをクリックします。
この中の［見出し］という項目にカーソルを当てると、見出しの選択肢がずらっと表示されます。あいにく見出し名しか表示されないので、お手数ですがこちらのページを参考に使用する見出しを探して頂ければと思います。
例えば見出し8：オレンジ見出しをクリックするとエディタ上にこのように見出しが挿入されます。
挿入した見出しにはpタグが使われています。もしh2タグやh3タグの見出しにしたいときには、テキストを選択したうえで［段落 ］をクリックし、使いたい見出しレベルを選びましょう。
このようにして好きなタグで各デザインの見出しを使うことができます。
CatNose
SEOのために無理して見出しタグに変える必要はないかと思います。例えばSEOに強いと言われている「NAVERまとめ」だと、本文に見出しタグ（h2やh3タグ）は一切使われていません（ぜんぶpタグ）。
オリジナル見出しの種類
ここからSANGOで使用できるオリジナル見出しを一覧で紹介していきます。テキストエディタなどで記事を書く方は、クラス名をコピーして、pタグやh2、h3タグなどに適用して頂ければと思います。よく使うものは、AddQuickTagなどを使ってすぐ呼び出せるようにするのも良いかもしれませんね。
見出し1：下線
シンプルな下線の見出しです。
<p class="hh hh1">~</p>
※h2やh3タグにしてもOK見出し2：点線下線
カスタマイザー（ダッシュボード⇒外観⇒カスタマイズ⇒色）で登録したメインカラーが文字と下線の色となります。メインカラーを赤にしていたら、色は赤になります。
<p class="hh hh2 main-c main-bdr">~</p>見出し3：二重線下線
二重線の下線です。メインカラーが線の色となります。
<p class="hh hh3 main-bdr">~</p>見出し4：上下線
線・文字ともにメインカラーが使われます。
クラス名の「main-◯」を「accent-◯」に入れ替えると、アクセントカラーが使われるようになります。
<p class="hh hh4 main-c main-bdr">~</p>見出し5：塗りつぶし
背景が塗りつぶされた見出しです。カスタマイザーで登録した下地色が背景色に使われます。
<p class="hh hh5 pastel-bc">~</p>見出し6：囲い枠
テキストが枠で囲まれたタイプのものです。メインカラーが文字と枠線に使われます。
<p class="hh hh6 main-c main-bdr">~</p>見出し7：背景塗りと下線
背景色にはカスタマイザーで登録した下地色が、下線にはメインカラーが使われます。
<p class="hh hh7 pastel-bc main-bdr">~</p>見出し8：オレンジ見出し
やわらかい雰囲気の橙色のデザインです。登録色に関わらず、この色になります。
<p class="hh hh8">~</p>見出し9：影付き塗りつぶし
影付きの塗りつぶし見出しです。カスタマイザーで登録した下地色が背景色に使われます。
<p class="hh hh9 pastel-bc">~</p>見出し10：タグ風
左側が丸まったタグ風の見出しです。カスタマイザーで登録した下地色が背景色に使われます。
<p class="hh hh10 pastel-bc">~</p>見出し11：吹き出し風
下側向きのふきだし型見出しです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh11">~</p>見出し12：ステッチ風
少しかわいいステッチ付のテープのようなデザインです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh12">~</p>見出し13：ステッチ白
ステッチが白になったバージョンです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh13">~</p>見出し14：角がはがれかけ
角がはがれかけたバージョンです。点線が少し太めに。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh14">~</p>見出し15：片側折れ
片側が折れたようなデザインの見出しです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh15">~</p>見出し16：片側折れ（別色）
別色のパターンです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh16">~</p>見出し17：色が変わる下線
途中で色が変わる下線付きのデザインです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh17">~</p>見出し18：色が変わる下線2
さきほどと別色のパターンです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh18">~</p>見出し19：下線やじるし
先端が尖った下線付きの見出しです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh19">~</p>見出し20：背景ストライプ
背景がストライプに塗られたデザインです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh20">~</p>見出し21：背景ストライプ2
さきほどのデザインに加えて左側にボーダーがついたものです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh21">~</p>見出し22：ストライプ＋上下線
ストライプに加えて上下線がついたものです。テキストは中央寄せになります。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh22">~</p>見出し23：ストライプの下線
ストライプの下線です。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh23">~</p>見出し24：両端線のばし
両端に線を伸ばしたタイプの見出しです。中央寄せにしたい場合には、テキストエディタモードなどでHTMLを開き、<div class=”center”>見出し文とタグ</div>というようにクラス名“center”のdivタグではさみます。
<p class="hh hh24">~</p>見出し25：線を交差
線と線が交差する見出しです。スマホで見た方がややオシャレに見えます。
<p class="hh hh25">~</p>見出し26：大カッコで囲う
少し大きめの括弧で囲うシンプルな見出しです。
<p class="hh hh26">~</p>見出し27：一文字目だけ特大
見出しの一文字目だけ大きくなるデザインです。
<p class="hh hh27">~</p>見出し28：消えていく下線
右側に向かって少しずつ消えていく下線をつけたものです。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh28">~</p>見出し29：背景グラデーション
背景にグラデーションを使って、段々と消えていくような表現にしてみました。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh29">~</p>見出し30：チェックマーク
見出しの先頭にチェックマークがつきます。チェックのアイコンはFontAwesomeを使って表示しています。ビジュアルエディタ（投稿画面）ではアイコンは表示されないのでご注意ください。カスタマイザーで登録された色とは関係なく、この配色になります。
<p class="hh hh30">~</p>見出し31：シェブロンマーク
こちらもFontAwesomeを使っています。
<p class="hh hh31">~</p>見出し32：フラット塗りつぶし
こちらもFontAwesomeを使っています。
<p class="hh hh32">~</p>見出し33：角丸ぬりつぶし
角を丸くして少しかわいさを出しています。
<p class="hh hh33">~</p>見出し34：肉球
ゆるい雰囲気を出したいときにどうぞ。
<p class="hh hh34">~</p>見出し35：リボン（1行のみ）
2行以上になるとデザインが崩れてしまうので、短めのテキストのときだけご使用くださいませ。中央に寄せたいときは、テキストエディタモードなどでHTMLを開き、リボン見出しのタグを<div class=”center”>〜</div>で挟めばOKです。
<p class="hh hh35">~</p>見出し36：片側リボン（1行のみ）
片側のみリボン風の形になった見出しです。こちらも1行で収まるテキストのときのみご使用ください。
<p class="hh hh36">~</p>
