サイドバーの各項目別にスクロールバーを表示 | リアナのカスタマイズ日記(CSS編集用デザイン)

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

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

★ サイドバーの各項目別にスクロールバーを表示

注意:指定した高さ(max-height)を超えないとスクロールバーは
表示されません。

height でなく max-height を使用しているのは、
height の場合は、指定したpx より縦幅が小さい場合に
指定したpxの高さ分、縦が広がるのを避けるためです

スクロールしたい部分のCSSのみをコピーして利用してください。



● サイドバー個別でスクロール(メニュータイトルを含む
  (指定した高さを超えた場合にスクロールバーが表示されます)


/* ------------------------------------------------------- */
/* プロフィールの画像(スクロール)            */
/* ------------------------------------------------------- */
.profileMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* テーマの画像(スクロール)               */
/* ------------------------------------------------------- */
.themeMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* カレンダーの画像(スクロール)             */
/* ------------------------------------------------------- */
.calendarMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* このブログの読者(スクロール)             */
/* ------------------------------------------------------- */
.readerMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* ランキング(スクロール)                */
/* ------------------------------------------------------- */
.rankingMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* アーカイブス(スクロール)               */
/* ------------------------------------------------------- */
.archiveMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* 最近のコメント(スクロール)              */
/* ------------------------------------------------------- */
.recentCommentMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* 最近の記事(スクロール)                */
/* ------------------------------------------------------- */
.recentEntriesMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* お気に入りのブログ(スクロール)            */
/* ------------------------------------------------------- */
.favoriteMenu{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* ブックマーク(スクロール)               */
/* ------------------------------------------------------- */
.bookmarkMenu{
max-height:150px;
overflow:auto;
}






● サイドバー個別でスクロール(メニュータイトルを除く
  (指定した高さを超えた場合にスクロールバーが表示されます)


/* ------------------------------------------------------- */
/* プロフィールの画像(スクロール)            */
/* ------------------------------------------------------- */
.profileMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* テーマの画像(スクロール)               */
/* ------------------------------------------------------- */
.themeMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* カレンダーの画像(スクロール)             */
/* ------------------------------------------------------- */
.calendarMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* このブログの読者(スクロール)             */
/* ------------------------------------------------------- */
.readerMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* ランキング(スクロール)                */
/* ------------------------------------------------------- */
.rankingMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* アーカイブス(スクロール)               */
/* ------------------------------------------------------- */
.archiveMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* 最近のコメント(スクロール)              */
/* ------------------------------------------------------- */
.recentCommentMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* 最近の記事(スクロール)                */
/* ------------------------------------------------------- */
.recentEntriesMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* お気に入りのブログ(スクロール)            */
/* ------------------------------------------------------- */
.favoriteMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}
/* ------------------------------------------------------- */
/* ブックマーク(スクロール)               */
/* ------------------------------------------------------- */
.bookmarkMenu .skinMenuBody{
max-height:150px;
overflow:auto;
}