右スクロールバーでなく、左スクロールバーです。
★ 注意
① プロフィールは、現在、調整中なので、この記事には載せていません。
(項目タイトル部分を除いてスクロールしますの部分)
② 広告(PR)、アメブロ広告については、この記事には載せていません。
③ direction:rtl; によって左スクロールにしています。
内側部分(中身は)、direction:ltr; で元に戻しています。
④ 実例は、私のブログの左にあるテーマ一覧を参照してください。
⑤ 記事についての左スクロールバーは、別記事で記載予定です。
◆ 項目タイトル部分を除いてスクロールします。
① CSSへ下記を追記する。(不要な部分は消してください)
/* ------------------------------------------------------- */
/* テーマ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.themeMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.themeMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* カレンダー(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.calendarMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.calendarMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* このブログの読者(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.readerMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.readerMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ランキング(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.rankingMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.rankingMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* アーカイブス(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.archiveMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.archiveMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近のコメント(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentCommentMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentCommentMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近の記事(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentEntriesMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentEntriesMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* お気に入りのブログ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.favoriteMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.favoriteMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ブックマーク(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.bookmarkMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.bookmarkMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* テーマ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.themeMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.themeMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* カレンダー(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.calendarMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.calendarMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* このブログの読者(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.readerMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.readerMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ランキング(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.rankingMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.rankingMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* アーカイブス(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.archiveMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.archiveMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近のコメント(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentCommentMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentCommentMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近の記事(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentEntriesMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentEntriesMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* お気に入りのブログ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.favoriteMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.favoriteMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ブックマーク(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.bookmarkMenu .skinMenuBody{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.bookmarkMenu .skinSubList {
direction:ltr;/* 左から右に文字表記 */
}
◆ 項目のタイトル部分も含めてスクロールします。
/* ------------------------------------------------------- */
/* プロフィール(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.profileMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.profileMenu .skinMenu2{
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* テーマ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.themeMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.themeMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* カレンダー(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.calendarMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.calendarMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* このブログの読者(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.readerMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.readerMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ランキング(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.rankingMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.rankingMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* アーカイブス(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.archiveMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.archiveMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近のコメント(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentCommentMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentCommentMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近の記事(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentEntriesMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentEntriesMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* お気に入りのブログ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.favoriteMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.favoriteMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ブックマーク(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.bookmarkMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.bookmarkMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* プロフィール(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.profileMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.profileMenu .skinMenu2{
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* テーマ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.themeMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.themeMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* カレンダー(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.calendarMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.calendarMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* このブログの読者(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.readerMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.readerMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ランキング(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.rankingMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.rankingMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* アーカイブス(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.archiveMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.archiveMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近のコメント(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentCommentMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentCommentMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* 最近の記事(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.recentEntriesMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.recentEntriesMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* お気に入りのブログ(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.favoriteMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.favoriteMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
/* ------------------------------------------------------- */
/* ブックマーク(スクロール) 左スクロール */
/* ------------------------------------------------------- */
.bookmarkMenu{
max-height:150px;
overflow:auto;
direction:rtl;/* スクロールバーを左へ(右から左に文字表記) */
}
.bookmarkMenu .skinMenu2 {
direction:ltr;/* 左から右に文字表記 */
}
■ 補足(覚え書き)
① ♪や)や。などが一番最後の文字の場合は、その文字が先頭にきて
しまう場合がある。
例
テスト♪⇒♪テスト
② 下記の様にスクリプトで最後に英字の x を入れて対応する
そして x は文字のサイズを0px にして見えなくする。
最後に半角・全角スペース( )を試したがうまくいきませんでした。
最新の記事一覧の例
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script language="JavaScript">
$(document).ready(function(){
$(".recentEntriesMenu .skinSubList a").each(function(){
$(this).html($(this).html()+"<span style='font-size:0px;'>x</span>");
});});
</script>