こんにちは＾＾
今日はサイドメニューのタイトルをオリジナル画像にするcssへの記述方法を書きます。
厳密に言うとその部分の背景を設定するということなんですが＾＾
あ、タイトルごとに変えるのではなく
タイトルのテキストはそのままで背景をいっきに変える
ことももちろんできます、がそれは次回に＾＾
・サイドメニュータイトルそれぞれの画像を作ります。
・画像を作ったら[画像フォルダ]→[画像の追加]で画像を全て[アップロード]
・以下の赤字部分を全てコピーして放り込んであげてください＾＾
サイドメニューのカラムの横幅は
デフォルトでは170pxになっていると思います。（2007年12月1日現在）
なので横幅をいじってない人は170px以下で画像を作ってください。
/* ---------- menu_element : 各サイドバー共通 - */
#search{
background: url(ブログ内検索の背景画像URL) no-repeat left top;
}
#reader{
background: url(このブログの読者の背景画像URL) no-repeat left top;
}
#profile{
background: url(プロフィールの背景画像URL) no-repeat left top;
}
#recent_entries{
background: url(最近の記事一覧の背景画像URL) no-repeat left top;
}
#recent_comment{
background: url(最近のコメントの背景画像URL) no-repeat left top;
}
#archives{
background: url(アーカイブの背景画像URL) no-repeat left top;
}
#theme_list{
background: url(ブログテーマ一覧の背景画像URL) no-repeat left top;
}
#bookmark{
background: url(ブックマークの背景画像URL) no-repeat left top;
}
#ranking{
background: url(ランキングの背景画像URL) no-repeat left top;
}
#favorite{
background: url(お気に入りブログの背景画像URL) no-repeat left top;
}
#calendar{
background: url(カレンダーの背景画像URL) no-repeat left top;
}
アップロードした画像のURLがわかりませんか？その場合
[アメブロを書く]→[画像フォルダ] でメニュータイトルの背景にしたい画像をクリックしてください。
画像が大きく前に出てきます。
その画像を[右クリック]して[プロパティ]を選ぶと
[アドレス（URL）]というものが見れますから
そのアドレスをコピーして上の画像のURLのところに入れてください＾＾
これで各々のメニュータイトルはオリジナルに変わりましたがテキストが残ったままです。
なので下の赤字の部分を足してください。
/* ---------- font : 文字サイズ・装飾---------- */
.menu_title{
color:#333333;
font-size:12px;
font-weight:bold;
visibility:hidden;
}
visibility:hidden;は”隠れた”という意味です。
hiddenはhide and seek（かくれんぼ）のhideの過去分詞ですね＾＾
あとは画像に合わせた縦幅の調節です。
下の赤字の部分を作った画像の縦幅のpx数に変えて放り込んでください。
.menu_title{
margin-top:0px;
margin-bottom:7px;
padding-bottom:30px;
}
縦に余白を取りたいだけなのでpadding-top:30px;でも問題ないです。
青字のmargin-bottomの数値はメニュータイトル画像から下の部分の余白です。
デザインを見ながら調節してください。
そしてここにあるmenu_titleの中はmarginとpadding以外は必要ないです。
削除しても全然かまいません・・・・・・・・・たぶん。笑。
できたでしょうか？＾＾
次回は
サイドメニュータイトルのテキストをそのままに背景をいっきに全部変える
です＾＾