!ホームSANGOのカスタマイズカスタマイズ応用編SANGOでデフォルトの見出しを変える方法2017年10月8日SANGOではデフォルトの見出しは以下のようになっています。見出し2(h2)見出し3(h3)見出し4(h4)MEMO「見出し1」は、記事タイトルに使われているため、記事内では基本的に使用しません。「見出し2」と「見出し4」については、もはや文字だけです。これだけシンプルにしている理由は、後から自由にカスタマイズしやすいようにするためです(カスタマイズは上書きしていく形で行うことが多いので、シンプルな方がやりやすいのです)。デフォルトの見出しのデザインを変えてみようというわけで見出しを自分の好きなデザインに変えてみましょう。見出し2のデザインを変えたいときには、以下のように書きます。{ここにCSSを書く}SANGOでは.entry-contentというのは「記事内の...」という意味の指定になります。h2で「記事内のh2タグに対して」というように指定してデザインを変えることができるわけですね。この「◎◎に対して」という部分はCSSの「セレクタ」と呼ばれます。見出しデザインを探そうこちらの記事で見出しのデザインを大量に紹介しています。SANGOで使える見出しがかなり含まれていますが...。この中の少し折れ曲がったデザインのものを使ってみましょう。CSSをコピペして、子テーマのstyle.cssに貼り付けます。155);}セレクタを修正ここでh1とh1::beforeを修正します。h2::beforeに変えましょう。以下のような感じですね。155);}.entry-contentは記事内で使われている見出しのデザインだけを変えるために必要です(これを書き忘れると、トップページの記事一覧にまで反映されてしまいます)。h3と書けば良いですね。保存してキャッシュを削除ここまでできたら、style.cssを保存します。このまま記事ページを開いても、見出しデザインは反映されていないかもしれません。ブラウザが過去の見出しデザイン情報を未だに表示し続けている可能性大です。このようにブラウザが画像やCSSを保存することは「キャッシュ」と呼ばれます。Chromeの場合のキャッシュの削除方法は以下のようになります。無事反映された!キャッシュを削除してからページを読み込むと、無事に反映されました。色を変えてみようあとは見出しの色をサイトの雰囲気に合うように変えたいですね。155)/*三角系の部分*/;}サルワカくん色が変わる部分の見分け方ですがcolor:は文字色の指定です。background:やbackground-color:は背景色の指定です。border:では線の色を指定します(太さなどもここで指定します)。borderは三角形を作るためにも使われたりします。155)が折れた部分の三角形を指しています。MEMOCSSでの色の書き方にはいくつかタイプがあります。「#F89174」のように6ケタのカラーコードで書くのが一般的です(このコードはHEXと呼ばれます)。「rgb(200,200,200)」というようにRGBという方式で書くこともあります。ここで面倒なのがカラーコードをいちいち調べること。実際の表示を見ながら色を調整できる便利な技があるので、覚えてしまいましょう。今回はChromeを使った場合の手順を紹介しますが、SafariやIEにも同じような機能が備わっています。デザインを変えたい部分を右クリック⇒[検証]検証モードになる↑コードがずらっと並ぶウィンドウが表示されます。片側にはHTML(現在選択中のタグは青に)、もう片側にはその選択部分のCSSが表示されます。色を選ぶ次に色を選びます。h2を見つけてbackgroundの隣の四角をクリックします。該当部分の現在の色になっているので、どの部分を指しているのか分かりやすいですね。すると、色を選ぶカラーピッカーが表示されます。あとはぐるぐると調整して好きな色に変えましょう。選んだ色はその場で反映される嬉しいのが選んだ色がブラウザ上ですぐに反映されるところ。これでサイトの雰囲気を見ながら、色を選んでいくことができます(ただし、style.cssに反映されるわけでないので、ページを再読込したら元に戻ります)。色が決まったら、カラーピッカー上に表示されているカラーコード(#ff9393など)をコピーして、style.css上で現在の色コードと置き換えます。折れた部分の色を変える折れた部分(三角形)の色も変えたいですね。いうわけで検証画面のHTML側で::beforeをクリックします。h2:beforeの方のCSSをテスト的に変えることができます。変えたい部分をHTML側で探して、見た目をCSS側で変える...というわけですね。さきほどと同じように実際の見た目をチェックしながら、色を選び、決まったら色コードをコピーします。あとは、これをstyle.cssの該当する色コードと置き換えればOKです。置き換えができたら保存して、再度ページを読み込み直してみましょう(反映されなければキャッシュを消去)。完成!このようにして、自分の好きな配色に変えることができます。SANGOの見出し3を変えるときの注意点SANGOのデフォルトの見出し3(h3タグ)では、左側に線が表示されます。そのため、CSSを上書きしたときにも、その線が残ってしまったりします。{~}の中に追加しましょう。none;}これは線を消すための指定です。{~}の中に追加しましょう。0;}これで左側の余白が無くなります。2020/02/06見出し3の左に表示される線について、SANGOのデフォルトの見出し3(h3タグ)では、左側に線が表示されます。2019/11/18スマホにデザインが反映されないお世話になります。「背景をストライプで塗る」の見出しをH2に反映させ、バックグラウンドの色を赤系、文字色を白に変更してみました。PCにはデザインが反映されるのですが、スマホには反映されず、ただの黒文字のままになってしまいます。修正方法を教えていただきたいです。以下のコードをスタイルcssに貼っています。2019/07/24FTPで子テーマのカスタマイズをして適用させたところ、SANGOのテーマ自体が消えてしまいました。上記の通り、デフォルトのh2をFileZillaでカスタマイズして適用したところ、テーマが消えて簡素なページになってしまいました。カスタマイズを戻して最初の状態にしたのですが、全く直りません。困っているので、解凍してくれたら嬉しいです。2019/01/01ビジュアルエディターにスタイルが反映されないこんにちは。変更をプレビューでは確認できるのですが、ビジュアルエディターでは確認できません。2018/12/30サルワカの見出しのスタイルが効かないこんにちは。見出しについてどうしても解決できず、助けてほしいです。サルワカさんで紹介されている以下の見出しをh2に使っているのですが、classを指定して特定の部分だけ見出しのデザインを変えることができません。divなどほかの部分では問題なくできています。見出しでクラスを指定して変えるための方法がなにかあるのか知りたいです。2018/11/27見出しを少し左にずらしたい初めまして。サルワカのデザインがとても好きで、購入させていただきました。こちらのページの「見出し」のイメージです。2018/10/30シェアボタン(FAB)のスタイルを変えたいこんにちは。記事タイトル下(サムネイル画像下)の自動のシェアボタンをカスタマイズする方法がどこか説明されているのでしょうか?アイコン前にSHAREの文字を入れたいです。2018/10/27見出しのCSSのうち○○:afterが反映されないお世話になっております。h3タグを以下のコードで設定したのですが、記事を表示した際に記事の上部に「見出しの一部」が誤表示されてしまいます。誤りをご指摘いただけましたら幸いです。2018/10/13お世話になっております。見出し2を変更したいのですが、反映されず標準のスタイルのままです。誤りをご指摘頂けましたら幸いです。2018/10/04ロリポップでウィジェットやテーマの編集が保存できない場合の対処法こんにちは、とてもお世話になっております。どんなCSSを入力しても読み込んでもらえず、「何かの理由でダメでした」のようなメッセージがずっと表示されて、四苦八苦していたのですが、サーバーのWAF設定を無効にしたところ、上手くいったので情報共有させてもらいます。使用するサーバーはロリポップです。2018/08/02初めまして。見出しのデザイン変更と文字色の変更をしたく、以下の2つのサイトを参考にしました。自分でも調べてみたのでが、解決せずに困っております。キャッシュの削除も同じページを参考に同じ手順で行いました。(当方、CSSなどド素人です。文字色の希望は白ですが、一部の記事に黒に反映されるあります。2018/07/28見出しをCSSで中央寄せさせたいお世話になっております。見出し4をCSSで中央寄せにしたいのですが方法がわかりませんので教えていただきたいです。FontAwesomeを使用してカスタマイズしたいです。うまく反映されないので誤りをご指摘頂けましたら幸いです。2018/03/18見出し23のストライプの色を変更したいお世話になっております。見出し23のストライプの色を変更したいのですが、どうしてもうまくいきません。cssはどのように書き込めば良いでしょうか。コメント投稿ガイドラインを読んでから投稿してください。メールアドレスは公開されませんが、名前は公開されます。