[Blogger] JetThemeサイドバー見出しデザイン変更方法

2026/09/13

Blogger HTML/CSS JetTheme


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をコメントアウト /*  */で無効にします。


#primary .widget-title > span {
/* background-color: var(--bs-body-bg); サイドバー背景無効 */
padding-right: 5px;
position: relative;
}
#main .widget-title:before,
/*  #sidebar .widget-title:before サイドバー横線無効 */ {
background-color:  var(--jt-bg-light);
content: "";
height: 1px;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}


あとで変更しやすいよう日本語でメモを残していますが、不要ならコメントアウトだけで構いません。


これで初期のデザインを無効化できます。



サイドバー見出しデザイン方法

サイドバーのタイトル(見出し)デザインの変更はCSSの追加で行います。


CSSの追加方法

左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。

そこから【詳細設定】の【CSSを追加】を選択します。



【カスタムCSSを追加】にCSSを入力できます。

後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。


サイドバー見出しデザインCSS

基本のCSSは以下の通りです。


/*サイドバータイトルCSS*/
#sidebar .widget-title {
見出しデザイン
}


見出しデザインは、以下のようなサイトを参考にしてみてください。

シンプルなものから凝ったオシャレなものまで色々ありますよ!


参考サイト様

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

HTML・CSSでつくるおしゃれな見出しのデザイン39選


別ブログ使用例



JetThemeを使用している別ブログバラを咲かせてばらびっと!で使用しているCSSは以下の通りです。


/*サイドバータイトルCSS*/
#sidebar .widget-title {
padding: .2em .5em;
background: #E67C73;
color: #ffffff;
box-shadow: 0px 0px 0px 4px #E67C73;
border: dashed 2px #F4C7C3;
}


色々なデザインに変更できるので、試してみてくださいね!



にほんブログ村 ブログブログ ブログサービスへ ブログノウハウランキング 

 ※当ブログはアフィリエイト広告を利用しています※

このブログを検索

まとめ記事

現在の使用テーマ

EmporioからQooQ list版に変更しました。(2025年11月)




QooQ