アメブロにスクロールバーを設置してみよう。［新デザイン対応］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。


　



いつもご購読、ありがとうございます。

ご購読者の方から、スクロールバーの付け方について
ご質問がありましたので、今回の記事でとりあげてみようと
思います。



ブログ内に投稿した記事が多くなってくると、
スクロールバーを設置すると、見た目が
すっきりとなります。



CSSを追加するだけで、
簡単に設置できます。



【１】CSS編集画面の表示

［マイページ］→［クイックリンク］→［スキンCSSの編集］の順にクリックし、
CSS編集画面を表示します。



【２】CSSの追加

下記のCSSをコピーし、
上記【１】のCSS編集画面の一番最後の続きに追加（貼り付け）します。

追加するCSSは、次の通りです。

/* ■スクロールバーの設置■ */
.skinArticle {/* 記事投稿欄 */
height:400px;
width:470px;
overflow:auto;
}
.recentEntriesMenu .skinMenuBody {/* 最新の記事 */
height:100px;
width:150px;
overflow:auto;
}
.themeMenu .skinMenuBody {/* テーマ */
height:40px;
width:150px;
overflow:auto;
}
.archiveMenu .skinMenuBody {/* 月別 */
height:80px;
width:150px;
overflow:auto;
}
.bookmarkMenu .skinMenuBody {/* ブックマーク */
height:0px;
width:150px;
overflow:auto;
}
.readerMenu .skinMenuBody {/* このブログの読者 */
height:100px;
width:260px;
overflow:auto;
}
.favoriteMenu .skinMenuBody {/* お気に入りブログ */
height:0px;
width:260px;
overflow:auto;
}
.skinBody{/* スクロールバーの色（全体）：IEのみ */
scrollbar-face-color:#ffccff;/* 表面の色 */
scrollbar-track-color:#ffffff;/* バーの背景色 */
scrollbar-arrow-color:#000000;/* 矢印の色 */
scrollbar-highlight-color:#ffffff;/* ハイライトの色 */
scrollbar-shadow-color:#ffccff;/* 影の色 */
scrollbar-3dlight-color:#000000;/* 外側のハイライトの色 */
scrollbar-darkshadow-color:#000000;/* 外側の影の色 */
}

【３】表示の確認

ここまでできたら、下方へスクロールして、［表示を確認する］をクリックし、
スクロールバーが設置されているかどうかご確認ください。



【４】CSSの保存

これで、OKなら、元のページに戻り、［保存］ボタンをクリックします。
これで、ブログは、次のようになりました。



上記赤丸で囲んだ部分がスクロールバーです。
私のブログで確認してくださいね。
↓↓↓
kiyoのテスト用ブログ


今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。


　

クリックして戴けると、
とても励みになります。