1.8.6 Released !

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

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

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

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

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

SANGO gutenberg SANGO Gutenbergで見出しやボタンを使う方法

通常の見出しの使い方

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

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

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

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

MEMO

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

HTMLの見出しタグの使い方:h1〜h6はどう使い分ける?
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(スタイルシート)入門:基本的な書き方を総まとめ!
初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!

.entry-content h2などと書こう

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

84 COMMENTS

フレン 2019/06/29

現在hh hh5を見出しh2として使用しているのですが、articleのpaddingによって余白分、両サイドに隙間が出来ています。

このpaddingをh2のみ無視するにはどうしたらいいのでしょうか?

回答を見る
Ichi 2019/05/25

お世話になっております。お忙しい所失礼致します。
既存の見出し等はArticle部分(記事自体の背景)のテキストが表示されるエリアの横幅でのみ表示されると思うのですが、Articleエリアの横幅いっぱいに広がるような見出しを作るのにはどうしたらよろしいでしょうか。見出しの外側横の余白が無くなるイメージです。
表現が分かりにくくて申し訳ございませんが、ご回答いただけますと大変嬉しく存じます。何卒ご検討のほどよろしくお願い申し上げます。

回答を見る
ユウスケ 2019/05/19

お世話になります。
見出し30,31,34など、先頭にFontAwesomeのアイコンがあるような見出しを、ビジュアルエディタのスタイルから挿入すると、ビジュアルエディタ上ではアイコン部分が□になってしまい、正しく表示することが出来ません(実際のWebページでは正しく表示されます)。
1.これは仕様なのでしょうか?
2.エディタ上でも、Webページで閲覧した時と同じように、Fontawesomeアイコンを表示することは出来ないでしょうか?
宜しくお願い致します。

回答を見る
あつし 2019/05/05

お世話になっております。
よくある質問など参照しても
解決できなかったので質問させていただきます。
記事タイトルの文字サイズを小さくしたいのですが
可能でしょうか?
できるとしたらご教授願います。

回答を見る
海外子連れTRAVEL 2019/03/07

こんにちは!
h2タグの前に広告を挿入したい関係で、初めの見出しのみpタグを使用せず、で使っているのですが、その見出しのフォントのみ大きくなってしまいます。。。こちらどうすればよろしいでしょうか。
また、今後、デザインを変更することを考えて、h2の見出しデザイン自体を変えてしまった方があとから一括で変更しやすいようにも考えていますが、その場合どうすればよろしいでしょうか。
よろしくご教授いただければと思います。

回答を見る
LIBRA 2019/01/30

こんにちは。
サルワカさんのサイトの「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」で紹介されていた、先頭に円をつけた見出しを使いたいのですが、以下のコードをCSSにはりつけても、デザインが変わりません。

.entry-content .h3 {
position: relative;
color: #333333;
text-shadow: 0 0 2px white;
}
.entry-content .h3:before {
content: “”;
position: absolute;
background: #9de5ff;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
left: -15px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

サルワカさんのサイトを読んで、ページの検証などもしてみたのですが、私では理由が分からず。。どのようにすれば反映できるのか、教えていただけますと嬉しいです。

回答を見る
元気 2018/12/22

はじめまして。SANGOのおかげで独立に向けてのブログ作りがはかどっています。
初歩的な質問なのですが教えてください。
見出しQ&Aの色を変更したいのですが、方法を教えていただけないでしょうか。
Qの丸い部分をメインカラー
Aの丸い部分をアクセントカラー
文字は白のまま
としたいのです。
お手数ではございますが、お手すきの際に教えていただけると助かります。

回答を見る
海外子連れTravel管理人 2018/12/11

はじめまして!
SANGOとっても可愛く、ユーザーフレンドリーで素晴らしいと思っています。

さて、見出し32の色変えをしたいと奮闘しているのですが、なんどやってもうまく変更できません。。。こちらを子テーマのstyle.cssに追記したのですが、なぜで反映されないのでしょうか。よろしくご教授お願いいたします。。。

#inner-content .hh32 {
position: relative;
padding: 0.5em 0.5em 0.5em 1.8em;
background: #ec7986;
color: white;
line-height: 1.4;
}
#inner-content .hh32:before {
position: absolute;
left: 0.5em;
font-family: FontAwesome;
content: “\f14a”;
}

です!

回答を見る
MEG 2018/12/07

初めまして。人生で初めてブログをスタートしてみました!sangoすごく可愛くて楽しいです〜カスタマイズガイドも分かりやすくて楽しくスタートできました。質問でもないのにコメントして申し訳ありません。あまりに嬉しくて書いてしまいました。

回答を見る
はるき 2018/12/02

見出し18:色が変わる下線2
の色を変更したいのですが、どのようなコードでしょうか?

回答を見る
おおくぼ 2018/11/15

こんにちは!
見出し11の色を変えたいのですが、

#main .entry-content .hh11 {
background-color:#a7d28d;
}

と入力したところ、下の吹き出しの三角形の部分だけ色を変えられませんでした。

全部同一カラーにしたいので、ぜひご教授おねがいいたします!

回答を見る
あみ 2018/11/14

見出しからQ・Aを入れると、それに続く文字が全て太字表示になるのですが、これはデフォルトであって普通の書体にはならないでしょうか?

回答を見る
もじこ 2018/11/10

こんばんは。いつもお世話になっております。
h15 片側折れ の色を変更したく、下記のようにしてみましたが、変わりませんでした。
ただし、折返し部分の色は反映されていました。
間違いをご指摘いただけますでしょうか。

#main .entry-content .hh15 {
color: #ffffff;
background-color: #a56baf;
}

#main .entry-content .hh15:before {
border-right: solid 20px rgb(100, 54, 108);/*折り返し部分*/
}

どうぞよろしくお願いいたします。

回答を見る
tomboy 2018/11/08

お世話になっております。SANGOテーマのカジュアル具合に惚れ、購入させていただきました。
初歩的な質問となり申し訳ないのですが、「.entry-content h」タグを、全て子テーマのcssで装飾しようと思っております。例えば、こちらのページに記述されている、hh14を使用しようとするのであれば、子テーマのstyle.cssにはどのように記述すればよいのでしょうか。

回答を見る
とんちゃん 2018/09/13

見出し28:消えていく下線の色の変更を行いたいのですが、CSSに
#main .entry-content .hh28 {
border:#色コード;
}
の追加は間違っているでしょうか?

回答を見る
あーりん 2018/09/07

こんにちは。h5が表示されません。
h2、h3、h4は普通に表示されますが、h5だけは何故か空白になってしまいます。
ソース表示したらh5は存在ちゃんとしてるのですが、何も表示されず改行されてしまっています。助けてください。

回答を見る
ししまる 2018/07/28

サルワカくんさま。お世話になっております。
本当に素晴らしいテーマをありがとうございます。

特定の記事の見出し(h2やh3)だけ、デザインを変更したいのですが、どのようにすればいいのでしょうか?アドバイスいただけると幸いです。

回答を見る
ほんだ 2018/05/30

初めまして。こちらの記事を参考に見出しをカスタマイズしてみました。記事内のh2に反映するよう設定したのですが、なぜかトップページの記事タイトルにも同様に反映されてしまいます。どのように修正したら良いでしょうか?

回答を見る
あんん 2018/05/11

こんにちは。
見出しの文字の大きさが、h2のタグの文字の大きさより大きいのが気になります。
対策はありますか?

回答を見る
としま 2018/04/26

すいません質問がざっくりでした。

見出しの両サイドの余白をなくしたいのですが、どのようにすれば良いのでしょうか。

宜しくお願いします。

回答を見る
sango愛用者 2018/04/11

度々すいません。見出し7と見出し21を編集画面のスタイルから2つ重ねたら、
sangoデフォルトの色ではなく、両方ともメインカラーになりました。
2つ重ねて使ったら、ダメですか?自分は重ねた方がデザインが気に入っていますので。

回答を見る
まゆ 2018/04/04

いつもお世話になっております。
質問させてください。

見出し13の色を変更したくて、以下を試してみました。
が、変化がありませんでした。
.entry-content .hh13 {
background: #F99292;
box-shadow: 0 0 0 5px #F99292;
}

代わりに、こちらを試してみたら変更が出来ました。
#inner-content .hh13 {
background: #F99292;
box-shadow: 0 0 0 5px #F99292;
}
ですが、携帯でみると変更できていないようです・・・

なにか解決策があれば教えて頂ければ幸いです。
宜しくお願い致します。

回答を見る
shogo 2018/03/31

初めまして。hh hh8のものをカスタマイズして使用したいのですが、以下のコードを指定しても変更できません。色々試してみ他のですが、原因が特定できませんでした。ご教授いただけば幸いです、よろしくお願いいたします。

#main .entry-content .hh hh8 {
color: #FFF;
background-color: #5ba9f7;
border: solid 2px #000;
}

回答を見る
ハル 2018/01/23

お世話になっております。
見出し14:角がはがれかけのカラーを変更したいと思います。
SANGO Childスタイルシートに下記を記載したのですが、内側のカラーは変更できたのですが、外側が変わりません。どのような記述をすれば良いのかご教授お願い致します。

#main .entry-content .hh14 {
background-color:#b3d69a;
}

回答を見る
たにもとひろみ 2018/01/17

はじめまして。

「見出し11:吹き出し風」の色を変更したいので、SANGO Childスタイルシートに以下のコードを追加しましたが変更が反映されません。

自分なりにいろいろ手を尽くしましたがどうしても上手くいかないので質問に至りました。

ご教授いただけると助かります。

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

回答を見る
ヒロイキ 2017/12/10

SANGO見やすくて気に入っています。
お忙しいところ申し訳ありませんが、質問をお願いします。
例えば見出し10のタグ風の色ですが、カスタマイザーの下地色以外の色にしたい場合は、
子テーマのstyle.cssに
.entry-content .hh10 {
background-color: #7fbae9;
}
という風に追記すれば良いのでしょうか?

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン