JetThemeの初期状態の見出しデザインはとてもシンプルです。
これをブログに合ったデザインに変更してみましょう！
本記事ではJetThemeの見出しデザイン変更方法を解説します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
見出しデザインCSS
基本の見出しデザインCSSは以下の通りです。
/*見出しCSS*/
.entry-text h2{
見出しデザイン
}
.entry-text h3{
見出しデザイン
}
.entry-text h4{
見出しデザイン
}
見出しデザインは、以下のようなサイトを参考にしてみてください。
シンプルなものから凝ったオシャレなものまで色々ありますよ！
参考サイト様
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
別ブログ使用例
JetThemeを使用している別ブログバラを咲かせてばらびっと！で使用しているCSSは以下の通りです。
/*見出しCSS*/
.entry-text h2{
padding: .6rem 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
background: -webkit-linear-gradient(to right, #F4C7C3, transparent);
background: linear-gradient(to right, #F4C7C3, transparent);
}
.entry-text h3{
margin-bottom: 1rem;
margin-top: 1rem;
padding: .5rem;
border-left: solid 8px #F4C7C3; /*左線*/
}
.entry-text h4{
display: table;
padding: .5rem 1rem;
border-radius: .5rem;
background: #F4C7C3;
background: #F4C7C3;
}
もっとオシャレに凝ったデザインにもできるので、色々と試してみてください！
