bloggerでガジェット周りをカスタマイズ！

交番がぜんぶドラクエの井戸みたいだったらなー。


昨日ヘンな夢みて笑

おとしものを井戸のそこのおまわりさんにとどけるっていう…。なんでかそこだけ覚えてる笑


現実をみて！んじゃ今日もbloggerのカスタマイズちゃちゃっとやっていきましょー。

今日はbloggerのガジェット部分の色とか線なんかをcssでカスタマイズするときの指定方法を紹介しちゃうよっ！

ガジェットはcssだとウィジェット

bloggerは管理画面で注目の投稿ガジェットとか人気の投稿ガジェットをついかできますよね。

ガジェットはcssではウィジェット（widget）て書かれてます。

統一してほしいよねっ笑

なもんでcssで色とか線とかカスタマイズするときもwidgetに設定していきます。

widgetのカスタマイズ例

①widget全体に線をつける

.widget {
  border : solid 1px black;
}

②widgetのタイトル部分にアンダーラインを引く

.widget h2 {
  border-bottom : solid 1px black;
}



こんな感じ！widgetのまえにあるドット（.）はwidgetがクラス名だからつけるっていうcssのルール。

…ただ、このカスタマイズだとサイドバーのガジェットもフッターのガジェットも、それからヘッダーもメインもぜんぶまとめて線がついちゃう笑

たとえば使ってるテンプレートがqooqなら、こっちの記事の部位ごとのIDと一緒に書いて…、よいしょっと…、

#footer .widget h2 {
  border-bottom : solid 1px black;
}

みたいにすればっ！ほらっ！あっというまにティファール！フッターにあるガジェットだけ線がつきますよ♪

わかると楽しいよっ

bloggerのガジェットもといウィジェットのカスタマイズはわかるとかんたんだし、なんかいっぺんに変わるからはでで楽しい！