サイドバーのメニュータイトルに画像②(個別指定) | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ サイドバーのメニュータイトルに画像②


◆ サイドバーのメニュータイトルに画像を入れる(個別)


 ① 画像を入れる(文字部分は画像自身にいれる)


/* ------------------------------------------------------- */
/* プロフィールの画像(メニュータイトル)         */
/* ------------------------------------------------------- */
.profileMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* テーマの画像(メニュータイトル)            */
/* ------------------------------------------------------- */
.themeMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* カレンダーの画像(メニュータイトル)          */
/* ------------------------------------------------------- */
.calendarMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* このブログの読者(メニュータイトル)          */
/* ------------------------------------------------------- */
.readerMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* ランキング(メニュータイトル)             */
/* ------------------------------------------------------- */
.rankingMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* アーカイブス(メニュータイトル)            */
/* ------------------------------------------------------- */
.archiveMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* 最近のコメント(メニュータイトル)           */
/* ------------------------------------------------------- */
.recentCommentMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* 最近の記事(メニュータイトル)             */
/* ------------------------------------------------------- */
.recentEntriesMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* お気に入りのブログ(メニュータイトル)         */
/* ------------------------------------------------------- */
.favoriteMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* ブックマーク(メニュータイトル)            */
/* ------------------------------------------------------- */
.bookmarkMenu .skinMenuTitle{
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 center;
padding-left:350px;
height:30px !important;/* 高さ */
display:block;
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* PR(メニュータイトル)                */
/* ------------------------------------------------------- */
.subAdBannerHeader span {
background-image:url(画像のURL);
background-repeat:no-repeat;/* 繰り返ししない */
background-position:0 center;/* 配置位置 */
padding-left:350px;
height:50px !important;/* 高さ */
display:block;
background-color:transparent !important;/* 背景色 */
text-indent:-600px;
}



★ この背景画像は、 サイドバーのメニュータイトルに画像  の記事の
  場所とは別の場所に設定しているので、ワンポイント画像とこの
  記事の画像の両方を指定できます。
  (実例:私のブログのサイドバーメニュータイトル)


★ 用意する画像の例