久々に アメブロカスタマーーーーイズ！です。
旅ブログふたりっぷさん から、
サイドバーのカスタマイズって どーやるのーーー？？って
メッセージをいただいたので、ブログにアップしときます＊
カスタマイズ注意事項とヘッダーのカスタマイズは >>コチラ
■サイドバーのカスタム■
サイドバーのタイトルは全部で12個プラスその他2個
・プロフィール
・PR広告
・コメント
・読者
・ブックマーク
・お気に入り
・最近の記事
・月別記事
・カレンダー
・ランキング
・検索
・テーマ
・その他 読者になる、ブログを作る
以上の画像を準備します*
たとえば、こんな感じです↓↓↓
横140px縦50pxくらいの画像だったら、
ぴたんこカンカンぢゃないかな～と思いますッ。
画像ができたら、いつもブログにアップする画像のとこに
サイドバーの画像をアップしておきまます*
ではでは、CSS編集スタート*
以下のCSSをスキンカスタマイズの一番下に貼り付けます。
/*★サイドメニュータイトル★*/
.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:140px;/*画像の横*/
height:50px;/*画像の縦*/
}
#profile .menu_title{/*プロフィール*/
background-image:url(/*画像のURL*/);
}
#calendar .menu_title{/*カレンダー*/
background-image:url(/*画像のURL*/);
}
#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*/);
}
#ranking .menu_title{/*ランキング一覧*/
background-image:url(/*画像のURL*/);
}
#defaultAd .menu_title{/*サイドＰＲ*/
background-image:url(/*画像のURL*/);
}
編集しなきゃいけないところは、
各/*画像のURL*/ に、画像のURLを貼り付けるのみ！！！！
■画像のURLの貼り付け方■
①別ウィンドウに画像フォルダを出します。
②貼り付けたい画像を右クリック！
③プロパティ→画像のURLをコピー
④最後に、↑のCSSの /*画像のURL*/ に貼り付け！
ex） こんな感じです( ´艸｀)
#profile .menu_title{/*プロフィール*/
background-image:url(ｈttp：//stat.ameba.jp/user_images/20101212/00/wiz-ah0920/3a/b2/j/t01250043_01250.jpg
);
同じやり方で、サイドバーの"読者になる"と"ブログを作る"のカスタマイズ*
/* ★読者になるボタンサイド★ */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
display: block;
padding:0;
margin:0;
width:140px; /* 画像の幅 */
height:50px; /* 画像の高さ */
background-repeat : no-repeat ;
background-image : url(/*画像のURL*/);
}
/* ★ブログを作るボタンサイド★*/
#ameblo a#btn_blog img {
visibility : hidden ;
}
#ameblo a#btn_blog{
display: block;
padding:0;
margin:0;
width:140px; /* 画像の幅 */
height:50px; /* 画像の高さ */
background-repeat : no-repeat ;
background-image : url(/*画像のURL*/);
}
文章で説明すると、難しいな～～～(;´Д`)ノ うぬ～～～。
でも実際、全然難しいコトぢゃないので、
ふたりっぷlomiちゃん、試してみてくださいなッ！
また 分からないコトあったら メッセージなどで どうぞ＾＾*
読んでくれてありがとう( ´艸｀)
ランキングに参加してます＊下のバナーをクリックしてくれたら うれしいのだ*
↓↓↓ポチっと！ポチっと！！
