表示確認ですABCdef

【DEMO】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
画像の再配布×
スクロールスクリプトの再配布×

特徴？
ファーストビューだけ頑張りました。
スクロールバーが浮かないように、デザインを変えました。
サイドバーの左側（黄色のボックス）にプラグイン1、サイドバーの右側（橙色のボックス）にプラグイン2と3が表示されます。

デメリット
文字が見にくい。
作った自分でもびっくりするぐらい使いにくい。
JavaScriptを無効にしていると、記事部分・サイドバー部分をスクロールできません。

カスタマイズ例
◆記事部分＋サイドバー部分の高さを変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を書き換えます。

/*------------------スクロールバー -----------------*/
#scrollbar1 {
width: 959px; float:left; margin: 0;
background:#fbfc90;
border-left: solid 1px #fff;
}
#scrollbar1 .viewport {
width: 944px; height: 586px; overflow: hidden; position: relative; }
…

◆記事部分・サイドバー部分の横幅を変える(説明しません)
1px単位でがちがちに固めてあるので説明しません。ごめんなさい。
ボックスの間に1pxの白い線が入るようにborderを指定してあります。
#scrollbar1の左側、.entry-areaの右側、#side2の右側に1pxのborderが引いてあります。
#wrapperなどの大きなボックスの幅を調節してレイアウトが崩れたら、その辺りが原因かもしれません。


◆サイドバーの各ボックスの色を変える・プロフィール欄（赤いボックス）の高さを変える
1.ボックスの色を変える
スタイルシートの編集から、下記の部分を探し、赤色の箇所を書き換えます。
各ボックスの場所は次の通りです。
#side1→サイドバー上部の赤のボックス（プロフィール欄）
#side2→サイドバー左の黄色のボックス（プラグイン1）
#side3→サイドバー右の橙色のボックス(プラグイン2・プラグイン3)
#side23→#side2と#side3を合わせたボックス。#side2と#side3の高さが違った場合の余白の色を指定します。

2.プロフィール欄の高さを変える
スタイルシートの編集から、下記の部分を探し、黄色の箇所を書き換えます。

/*---------------------サイドバー----------------------*/
#side1 {
width: 364px;
height: 222px;
border-bottom: 1px solid #fff;
background: #eb3333;
float: left;
overflow: hidden;
}
#side2 {
width:182px;
margin: 0;
padding:0;
background: #f8e548;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
float: left;
}
#side3 {
width: 181px;
margin: 0;
padding: 0;
background: #ffae1a;
border-bottom: solid 1px #fff;
float: left;
}
#side23 {
width: 364px;
background: #fbfc90;
float: left;
}

◆サイドバー下側の余白（記事がサイドバーより長かった場合の右側の余白）の色を変える・スクロールバーの色を変える
1.サイドバー下側の余白の色を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を書き換えます。

2.スクロールバーの色を変える
スタイルシート編集から、下記の部分を探し、黄色の箇所を書き換えます。

/*------------------スクロールバー -----------------*/
#scrollbar1 {
width: 959px; float:left; margin: 0;
background:#fbfc90;
border-left: solid 1px #fff;
}
#scrollbar1 .viewport {
width: 944px; height: 586px; overflow: hidden; position: relative; }
.overview {list-style: none; position: absolute; left: 0; top: 0; background: #f4c337;}
.thumb .end,
.thumb { background-color: #9c3133;}

◆記事部分の背景色を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を書き換えます。

/*---------------------記事表示部----------------------*/
#content{
position:relative;
margin: 0px;
padding:0px;
}
/* 記事全体 */
.entry-area {
width: 579px;
float: left;
border-right: 1px solid #fff;
background: #fbfc90 url(http://blog-imgs-55.fc2.com/p/o/t/potar/lemon-bg2.png) no-repeat;
}

おまけ
使い損ねた矢印アイコン。ご自由にお使い下さい。