Mr.ポンバシのブログ改造術part19-1

24時間以内に更新した別の記事

Mr.ポンバシによるアンケート結果　No.8

こんばんは Mr.ポンバシです(-^□^-)

急ですみませんが、アメンバー＆フォロワー整理をしようと思います！


両者ともに絡まない人を消そうかと思います


なうを今後もやる予定がないという方がいらっしゃいましたら、コメントのほうでその旨を教えて頂けると助かります！


消すのは本日の深夜です！


よろしくお願いします！

では、ブログ改造術の説明の方に移ろうと思います！


今回説明するのは、


"サイドメニューのタイトルを画像に変える方法"


です！


サイドメニューのタイトルというのは、例えば

この画像のようなものです。これを

といった画像に変える方法を説明します


これをかえるだけでかなりブログの印象も変わると思います


やり方は簡単です！


①上のようなタイトル画像を用意する

　
　これも以前バナー作成のときに用いたソフトを使ってもらっても結構です。


　バナー作成の記事のURLはこちら↓

　http://ameblo.jp/regulus-of-leo/entry-10767485528.html
　


②次の記述をCSSの最後に追記してください。

/*プロフィールタイトル*/
#profile .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*読者一覧タイトル*/
#reader .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*カレンダータイトル*/
#calendar .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*ブログ内検索タイトル*/
#search .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*アメブロランキングタイトル*/
#ranking .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*最新の記事タイトル*/
#recent_entries .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*最近のコメントタイトル*/
#recent_comment .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*ブログテーマタイトル*/
#theme_list .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*アーカイブタイトル*/
#archives .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*ブックマークタイトル*/
#bookmark .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*お気に入りブログタイトル*/
#favorite .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

/*PR広告タイトル*/
#defaultAd .menu_title{
background-image: url(画像のURL);
background-position:top;
text-indent: -9000px;/*　タイトル文字を消す　*/
height:95px; /*　画像の高さ　*/
}

みなさんも試してみてはどうでしょうか？


今日はこんなところでノシ