サイドバーのタイトルを変えてみよう! | 脱サボリーマン恋愛小説作家★保育園難民アラフォーシンママBlog

サイドバーのタイトルを変えてみよう!

私はあまり項目が多くないので、使用したのは以下画像のみ。


サボリーマン恋愛小説作家★まちゃのブログ サボリーマン恋愛小説作家★まちゃのブログ サボリーマン恋愛小説作家★まちゃのブログ サボリーマン恋愛小説作家★まちゃのブログ サボリーマン恋愛小説作家★まちゃのブログ

大きさは縦60x横162pxで統一しちゃっています。


css編集から一番下に以下をコピペしてくださいw


/*サイドメニュータイトル*/

.mainMenu{
width:170px;/*サイドの幅*/
margin:10px 5px 0 0;/*基本の位置*/
}
.menu_title{
margin: 0;
padding: 0;
border:none;
background-position:0px 0px;
text-indent:-9000px;
background-repeat:no-repeat;
width:162px;/*画像の横*/ ←統一しているので、基本サイズを記述
height:60px;/*画像の縦*/←統一しているので、基本サイズを記述 
}
#profile .menu_title{/*プロフィール*/
background-image:url(
画像のURL );
}
#calendar .menu_title{/*カレンダー*/
background-image:url(
画像のURL );
width:165px;/*画像の横横幅が違う場合はそのつど指定*/←変えるときはそのサイズを記述
height:165px;/*画像の縦、縦が違う場合はそのつど指定*/←変えるときはそのサイズを記述
}
#reader .menu_title{/*このブログの読者*/
background-image:url(
画像のURL );
}
#theme_list .menu_title{/*ブログテーマ一覧*/
background-image:url(
画像のURL );
}
#recent_entries .menu_title{/*最近の記事一覧*/
background-image:url(
画像のURL );
}
#search .menu_title{/*ブログ内検索*/
background-image:url(
画像のURL );
}
#archives .menu_title{/*アーカイブ*/
background-image:url(
画像のURL );
}
#favorite .menu_title{/*お気に入りブログ*/
background-image:url(
画像のURL );
}
#bookmark .menu_title{/*ブックマーク*/
background-image:url(
画像のURL );
}
#recent_comment .menu_title{/*最近のコメント*/
background-image:url(
画像のURL );
height:80px;/*画像の縦、縦が違う場合はそのつど指定*/←縦のサイズだけ違うときはheightだけ変更して追記
}
#ranking .menu_title{/*ランキング一覧*/
background-image:url(
画像のURL );
}


#defaultAd .menu_title{/*サイドPR*/
background-image:url(画像のURL );

width:165px;/*画像の横横幅が違う場合はそのつど指定*/←横のサイズだけ違うときはwidthだけ変更して追記}


基本的に記述するのは画像サイズと画像URLだけです。

/*この中に書かれていることは後で分かりやすいようにのメモ書きなので反映されません*/


あ、私はですね

/*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/

この項目のところも弄ってます。


というのも、gifでもjpgでもバックがグレーなのは何故?と思ったら


/*10)サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #ffffff; /*-- 白 --*/

この部分が薄いグレーのカラーコードになってたんですよねぇ。


まぁ、この辺の項目のカラーも弄ると、色々と変わります。

http://www.finitojapan.com/cltable.html

↑便利なのでどじょw


よく参考にさせていただいております。


サボリーマン恋愛小説作家★まちゃのブログ