Ver1.3.1をリリースしました(11/22)

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

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

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

通常の見出しの使い方

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

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

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

すると、見出し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タグなどに適用して頂ければと思います。よく使うものは、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を使って表示しています。ビジュアルエディタ(投稿画面)ではアイコンは表示されないのでご注意ください。カスタマイザーで登録された色とは関係なく、この配色になります。

Font Awesomeの使い方:Webアイコンフォントを使おう
Font Awesomeの使い方:Webアイコンフォントを使おう
<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>

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

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

WordPressで子テーマを活用して安全にカスタマイズを行う方法

色を変えるときに知っておきたいこと

CSSを学ぶつもりはないという方も、色の変え方だけは覚えておいても良いのではないかと思います。CSSでは、各パーツの色は以下のような書き方をして指定します。

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(スタイルシート)入門:基本的な書き方を総まとめ!

4 Comments

ことひろ

この方法で小テーマのスタイルシートに入力しましたが色が変わりません。何故でしょうか?

返信する
桃太郎の国の人

初めまして。
ブログで収益を得ている者です。
桃太郎の国在住。

ステキすぎるテーマに出会って興奮ぎみです。笑
購入を決めました。
あとはタイミングだけです♪

ところで、失礼ながらご指摘を。
スマホ(HUAWEI P9 Lite)で拝見しております。
『見出し36:片側リボン(1行のみ)』が1行におさまっておらず、本文に影響が出ているようです。
お時間のあるとき確認されてみてくださいね。

非常に居心地の良いテーマなので、楽しく長居させていただいております!
今夜は眠れな~い♪

ではでは、今後ともお世話になります❗

返信する
サルワカくん

ご指摘ありがとうございます!見逃してしまっていたので大変助かりました。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です