とう子：
先生～！
これを見てください。
先生：
ほほう。カレーなアイコンじゃのう。
とう子：
前回カスタムCSSで、ヘッダー画像を
オリジナルに変更したら、
友人が「このアイコンをブログに使って」って
プレゼントしてくれたんです♪
先生：
友情じゃのう～。
とう子：
私のブログのサイドバーに、
タイトルの左に赤い●ぽちがあるじゃないですか。
それをこのカレーアイコンに置き換えたいんです。できますか？
先生：
なるほど。そういうことだったんじゃな。
可能じゃが、枠線や背景も含めて
変更する必要があるんじゃよ。
とう子：
え！●ぽちだけじゃなくて枠線も背景も一緒になってるんですか！
う～ん、じゃあ、この背景を全部取り去って、
カレーアイコンをつけることはできますか？
先生：
それならカンタンじゃよ。
まず、サイドバーのモジュールの構造を
説明させてもらおう。
画像は上記の3要素のいずれかに指定されていると考えられる。
カレーアイコンを表示させたいのは
タイトルの左側なので、セレクタでいうと
「.module-header」になるのじゃ。
よって、まずそれ以外の画像指定をクリアする方法がこれじゃ。
/* モジュールの背景画像をクリアする */
.module { background-image: none; }
.module-content { background-image: none; }
とう子：
すごい！ 消えました！
先生：
では次に、カレーアイコンを、メニューの左側につけるぞ。
最初にファイル･マネージャーからカレーアイコンを
アップロードするのじゃ。前回の復習じゃよ。
とう子：
アップロードしました。CSSを前回の書式にしたがって書くと
.module-header { background-image: url(http://●●●.blog.eonet.jp/△△△/curry_icon.gif); }
ですね。
先生：
とう子ちゃん、
いつの間にそんな優等生キャラになったのじゃ？
とう子：
てへ。
カレーアイコンが出ましたー！
でもちょっと上すぎますね…。
先生：
CSSでレイアウトも調整できるんじゃよ。
詳しいことはヘルプブログの
「カスタムCSSについて（余白・レイアウト）」と
「カスタムCSSについて（背景）」を見てほしいのじゃが、
とうこちゃんの場合は、
余白を調整する「padding」と、
画像の位置を決める「background-position」を使って、
画像を真ん中にするのじゃ。これを入れてみてくれ。
.module-header {
background-image: url(http://●●●.blog.eonet.jp/△△△/curry_icon.gif);
padding-top: 0;
padding-left: 20px;
background-position: left;
}
同じセレクタへの指定が２つ以上ある場合は、
改行して書いたり、
半角スペースを挟んで並列して書いてもＯＫじゃ。
とう子：
わぁ～！
いい位置におさまりました！
すごーーーい！！
先生：
フォッフォッフォッ。
とう子：
あと、もうひとつ、メニューの背景を白色にすることはできますか？
少し文字が見づらいかなという気がするので。
先生：
貪欲じゃのう。
メニューの背景色は「.module-content」に
「background-color」属性で指定するんじゃ。
ついでに、タイトル部分の色変更もしておいたほうが
統一感が出るんじゃないかの。
「.module-header」属性で同じように指定じゃ！
※色コードについては、タグ入門の第4回 色を変更してみるのじゃの
色コード一覧などを参照じゃ！
とう子：ええと、
.module-content { background-color: #FFFFFF; }
これをさっきの「.module-content { background-image: none; }」と
まとめられますよね？
…できましたー！
先生：すっかりハマったのう。
このように、CSSでは各セレクタごとに様々な指定ができるんじゃ。
好きな画像を用意して、ぜひいろいろ試してみてほしいのう。
おまけ
こんなカレーアイコンもあるよ！ 使ってみてね☆
次回、2009年12月11日（金）更新！
わしじゃ！
とう子：
先生：
とう子：
先生：
とう子：
先生：
とう子：
先生：
とう子：
先生：
とう子：
とう子：
先生：
先生：
とう子：
先生：
とう子：
とう子：
先生：
とう子：
先生：
とう子：
先生：
とう子：
先生：
とう子：
先生：
とう子：
先生：
