Blogger・QooQのサイドバー見出し文字をCSSで調整する

QooQ はフラットデザインをベースとした、カスタマイズしやすい Blogger のフリーテンプレート。サイドバーのコンテンツはカードタイプでデザインされているので、その型を崩さずに見出しをカスタマイズするなら、文字サイズや余白の調整程度にとどめておくのがいいかもしれません。

QooQ-sidebar

サイドバーの見出しを CSS でカスタマイズ

下記は文字サイズと余白、そして位置を調整した例です。
#sub-content .widget h2 {
    font-size: .8em;
    padding: .8em 0;
    text-align: center;
}
見出しにはヘッダーの背景色が反映されるようになっていますが、「 background 」を指定すれば、それとは別の背景色に変更ができます。

ガジェット個別に指定する

上記の CSS では、サイドバーに設置したすべてのガジェットに反映しますが、これをガジェット個別に指定をしたい場合は、セレクタにある ID を該当ガジェットの ID に変更します。

例)ラベルガジェットの場合
#Label1.widget h2 {}
ガジェットの ID を調べる方法がわからない場合は、HTML 編集に進みガジェットへ移動するためのアイコンをクリック。移動先選択に表示されているのが各ガジェットの ID です。
「#〇〇○」のかたちにし、この場合は半角スペースで区切らずに記述します。

ラムネグ