Ver1.6 Released !

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

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のコピペだけ!おしゃれな見出しのデザイン例まとめ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);
}

セレクタを修正

ここでh1h1::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が反映されない?キャッシュ消去で対処
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;
}

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

28 Comments

健ママ

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

返信する
サルワカくん

とても遅くなってしまい、申し訳ありません。

#inner-content .hh23:after {
    background: repeating-linear-gradient(-45deg,#色コード,#色コード 2px,#fff 2px,#fff 4px);
}

上のCSSを子テーマのstyle.cssなどに貼れば良いかと思います。色コードと書かれた部分2つには同じコードを書いて下さいませ。

返信する
まえだ

アイコンのユニコードを貼り付けても、h3の見出しが変更できないのはなにか理由があるのでしょうか?

.entry-content h3 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border-left: none;
}

.entry-content h3:before{ font-family: “Font Awesome 5 Free”;
content: “\f0a1”;/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}

上記で間違っていますか?
アイコンが表示されず、四角表示になっています・・・

返信する
はち

SANGO h3見出し をFontAwesomeを使用してカスタマイズしたいです。
うまく反映されないので誤りをご指摘頂けましたら幸いです。

/*h3見出し変更*/
.entry-content h3 {
position: relative;
background: #a6d3c8;/*背景色*/
color: white;/*テキスト色*/
padding-left: 1.8em;/*アイコン分のスペース*/
border-left: none;
}
.entry-content h3::before{
font-family:”Font Awesome”;
content: “\f04b”;/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: white; /*アイコン色*/
}
/*END h3見出し変更*/

返信する
はち

コメントありがとうございます

正しい→ content: ‘\f04b’;/*アイコンのユニコード*/
誤り→ content: “\f04b”;/*アイコンのユニコード*/

アポストロフィーの記号が誤っており、直したらアイコンが反映されました。お騒がせして恐縮です。

返信する
ふかいくろ

お世話になっております。
見出し4をCSSで中央寄せにしたいのですが方法がわかりませんので教えていただきたいです。

.entry-content h4{
position: relative;
display: inline-block;
padding: 0 55px;
text-align: center;
}

.entry-content h4:before, .entry-content h4:after{
content: ”;
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}

.entry-content h4:before {left:0;}
.entry-content h4:after {right: 0;;}

いまはこのコードを使っていますが、どうやっても中央寄せにできません。よろしくおねがいいたします。

返信する
サルワカくん

text-align: center;は中にあるテキストに対して中央寄せが適用されます。
今回の場合、display: inline-block;をh4に対して指定しているため、中央寄せするためには、そのタグ自体ではなく、前後のタグにて中央寄せの指定をする必要があります。

<div class="center">
  <h4>〜</h4>
</div>

例えば、テキストエディタで上のように書く必要がありますね。

返信する
よこはま

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

https://saruwakakun.com/html-css/reference/h-design

https://saruwakakun.com/sango/change-headline

文字色が反映されない記事をこちらのページにある、『検証』の手順に従ってみたところ、文字色のコード?(用語が間違っていましたら申し訳ありません)を示すところが、
一本線で削除の様な表示になっています。
https://saruwakakun.com/sango/change-headline

文字の色が正しく反映されている記事では、この様になっていないことから、
一本線で削除の様になっていることが問題かと思ったのですが、その修正の仕方がわからず困っています。

他に問題があるかもしれませんが、知識に乏しいため自分ではこれ以上はわからなく、お力をお借りしたく質問しました。

見出しを変更したく自分のブログのCSSに以下のコードは貼り付けました。
h2 {
background: #28385e; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

背景の色を紺色、文字色を白にしたいと考え、カラーコードを希望のものにし、タイトル変更しようとしました。

試しに他の見出しでもテストしてみたのですが、やはり文字色が反映されませんでした。
希望は白ですが、黒になってしまいます。

反映されない記事は、共通して同じ記事です。

どのように対処すれば良いか、どこに問題があるか教えていただければ幸いです。
何卒、宜しく、お願い致します。

返信する
サルワカくん
.entry-content h2 {
  ここにコード
}

というように書けば適用の優先度が高くなり、文字色等も反映されると思います。

返信する
よこはま

よこはまです。
早々のご返信ありがとうございます。

ご指示の通りにしてみたのですが、やはり結果は同じで、一部の記事は見出しの色が反映されません(黒になってしまいます)。

以下の様にCSSに貼り付けました。

.entry-content h2 {
background: #28385e; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

どこか他に原因がありますでしょうか。
ご回答いただけますと幸いです。
宜しく、お願い致します。

返信する
サルワカくん

その記事に個別のCSSが使用されている可能性がありますね。
いずれにせよcolor: white;color: white!important;に変えると良いかと思います。

返信する
よこはま

よこはまです。
ご返信ありがとうございます。

>その記事に個別のCSSが使用されている可能性がありますね。
>いずれにせよcolor: white;をcolor: white!important;に変えると良いかと思います。

white!important;に変えてみたのですが、変化はありませんでした。

しかし、原因がわかりました!

全ての記事で確認していませんが、おそらく不具合のある記事を一つ一つ直しいていけば解決すると思います。

>記事に個別のCSSが使用
CSSのことはド素人でわからないと諦めかけていたのですが、
このお言葉がきっかけで、思い当たる節を感じ、不具合のある1つの記事を試しになおしてみたところ、見出しの文字がしっかりと白に変更されました!

1つ1つ直していかなければいけないので大変ですが、問題が解決してスッキリしました!
(過去記事で見出しの色を黒っぽい色に変更したものがいくつかありました)
ありがとうございました!
今後も引き続き、よろしく、お願い致します。

サルワカくん

うまくいったようで良かったです!
ご報告ありがとうございました。

おまゆ

こんにちは、とてもお世話になっております。

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

使用するサーバーはロリポップです。
こんなことで躓いている方はいないかもしれませんが・・・

返信する
サルワカくん

ウィジェットの保存時にロリポップのWAF設定によりそのような現象が起きることは確認しておりましたが、
CSSの保存時にも同様の現象が起きることは確認できておりませんでした。
情報提供ありがとうございました。

返信する
だいすけ

お世話になっております。
見出し2を変更したいのですが、反映されず標準のスタイルのままです。誤りをご指摘頂けましたら幸いです。

.entry-content h2 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

.entry-content h2::before{
font-family: “FontAwesome”;
content: “\f041”;
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}

返信する
サルワカくん

全く反映されない場合
– CSSの貼り付ける場所が誤っている
– 子テーマが読み込まれていない
– キャッシュの削除し忘れ(ブラウザおよびキャッシュプラグイン)
などが原因かと思います。

返信する
きゃんねん

お世話になっております。
h3タグを以下のコードで設定したのですが、記事を表示した際に記事の上部に「見出しの一部」が誤表示されてしまいます。
誤りをご指摘いただけましたら幸いです。

.entry-content h3 {
border-bottom: solid 3px #009fff;
position: relative;
border-left: none;
padding-left: 0;
}

h3:after {
position: absolute;
content: ” “;
display: block;
border-bottom: solid 3px #344864;
bottom: -3px;
width: 20%;
}

返信する
NANA

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

返信する
サルワカくん

解説記事はありませんが、以下のCSSを追加することで、表示が可能です。

.article-header .sns-btn:before {
    margin-top: 10px;
    content: "SHARE";
    font-family: Quicksand, sans-serif;
    font-weight: 500;
    font-size: 20px;/*フォントサイズ*/
    letter-spacing: 1px;
    display: block;
    text-align: center;
}

もしシェアボタンと余白の間が気になるようであれば(シェアボタンを2種類のうち、どちらを選んでいるかによりますが…)以下のCSSを追加すると良いかと思います。

.article-header .sns-btn ul {
    margin-top: 0;
}

一度ご確認をよろしくおねがいします。

返信する
NANA

ご返答ありがとうございました!試しましたが、シェアボタンを押してからの変更でしたね。押す前の、「Extended FAB」スタイルのシェアボタンを作りたかったです。説明が下手で申し訳ありませんでした。
ですが、調べたら、Ver1.5のアップデートでは「Extended FAB」スタイルのシェアボタンを選べるようになったと書かれていましたね。まだアップデートをしていなかったので気付きませんでした。すみません。

返信する
yuka kuda

初めまして。サルワカのデザインがとても好きで、購入させていただきました。
見出し表示の際に、本文を字下げする(or 見出しを浮かせる?)様なカスタマイズは可能でしょうか?

こちらのページの「見出し」のイメージです。

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30
https://saruwakakun.com/html-css/reference/box

検索したのですが該当する情報を見つけることができず、もし参考になるサイトがございましたらお教えいただけませんでしょうか。よろしくお願いいたします。

返信する
サルワカくん

少し左に寄せるという感じでしょうか。
例えば、h3の見出しの場合、子テーマのstyle.cssに以下のCSSを追加することで左に寄せることができます。

.entry-content h3 {
    margin-left: -12px;
}
返信する
kuda

CSSのご提供ありがとうございます。こんなにシンプルだったんですね。イメージ通りの見出し設定ができました!

返信する

コメントを残す

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