Blogger:ガジェットのタイトルにスタイルシートを適用する方法

イントロダクション

Google のブログサービス「Blogger」にて、各ガジェットのタイトルにスタイルシートを適用して、オリジナルのデザインを表現したいことってありますよね。

その時の方法についてまとめました。

Blogger:ガジェットのタイトルにスタイルシートを適用する方法

考え方

通常、Blogger の各種デザインを変える場合には、

Blogger の設定の
テンプレート→カスタマイズ→上級者向け

にて、それぞれの要素に対してデザインを設定しますが、ガジェットの場合にはタイトルのフォントと色は設定できるようですが、それ以外は選択式の設定からは行えなさそうです。

そこで、同じく上級者向けにある「CSS を追加」にて、スタイルシートを独自に追加します。

すべてのウィジットのタイトルにスタイルシートを適用

.widget > h2 {
  background-color: #ff0000;
}

ここでは、ウィジットのタイトルの背景色を赤に設定しています。

特定のウィジットのタイトルにスタイルシートを適用

#HTML5 > h2 {
  background-color: #ff0000;
}

ここでは、id 属性として "HTML5" という値が設定されたウィジットのタイトルの背景色を赤に設定しています。

まとめ

このように、Blogger では、テンプレート→カスタマイズ→上級者向けにて各種デザインの設定を行いますが、選択式でデザインを設定できないものがあります。

そのようなものに対しては、HTML 構造をソースコードから調べて、任意のセレクタを用いてスタイルシートを適用するようにします。


セレクタについては、次のページが参考になります。

セレクタの種類－CSSの基本
http://www.htmq.com/csskihon/005.shtml

このブログ内の、他の”Blogger”についての情報を見る