2011年12月18日日曜日

ブロガー(blogger)のウィジェット(Widget)には、必ず「id」が付いている!

ブロガー(blogger)のウィジェット(Widget)には、必ず「id」が付いている! これさえ理解できれば、bloggerのカスタマイズは、半分、出来上がったようなものです。ちなみに、私も最近知りました(笑)。ウィジェットは、ページ要素となる一つ一つのウィンドウのことです。

bloggerの管理画面、テンプレートのHTML編集画面を覗いてみると、下記のような指定があります。


画面を一番下までスクロールしてみてください。

<b:section-contents id='sidebar-right-1'>
<b:widget id='Text1' locked='false' title='このブログについて' type='Text'/>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
<b:widget id='HTML7' locked='false' title='ブログの検索' type='HTML'/>
<b:widget id='Label1' locked='false' title='ラベル' type='Label'/>
<b:widget id='Feed1' locked='false' title='プログラマーズ' type='Feed'/>
<b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'/>
</b:section-contents>
<b:section-contents id='footer-1'/>
</html>
それぞれ、ページ要素の単位となっているウィジェットには、「id」が付いています。上記の例で言うと、Text1、AdSense2、HTML7、Label1、Feed1、BlogArchive1などが、それにあたります。例えば、特定のウィジェットだけデザインを変えたい場合、次のようなCSSを追加すればいいわけです。

#Text1 {
    color: white;
    background-color: black;
}
#AdSense2 {
    color: white;
    background-color: blue;
}
#HTML7 {
    color: white;
    background-color: green;
}
#Label1 {
    color: white;
    background-color: red;
}
#Feed1 {
    color: white;
    background-color: purple;
}
#BlogArchive1 {
    color: white;
    background-color: brown;
}
これで、bloggerのカスタマイズは思いのままです!

0 件のコメント:

コメントを投稿