サイドバーの各項目に枠(外枠)を付ける | リアナのカスタマイズ日記(CSS編集用デザイン)

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

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


● サイドバーの各項目に枠(外枠)を付ける


① 下記をCSSへ追記する(不要なものは消してください)


/* ------------------------------------------------------- */
/* プロフィールに枠を付ける                */
/* ------------------------------------------------------- */
.profileMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* テーマに枠を付ける                   */
/* ------------------------------------------------------- */
.themeMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* カレンダーに枠を付ける                 */
/* ------------------------------------------------------- */
.calendarMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* このブログの読者に枠を付ける              */
/* ------------------------------------------------------- */
.readerMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* ランキングに枠を付ける                 */
/* ------------------------------------------------------- */
.rankingMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* アーカイブスに枠を付ける                */
/* ------------------------------------------------------- */
.archiveMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* 最近のコメントに枠を付ける               */
/* ------------------------------------------------------- */
.recentCommentMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* 最近の記事に枠を付ける                 */
/* ------------------------------------------------------- */
.recentEntriesMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* お気に入りのブログに枠を付ける             */
/* ------------------------------------------------------- */
.favoriteMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* ブックマークに枠を付ける                */
/* ------------------------------------------------------- */
.bookmarkMenu{
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* PRに枠を付ける                    */
/* ------------------------------------------------------- */
.subAdBannerArea {
border:5px solid #d2b48c;/* 枠 solid dashed dotted double groove ridge inset outset */
}




注意 注意:記事部分については、枠線の太さによって、右側の枠が切れる
  場合があるので、幅を調整してください




★ 枠の例 太さ5px



solid    1本線


double   2本線


groove   立体的に窪んだ線


ridge    立体的に隆起した線


inset    上と左が暗く  下と右が明るく表示


outset   上と左が明るく 下と右が暗く表示


dashed   破線


dotted   点線