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

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

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

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

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

Mr.ポンバシのブログ


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


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


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


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


よろしくお願いします!

Mr.ポンバシのブログ


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


今回説明するのは、


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


です!


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

Mr.ポンバシのブログ


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


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; /* 画像の高さ */
}


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


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