日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年4月1日水曜日

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






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...