SANGOではデフォルトの見出しは以下のようになっています。
見出し2(h2)
見出し3(h3)
見出し4(h4)
「見出し2」と「見出し4」については、もはや文字だけです。これだけシンプルにしている理由は、後から自由にカスタマイズしやすいようにするためです(カスタマイズは上書きしていく形で行うことが多いので、シンプルな方がやりやすいのです)。
デフォルトの見出しのデザインを変えてみよう
というわけで見出しを自分の好きなデザインに変えてみましょう。例えば見出し2のデザインを変えたいときには、以下のように書きます。
.entry-content h2 {
ここにCSSを書く
}
SANGOでは.entry-content
というのは「記事内の…」という意味の指定になります。.entry-content h2
で「記事内のh2タグに対して」というように指定してデザインを変えることができるわけですね。この「◎◎に対して」という部分はCSSの「セレクタ」と呼ばれます。
見出しデザインを探そう
こちらの記事で見出しのデザインを大量に紹介しています。SANGOで使える見出しがかなり含まれていますが…。

例えば、この中の少し折れ曲がったデザインのものを使ってみましょう。
まず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
に変えましょう。以下のような感じですね。
.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の場合のキャッシュの削除方法は以下のようになります。

無事反映された!
キャッシュを削除してからページを読み込むと、無事に反映されました。
色を変えてみよう
あとは見出しの色をサイトの雰囲気に合うように変えたいですね。
.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)
が折れた部分の三角形を指しています。
で、ここで面倒なのがカラーコードをいちいち調べること。実際の表示を見ながら色を調整できる便利な技があるので、覚えてしまいましょう。
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 {~}
の中に追加しましょう。
.entry-content h3 {
~他のコード~
border-left: none;
}
これは線を消すための指定です。
また、左側に余計な余白が出来てしまって困ったときには、下のコードを.entry-content h3 {~}
の中に追加しましょう。
.entry-content h3 {
~他のコード~
padding-left: 0;
}
これで左側の余白が無くなります。
テキストカラーやアイコンカラーの設定をカスタマイズしたい
ここで質問していいか分からないですが、質問させてください。 グーテンベルグエディタを使用してるのですが、見出しを作る際、テキストカラーやアイコンカラーの場所にない色を設定したいです。 毎回同じ色を使うならCSSで変更してもいいのですが・・・。 どのように設定すれば、丸い色のサークルがある位置に新しい色を追加できるのでしょうか?
FontAwesomeを使用した見出しのスマホ表示について
FontAwesomeを使用して見出しに組み込み場合で2つ程不明点があります。 ・スマホ版で表示を見るとアイコンが左画面に埋まってしまいます。 ・見出しが2列になった場合、見出しの上下中心にアイコンを表示させたいです。 「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」でサルワカさんが使用されているL2のような表示にしたいのですが、どのようなコードを追記すれば反映されますでしょうか?…
h2のカスタマイズが反映されなくなってしまった
お世話になっております。 2年前からSANGOを愛用させていただいております。 サルワカ様の「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」を参考に、h2見出しの一文字目だけを変える .entry-content h2::first-letter { font-size: 2em; color: #99ffff; } をCSSに追加していました。 今まで問題なく表示されていたのです…
見出しのCSS 変更が反映されない
お世話になります。 tears for SANGOの子テーマを適用しております。 https://saruwakakun.com/html-css/reference/h-design#section1 の「左線」を、h2に適用しようと下記のようなCSSに記述変更いたしましたが、 反映されません。(キャッシュ削除済) /*--------------------------------------…
見出し3の左に表示される線について、
SANGOのデフォルトの見出し3(h3タグ)では、左側に線が表示されます。 こちらについて、.entry-content h3 {~}の中にborder-left: none;を入れても表示されてしまうのですが、どうすればよいでしょうか??
スマホにデザインが反映されない
お世話になります。 「背景をストライプで塗る」の見出しをH2に反映させ、バックグラウンドの色を赤系、文字色を白に変更してみました。 PCにはデザインが反映されるのですが、スマホには反映されず、ただの黒文字のままになってしまいます。 修正方法を教えていただきたいです。 以下のコードをスタイルcssに貼っています。 .entry-content h2 { color: #ffffff; text-sh…
FTPで子テーマのカスタマイズをして適用させたところ、SANGOのテーマ自体が消えてしまいました。
上記の通り、デフォルトのh2をFileZillaでカスタマイズして適用したところ、テーマが消えて簡素なページになってしまいました。 カスタマイズを戻して最初の状態にしたのですが、全く直りません。 かなり困っているので、解凍してくれたら嬉しいです。お願いします
ビジュアルエディターにスタイルが反映されない
こんにちは。 さて、変更をプレビューでは確認できるのですが、ビジュアルエディターでは確認できません。編集時に確認ができないので、できれば確認できた方がいいのですが、何か私の操作に問題があるのでしょうか? よろしくお願いいたします。
サルワカの見出しのスタイルが効かない
こんにちは。見出しについてどうしても解決できず、助けてほしいです。 サルワカさんで紹介されている以下の見出しをh2に使っているのですが、classを指定して特定の部分だけ見出しのデザインを変えることができません。divなどほかの部分では問題なくできています。 見出しでクラスを指定して変えるための方法がなにかあるのか知りたいです。 該当ページ https://www.quest-mile.com/n…
見出しを少し左にずらしたい
初めまして。サルワカのデザインがとても好きで、購入させていただきました。 見出し表示の際に、本文を字下げする(or 見出しを浮かせる?)様なカスタマイズは可能でしょうか? こちらのページの「見出し」のイメージです。 【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30 https://saruwakakun.com/html-css/reference/box 検索したのですが該当する情報…
シェアボタン(FAB)のスタイルを変えたい
こんにちは。記事タイトル下(サムネイル画像下)の自動のシェアボタンをカスタマイズする方法がどこか説明されているのでしょうか?アイコン前にSHAREの文字を入れたいです。よろしくお願い致します。
見出しのCSSのうち○○:afterが反映されない
お世話になっております。 h3タグを以下のコードで設定したのですが、記事を表示した際に記事の上部に「見出しの一部」が誤表示されてしまいます。 誤りをご指摘いただけましたら幸いです。 .entry-content h3 { border-bottom: solid 3px #009fff; position: relative; border-left: none; padding-left: 0;…
見出し変更のCSSが反映されない
お世話になっております。 見出し2を変更したいのですが、反映されず標準のスタイルのままです。誤りをご指摘頂けましたら幸いです。 .entry-content h2 { position: relative; background: #eff4ff; padding: 2px 5px 2px 20px; font-size: 20px; color: #474747; border-radius: …
ロリポップでウィジェットやテーマの編集が保存できない場合の対処法
こんにちは、とてもお世話になっております。 どんなCSSを入力しても読み込んでもらえず、「何かの理由でダメでした」のようなメッセージがずっと表示されて、四苦八苦していたのですが、サーバーのWAF設定を無効にしたところ、上手くいったので情報共有させてもらいます。 使用するサーバーはロリポップです。 こんなことで躓いている方はいないかもしれませんが・・・
見出しのデザインをCSSでカスタマイズしようとしても反映されない
初めまして。 見出しのデザイン変更と文字色の変更をしたく、以下の2つのサイトを参考にしました。 デザインの変更はできたのですが、文字の色が記事によって反映されないものがあり、 自分でも調べてみたのでが、解決せずに困っております。 キャッシュの削除も同じページを参考に同じ手順で行いました。 (当方、CSSなどド素人です。) 文字色の希望は白ですが、一部の記事に黒に反映されるあります。 https:/…
見出しをCSSで中央寄せさせたい
お世話になっております。 見出し4をCSSで中央寄せにしたいのですが方法がわかりませんので教えていただきたいです。 .entry-content h4{ position: relative; display: inline-block; padding: 0 55px; text-align: center; } .entry-content h4:before, .entry-content …
見出し23のストライプの色を変更したい
お世話になっております。 見出し23のストライプの色を変更したいのですが、どうしてもうまくいきません。 cssはどのように書き込めば良いでしょうか。