ホーム / blogger / QooQカスタマイズ /

bloggerテンプレート【QooQ】カスタマイズ　ガジェットの「h2」とデザインを変更する

2020/04/01

blogger QooQカスタマイズ

t f B! P L
bloggerでは、サイドバーに配置されるガジェットに「h2」が使われている事が多いのではないでしょうか。

このブログのテンプレート「QooQ」もガジェット（ウィジット）に「h2」が使用されていたので、他のタグに変えてみました。

サイドバー（ガジェット）のタグとデザインのカスタマイズ

ガジェットタイトルをh2からdivに変更

デザインを変えず、h2だけを変更する方法です。

テンプレートの編集からガジェットのタイトル部分を探します。
下記のタグを探します。

 <h2><data:title/></h2>

ガジェットの数だけあるので全て検索し、下記のコードに変更します。

 <div class='widget-title'><data:title/></div>

これでh2からdivに変更出来ました。

サイドバーのh2をdivに変更するときに変える箇所

サイドバーのデザインを変更する

次はCSSに変更を加え、ガジェットタイトルのデザインを変えます。
スタイルシートの変更方法は2つあります。

  1. 直接HTMLの編集から
  2. テンプレートカスタマイズ→上級者向けCSSの追加

おすすめなのは①の直接編集です。

CSSを追加する場所

HTML編集の上の方にある<b:skin>の横の▶︎をタップすると、折りたたまれていたスタイルシートが展開します。

CSSの場所

最後のかぎかっこの手前に書き加えていきます。

書き加えるコード

 /* ウィジットタイトルの装飾 */
.widget-title {
font-size: 1.8rem;
 padding: .6em;
 background: $(brand.color);
 color: $(brand.font);
}

これで終了です。

参考サイト様
https://www.memorou.com/2014/11/bloggerh3h2h2div.html
ありがとうございます(⁎˃ᴗ˂⁎)

QooQ