見出しの挿入方法と種類一覧

2022年7月7日

SANGOではあらかじめ40種類近くの見出しを用意しています。HTMLとCSSの知識が無くても、ビジュアルエディタから簡単に使用することができます。ブログに個性を出すために、ぜひご活用ください。

目次非表示

Gutenbergエディタを使っている場合
通常の見出しの使い方
見出し2の表示例
- 見出し3の表示例
SANGOのオリジナル見出しを使おう
- 使い方
- オリジナル見出しの種類
見出しを自分好みにカスタマイズするには？
- 見出しをカスタマイズするときに知っておきたいこと
- .entry-content h2などと書こう

Gutenbergエディタを使っている場合

こちらの記事をご覧ください。

2019年1月20日 SANGO Gutenbergで見出しやボタンを使う方法

通常の見出しの使い方

まずは、通常の見出しの使い方から解説します。

まず、見出しにしたい部分のテキストを選択します。

次に段落というドロップダウンをクリックします（なお、このドロップダウンはビジュアルエディタのときのみ表示されます。テキストエディタでは表示されません）。

すると、見出し2〜見出し5の選択肢が表示されるかと思います。この中から使いたい見出しを選びましょう。

MEMO

見出しの使用ルールについては、こちらの記事を参考にしてみてください。

HTMLの見出しタグの使い方：h1〜h6はどう使い分ける？

見出し2の表示例

↑こちらは見出し2を選んだときの表示です。初期設定ではシンプルなものにしています。必要に応じてカスタマイズして頂ければと思います。なお、HTMLは以下のようになります。

HTML

<h2>見出し2の表示例</h2>

見出し3の表示例

↑こちらは見出し3を選んだときの表示です。HTMLは以下のようになります。

HTML

<h3>見出し3の表示例</h3>

見出し4の表示例

↑こちらは見出し4を選んだときの表示です。HTMLは以下のようになります。

HTML

<h4>見出し4の表示例</h4>

見出し5の表示例

↑こちらは見出し5を選んだときの表示です。HTMLは以下のようになります。

HTML

<h5>見出し5の表示例</h5>

見出し1は無いの？

見出し1（h1）は記事のタイトルで使われています。本文では基本的に使わない方が良いため、スタイル設定には表示されないようにしてあります。

サルワカくん

初期設定の見出しのスタイル（色を変えたり、線をつけたり…）を変える方法については後ほど解説します。

SANGOのオリジナル見出しを使おう

上で紹介した見出し以外にSANGOでは多数の見出しが用意されています。

使い方

SANGOのオリジナル見出しはスタイルから適用します。その前に、見出しにしたいテキストをドラッグで選んでおきましょう。

選択できたら、スタイルをクリックします。

見出しのスタイル

この中の［見出し］という項目にカーソルを当てると、見出しの選択肢がずらっと表示されます。あいにく見出し名しか表示されないので、お手数ですがこちらのページを参考に使用する見出しを探して頂ければと思います。

例えば見出し8：オレンジ見出しをクリックするとエディタ上にこのように見出しが挿入されます。

MEMO

挿入した見出しにはpタグが使われています。もしh2タグやh3タグの見出しにしたいときには、テキストを選択したうえで［段落］をクリックし、使いたい見出しレベルを選びましょう。

このようにして好きなタグで各デザインの見出しを使うことができます。

サルワカくん

SEOのために無理して見出しタグに変える必要はないかと思います。例えばSEOに強いと言われている「NAVERまとめ」だと、本文に見出しタグ（h2やh3タグ）は一切使われていません（ぜんぶpタグ）。

オリジナル見出しの種類

ここからSANGOで使用できるオリジナル見出しを一覧で紹介していきます。テキストエディタなどで記事を書く方は、クラス名をコピーして、pタグやh2、h3タグなどに適用して頂ければと思います。

見出し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：チェックマーク

見出しの先頭にチェックマークがつきます。ビジュアルエディタ（投稿画面）ではアイコンは表示されないのでご注意ください。カスタマイザーで登録された色とは関係なく、この配色になります。

<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行で収まるテキストのときのみご使用ください。

<p class="hh hh36">~</p>

Q&A形式で使える見出し（クエスチョンの方）

こちらに回答を書きます

Ver1.3.2より追加された見出しです。他の見出し同じくビジュアルエディタのドロップダウンから挿入できます。

<p class="hh hhq">質問</p>
<p class="hh hha">回答</p>

見出しを自分好みにカスタマイズするには？

CSSを編集することになります。この場合、子テーマを用意したうえで、編集していくのがおすすめです。

WordPressの子テーマとは？安全にカスタマイズを行う方法

見出しをカスタマイズするときに知っておきたいこと

CSSを学ぶつもりはないという方も、色の変え方くらいは覚えておいても良いのではないかと思います。CSSでは、各パーツの色は以下のような書き方をして指定します。.hh28やh2などの見出しタグの前に、半角スペースを空けて.entry-contentとつけるのがポイントです。

CSS

.entry-content .hh28 {
    color: 文字色;
    background-color:　背景色;
    border: *** *** 線の色; 
}

CSSでは色は、色コード（#F89174のような書き方をよくします）や、色名（yellowとか）で指定します。

例えば「文字色を白（色コード#FFF）にして、背景色をオレンジ（orange）にして、線の色を黒にしたい（色コード#000）」場合には、以下のような書き方をすることになります。

CSS

.entry-content .hh28 {
    color: #FFF;
    background-color:　orange;
    border: solid 2px #000; 
}

背景色の指定はbackground-color: 色;だけでなくbackground: 色;という書き方をされることもよくあるので注意しましょう。

と書いておきながらですが、これだけじゃイマイチピンと来ないと思います。時間に余裕があるのであれば、こちらの記事をざっと流し読みしてみてください。5〜10分ほどでCSSの基本がつかめるはずです。

初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！

`.entry-content h2`などと書こう

CSSにh2 {〜}などと書くと、トップページの記事一覧カードに使われているh2タグに対しても、カスタマイズ内容が適用されてしまいます。対処法としてはh2 {〜}ではなく.entry-content h2 {〜}と書くことです。これにより、記事内のh2タグに対してのみカスタマイズが適用されます。

103 COMMENTS

灰猫 2021/08/22

見出し27のカスタマイズCSSについて

こんにちは。いつもお世話になっております。見出し２７番を使用するために以下のとおりCSSを入力しているのですが（※以降は入力理由です）、なぜかChlomeの画面では反映されているのに、safariの画面ではファーストレターの大きさと色だけが反映されていません。キャッシュを削除しても同様です。お手数ですが、解決方法をご教示いただけますと幸いです。どうぞ宜しくお願いいたします。ーーーーーーー…

Gutenbergエディタを使っている場合

通常の見出しの使い方

見出し2の表示例

見出し3の表示例

見出し4の表示例

見出し5の表示例

SANGOのオリジナル見出しを使おう

使い方

オリジナル見出しの種類

見出しを自分好みにカスタマイズするには？

見出しをカスタマイズするときに知っておきたいこと

.entry-content h2などと書こう

103 COMMENTS

見出し27のカスタマイズCSSについて

h3をh2として使いたい

見出し11（吹き出し風）の色を変えたい

投稿の仕方

見出しの肉球アイコンをダイヤモンドアイコンに変更したい

Q&A見出しの太字を通常の文字にしたい

見出し30のチェックマークの色を変えたい

h2とh3の文字の大きさが同じ

h2を記事いっぱいに広げたい

Articleの横幅いっぱいまで広がる見出しを作りたい

FontAwesomeアイコンがビジュアルエディタ上で文字化けする

記事タイトル文字サイズを変更したい

スマホでみた場合のフォントのサイズ

見出しQ＆Aの色を変更したい

CSSが反映されない

見出し18：色が変わる下線 の色を変えたい

吹き出し見出し（見出し11）の色を変えたい

Q & A見出しの文字を太字から通常の書体にしたい

CSSに全角スペースが混じっていると効かない

デフォルトの見出しをオリジナル見出しで装飾したい

グラデーション見出しの色を変えたい

1カラムページの見出し（h2やh3）だけ、デザインを変更したい

オリジナル見出しの文字サイズを全体的に小さくしたい

見出しの左右の余白を消したい

「見出し14：角がはがれかけ」の色を変えたい

「見出し11：吹き出し風」の色を変えたい

見出しのCSSが効かない（CSSの優先順位）

コメントを残す コメントをキャンセル

`.entry-content h2`などと書こう

見出し18：色が変わる下線の色を変えたい

コメントを残すコメントをキャンセル