JetThemeのサイドバーのタイトル(見出し)デザインはシンプルに細い横線のみとなっています。
これを自分のブログに合ったデザインに変更してみましょう!
本記事ではJetThemeのサイドバーのタイトル(見出し)デザイン変更方法を解説します。
初期のデザインを無効化する方法
見出しデザインのCSSを追加するだけだと、初期のデザイン設定と重なってしまいます。
先ずはHTMLの編集で、初期のデザインを無効化しましょう。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
コメントアウトで無効化
#primary .widget-title > spanで検索をします。
その下の行のbackground-color: var(--bs-body-bg);と数行下の#sidebar .widget-title:beforeをコメントアウト /* */で無効にします。
あとで変更しやすいよう日本語でメモを残していますが、不要ならコメントアウトだけで構いません。
これで初期のデザインを無効化できます。
サイドバー見出しデザイン方法
サイドバーのタイトル(見出し)デザインの変更はCSSの追加で行います。CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
サイドバー見出しデザインCSS
基本のCSSは以下の通りです。
見出しデザインは、以下のようなサイトを参考にしてみてください。
シンプルなものから凝ったオシャレなものまで色々ありますよ!
参考サイト様
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
別ブログ使用例
JetThemeを使用している別ブログバラを咲かせてばらびっと!で使用しているCSSは以下の通りです。
色々なデザインに変更できるので、試してみてくださいね!









