SANGOでデフォルトの見出しを変える方法

2017年10月8日

SANGOではデフォルトの見出しは以下のようになっています。

見出し2（h2）

見出し3（h3）

見出し4（h4）

MEMO

「見出し1」は、記事タイトルに使われているため、記事内では基本的に使用しません。

「見出し2」と「見出し4」については、もはや文字だけです。これだけシンプルにしている理由は、後から自由にカスタマイズしやすいようにするためです（カスタマイズは上書きしていく形で行うことが多いので、シンプルな方がやりやすいのです）。

デフォルトの見出しのデザインを変えてみよう

というわけで見出しを自分の好きなデザインに変えてみましょう。例えば見出し2のデザインを変えたいときには、以下のように書きます。

コード

.entry-content h2 {
ここにCSSを書く
}

SANGOでは.entry-contentというのは「記事内の…」という意味の指定になります。.entry-content h2で「記事内のh2タグに対して」というように指定してデザインを変えることができるわけですね。この「◎◎に対して」という部分はCSSの「セレクタ」と呼ばれます。

見出しデザインを探そう

こちらの記事で見出しのデザインを大量に紹介しています。SANGOで使える見出しがかなり含まれていますが…。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

例えば、この中の少し折れ曲がったデザインのものを使ってみましょう。

まずCSSをコピペして、子テーマのstyle.cssに貼り付けます。

style.css（未完成）

h1 {
   position: relative;
   padding: 0.5em;
   background: #a6d3c8;
   color: white;
}

h1::before {
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 15px transparent;
   border-right: solid 20px rgb(149, 158, 155);
}

セレクタを修正

ここでh1とh1::beforeを修正します。例えば、見出し2（h2）のデザインを変えたいときには、それぞれ、.entry-content h2 と.entry-content h2::beforeに変えましょう。以下のような感じですね。

style.css

.entry-content h2 {
   position: relative;
   padding: 0.5em;
   background: #a6d3c8;
   color: white;
}

.entry-content h2::before{
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 15px transparent;
   border-right: solid 20px rgb(149, 158, 155);
}

.entry-contentは記事内で使われている見出しのデザインだけを変えるために必要です（これを書き忘れると、トップページの記事一覧にまで反映されてしまいます）。
h3見出しを変えたいときには.entry-content h3と書けば良いですね。

保存してキャッシュを削除

ここまでできたら、style.cssを保存します。ただし、このまま記事ページを開いても、見出しデザインは反映されていないかもしれません。ブラウザが過去の見出しデザイン情報を未だに表示し続けている可能性大です。このようにブラウザが画像やCSSを保存することは「キャッシュ」と呼ばれます。

例えば、Chromeの場合のキャッシュの削除方法は以下のようになります。

ChromeでCSSが反映されない？キャッシュ消去で対処

無事反映された！

キャッシュを削除してからページを読み込むと、無事に反映されました。

色を変えてみよう

あとは見出しの色をサイトの雰囲気に合うように変えたいですね。

style.css

.entry-content h2 {
   position: relative;
   padding: 0.5em;
   background: #a6d3c8;/*背景色*/
   color: white;
}

.entry-content h2::before{
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 15px transparent;
   border-right: solid 20px rgb(149, 158, 155)/*三角系の部分*/;
}

サルワカくん

色が変わる部分の見分け方ですがcolor:は文字色の指定です。background:やbackground-color:は背景色の指定です。また、border:では線の色を指定します（太さなどもここで指定します）。また、borderは三角形を作るためにも使われたりします。

上の例だと、background: #a6d3c8;が背景色を指しており、 border-right: solid 20px rgb(149, 158, 155)が折れた部分の三角形を指しています。

MEMO

CSSでの色の書き方にはいくつかタイプがあります。「#F89174」のように6ケタのカラーコードで書くのが一般的です（このコードはHEXと呼ばれます）。また「rgb(200,200,200)」というようにRGBという方式で書くこともあります。

で、ここで面倒なのがカラーコードをいちいち調べること。実際の表示を見ながら色を調整できる便利な技があるので、覚えてしまいましょう。

Chrome検証モードを使うと便利

今回はChromeを使った場合の手順を紹介しますが、SafariやIEにも同じような機能が備わっています。

デザインを変えたい部分を右クリック⇒［検証］

検証モードになる

↑コードがずらっと並ぶウィンドウが表示されます。片側にはHTML（現在選択中のタグは青に）、もう片側にはその選択部分のCSSが表示されます。

色を選ぶ

次に色を選びます。CSS側で.entry-content h2を見つけてbackgroundの隣の四角をクリックします。該当部分の現在の色になっているので、どの部分を指しているのか分かりやすいですね。

すると、色を選ぶカラーピッカーが表示されます。あとはぐるぐると調整して好きな色に変えましょう。

選んだ色はその場で反映される

嬉しいのが選んだ色がブラウザ上ですぐに反映されるところ。これでサイトの雰囲気を見ながら、色を選んでいくことができます（ただし、style.cssに反映されるわけでないので、ページを再読込したら元に戻ります）。

色が決まったら、カラーピッカー上に表示されているカラーコード（#ff9393など）をコピーして、style.css上で現在の色コードと置き換えます。

折れた部分の色を変える

折れた部分（三角形）の色も変えたいですね。というわけで検証画面のHTML側で::beforeをクリックします。

これで、.entry-content h2:beforeの方のCSSをテスト的に変えることができます。変えたい部分をHTML側で探して、見た目をCSS側で変える…というわけですね。

さきほどと同じように実際の見た目をチェックしながら、色を選び、決まったら色コードをコピーします。

あとは、これをstyle.cssの該当する色コードと置き換えればOKです。置き換えができたら保存して、再度ページを読み込み直してみましょう（反映されなければキャッシュを消去）。

完成！

このようにして、自分の好きな配色に変えることができます。

SANGOの見出し3を変えるときの注意点

SANGOのデフォルトの見出し3（h3タグ）では、左側に線が表示されます。そのため、CSSを上書きしたときにも、その線が残ってしまったりします。

そんなときは以下のコードを.entry-content h3 {~}の中に追加しましょう。

style.css

.entry-content h3 {
   ~他のコード~
   border-left: none;
}

これは線を消すための指定です。
また、左側に余計な余白が出来てしまって困ったときには、下のコードを.entry-content h3 {~}の中に追加しましょう。

style.css

.entry-content h3 {
   ~他のコード~
   padding-left: 0;
}

これで左側の余白が無くなります。

38 COMMENTS

ユタ 2020/02/06

見出し3の左に表示される線について、

SANGOのデフォルトの見出し3（h3タグ）では、左側に線が表示されます。こちらについて、.entry-content h3 {~}の中にborder-left: none;を入れても表示されてしまうのですが、どうすればよいでしょうか？？

回答を見る

えいぷりお 2019/11/18

スマホにデザインが反映されない

お世話になります。「背景をストライプで塗る」の見出しをH2に反映させ、バックグラウンドの色を赤系、文字色を白に変更してみました。 PCにはデザインが反映されるのですが、スマホには反映されず、ただの黒文字のままになってしまいます。修正方法を教えていただきたいです。以下のコードをスタイルcssに貼っています。 .entry-content h2 { color: #ffffff; text-sh…

回答を見る

美咲 2019/07/24

FTPで子テーマのカスタマイズをして適用させたところ、SANGOのテーマ自体が消えてしまいました。

上記の通り、デフォルトのh2をFileZillaでカスタマイズして適用したところ、テーマが消えて簡素なページになってしまいました。カスタマイズを戻して最初の状態にしたのですが、全く直りません。かなり困っているので、解凍してくれたら嬉しいです。お願いします

回答を見る

Tom 2019/01/01

ビジュアルエディターにスタイルが反映されない

こんにちは。さて、変更をプレビューでは確認できるのですが、ビジュアルエディターでは確認できません。編集時に確認ができないので、できれば確認できた方がいいのですが、何か私の操作に問題があるのでしょうか? よろしくお願いいたします。

回答を見る

コトノハ 2018/12/30

サルワカの見出しのスタイルが効かない

こんにちは。見出しについてどうしても解決できず、助けてほしいです。サルワカさんで紹介されている以下の見出しをh2に使っているのですが、classを指定して特定の部分だけ見出しのデザインを変えることができません。divなどほかの部分では問題なくできています。見出しでクラスを指定して変えるための方法がなにかあるのか知りたいです。該当ページ https://www.quest-mile.com/n…

回答を見る

yuka kuda 2018/11/27

見出しを少し左にずらしたい

初めまして。サルワカのデザインがとても好きで、購入させていただきました。見出し表示の際に、本文を字下げする（or 見出しを浮かせる？）様なカスタマイズは可能でしょうか？こちらのページの「見出し」のイメージです。【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30 https://saruwakakun.com/html-css/reference/box 検索したのですが該当する情報…

回答を見る

NANA 2018/10/30

シェアボタン（FAB）のスタイルを変えたい

こんにちは。記事タイトル下（サムネイル画像下）の自動のシェアボタンをカスタマイズする方法がどこか説明されているのでしょうか？アイコン前にSHAREの文字を入れたいです。よろしくお願い致します。

回答を見る

きゃんねん 2018/10/27

見出しのCSSのうち○○:afterが反映されない

お世話になっております。 h3タグを以下のコードで設定したのですが、記事を表示した際に記事の上部に「見出しの一部」が誤表示されてしまいます。誤りをご指摘いただけましたら幸いです。 .entry-content h3 { border-bottom: solid 3px #009fff; position: relative; border-left: none; padding-left: 0;…

回答を見る

だいすけ 2018/10/13

お世話になっております。見出し2を変更したいのですが、反映されず標準のスタイルのままです。誤りをご指摘頂けましたら幸いです。 .entry-content h2 { position: relative; background: #eff4ff; padding: 2px 5px 2px 20px; font-size: 20px; color: #474747; border-radius: …

回答を見る

おまゆ 2018/10/04

ロリポップでウィジェットやテーマの編集が保存できない場合の対処法

こんにちは、とてもお世話になっております。どんなCSSを入力しても読み込んでもらえず、「何かの理由でダメでした」のようなメッセージがずっと表示されて、四苦八苦していたのですが、サーバーのWAF設定を無効にしたところ、上手くいったので情報共有させてもらいます。使用するサーバーはロリポップです。こんなことで躓いている方はいないかもしれませんが・・・

回答を見る

よこはま 2018/08/02

初めまして。見出しのデザイン変更と文字色の変更をしたく、以下の2つのサイトを参考にしました。デザインの変更はできたのですが、文字の色が記事によって反映されないものがあり、自分でも調べてみたのでが、解決せずに困っております。キャッシュの削除も同じページを参考に同じ手順で行いました。 (当方、CSSなどド素人です。) 文字色の希望は白ですが、一部の記事に黒に反映されるあります。 https:/…

回答を見る

ふかいくろ 2018/07/28

見出しをCSSで中央寄せさせたい

お世話になっております。見出し4をCSSで中央寄せにしたいのですが方法がわかりませんので教えていただきたいです。 .entry-content h4{ position: relative; display: inline-block; padding: 0 55px; text-align: center; } .entry-content h4:before, .entry-content …

回答を見る

はち 2018/05/04

SANGO h3見出しをFontAwesomeを使用してカスタマイズしたいです。うまく反映されないので誤りをご指摘頂けましたら幸いです。 /*h3見出し変更*/ .entry-content h3 { position: relative; background: #a6d3c8;/*背景色*/ color: white;/*テキスト色*/ padding-left: 1.8em;/*アイコン…

回答を見る

健ママ 2018/03/18

見出し23のストライプの色を変更したい

お世話になっております。見出し23のストライプの色を変更したいのですが、どうしてもうまくいきません。 cssはどのように書き込めば良いでしょうか。

回答を見る

見出し2（h2）

見出し3（h3）

見出し4（h4）

デフォルトの見出しのデザインを変えてみよう

見出しデザインを探そう

セレクタを修正

保存してキャッシュを削除

無事反映された！

色を変えてみよう

Chrome検証モードを使うと便利

デザインを変えたい部分を右クリック⇒［検証］

検証モードになる

色を選ぶ

選んだ色はその場で反映される

折れた部分の色を変える

完成！

SANGOの見出し3を変えるときの注意点

38 COMMENTS

見出し3の左に表示される線について、

スマホにデザインが反映されない

FTPで子テーマのカスタマイズをして適用させたところ、SANGOのテーマ自体が消えてしまいました。

ビジュアルエディターにスタイルが反映されない

サルワカの見出しのスタイルが効かない

見出しを少し左にずらしたい

シェアボタン（FAB）のスタイルを変えたい

見出しのCSSのうち○○:afterが反映されない

ロリポップでウィジェットやテーマの編集が保存できない場合の対処法

見出しをCSSで中央寄せさせたい

見出し23のストライプの色を変更したい

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

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