オリジナルスキンCSSの編集 サイドメニュータイトル2 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

オリジナルスキンCSSの編集 サイドメニュータイトル2

今度はメニュータイトル全部の背景に画像を使用してみます

これのメリットは用意する画像が1つで済みます・・・・


ここのサイトのようにメニューごとに違う画像であったり、

文字の書体を特別なものにしたり、

タイトルを英文にしたりするには

メニューそれぞれ別の画像を作りCSSで設定していきます・・・・コレは次回に




今回は1つということでこんな画像を用意しました(170px×65px)




CSSの最後にコピペです


/*サイトタイトル背景*/
.menu_title{
color:#ffffff;/*タイトル文字色*/
font-size:13px;/*タイトル文字サイズ*/
margin:0;
display:block;

padding:40px 0 10px 45px;/*タイトル文字位置*/
border-bottom:none;
background-image:url(画像のURL);
background-repeat:no-repeat;
}



padding:40px 0 10px 45px; 上 右 下 左からのタイトルテキストの位置になります
プレビューを見ながら画像にうまく入るよう調整してください





前回のタイトルの前に画像をおくのと変りはないのですが

今回は画像の上にバランスよくタイトルを配置できるかが勝負です

いろんな画像を作って試行錯誤してください




オリジナルスキンCSSの編集 サイドメニュータイトル1

オリジナルスキンCSSの編集 サイドメニュータイトル3


オリジナルスキンCSSの編集 ヘッド・タイトル1

オリジナルスキンCSSの編集 ヘッド・タイトル2

オリジナルスキンCSSの編集 ヘッド・タイトル3