初のＣＳＳタグ配布になります。
サブの方のブログデザインで私が描いたイラストですが…。
これは配布というより例です。
欲しい方はコメントしてどうぞ。
@charset "utf-8";
/*CSS作成：
(C) http://adan.noor.jp/ameba_new/
■パスワード貸し借りでの使用禁止■
■再配布の際は要リンク■
*/
/*■1■ レイアウト*/
/*▼1-1 ヘッダ設定*/
.skinHeaderFrame{
padding:0;
height:500px;/*ヘッダ高さ★*/
width:500px;/*ヘッダ幅☆*/
margin-bottom:6px;
position:absolute;
top:39px;left:0px;
z-index:2;
}
.skinBlogHeadingGroupArea{
padding:0;margin:0;
}
.skinHeaderArea{
width:500px;/*ヘッダ幅☆*/
}
.skinTitle{
display:block;
height:500px;/*ヘッダ高さ★*/
width:500px;/*ヘッダ幅☆*/
margin:0 auto;
background-position:center center;
text-indent:-9999px;
}
.skinDescriptionArea{
display:none;
}
#navi00{
top:0px;
left:0px;
}
body{
min-width:1220px;/*全体幅☆*/
}
.skinContentsArea{
width:1220px!important;/*全体幅☆*/
margin:0 auto;
}
.skinFrame2{
position:relative;
width:1220px;/*全体幅☆*/
margin:0 auto;
}
.layoutContentsA {
width: 711px!important;
z-index:1;
}
.skinMainArea{
width:400px!important;/*メインカラム幅（C)☆*/
}
.skinSubA{
width:302px!important;/*広告アリ脇カラム幅（A）*/
}
.skinSubB{
width:0px!important;/*広告ナシ脇カラム幅（B）*/
height:0px!important;/*広告ナシ脇カラム幅（B）*/
}
.skinMainArea2{
padding-top:6px;
}
.skinMenuHeader,
.skinMenuBody{
padding:0;
margin:0;
}
/*▽簡略アイフレ*/
.columnD #otherside{
width:184px;/*広告ナシ脇カラム幅（B）*/
position:absolute;
top:0;
right:0;
}
.subModule{
margin:0;
}
.skinArticleHeader,
.skinArticleBody2,
.skinArticleFooter{
margin:10px;
line-height:150%;
}
font{
line-height:130%;
}
/*▼1-3 ナビゲーション*/
.pagingArea {
position: relative;
width: 340px;
margin: 0 auto;
text-align: center;
}
.pagingList{
padding: 4px 14px 3px;
margin-top: 0px;
border-radius: 6px;
}
.pagingNext {
left:210px;
}
.pagingPrev {
right:210px;
}
/*▼1-4 記事一覧タブ */
.tabArea{
margin-top:10px;
}
.tab {
width: 110px;
min-width:110px;
max-width:110px;
padding:3px 0px;
}
#resPointArea #resPoint li{
display:block;
float:left;
}
.skinMenuHeader{
background:none;
}
.skinMenuBody{
background:none;
border:none;
padding:0px;
}
.tabArea{
margin:0 8px;
}
.listContentsArea{
margin:0 6px;
}
.commentArea{
margin:6px;
}
/*▼1-5 背景初期化*/
.skinBgColor,
.skinBaseBgColor,
.skinBlock{
background-color:transparent;/*≪背景透明*/
}
.skinWeakBgColor,
.skinBaseWeakBgColor,
.skinStrongBgColor,
.skinBaseStrongBgColor,
.skinMenuBody,
.skinMenuHeader,
.skinMessageBoard,
.skinSimpleBtn:hover,
.skinSimpleBtn:focus,
.skinSimpleBtn,
.skinSimpleBtn:visited,
.skinSimpleBtn:hover,
.skinSimpleBtn:focus,
.skinArticle,
.skinMenu{
background:transparent;/*≪背景透明*/
}
/*▼1-6 罫線：色以外の設定*/
.skinArticle,
.skinMessageBoard{
border:none;
}
.skinArticleHeader{
border-left:none;
border-left-style:solid;
border-width:5px;
}
.skinArticleFooter{
border-top:none;
border-top-style:dotted;
}
.skinSubHr,
.skinSubList li{
border-bottom:none;
}
.skinMenu {
margin-bottom:6px;
}
.skinSimpleBtn,
.skinSimpleBtn:visited,
.skinSimpleBtn:hover,
.skinSimpleBtn:focus,
.skinMenu,
.skinMainArea,
.headerBnr,
.registArea,
.rss,
.subAdBannerArea .gpt-frame{
border-style:solid;
border-width:1px;
}
/*▼1-7 簡略アイフレ 罫線*/
#aifure1,
#aifure2,
#aifure3,
#aifure4,
#aifure5,
#aifure6,
#aifure7{
padding:10px;
border-style:solid;
border-width:1px;
margin:0 0 6px 0;
}
/*▼1-8 横メニュー*/
#navi00{
position:absolute;
width:504px;/*メインカラム幅（C）☆*/
text-align:center;
}
#navi00 a{
display:block;
float:left;
width:79px;/*メインカラム幅（C）÷４(ケ)☆－４(px)*/
height:30px;
line-height:30px;
font-size:20px;
margin-right:2px;
border-style:solid;
border-width:1px;
text-decoration:none;
font-family:'Princess Sofia',cursive;
font-weight:bold;
}
#navi00 a:link,
#navi00 a:visited{
background-image:url(http://adan.noor.jp/am/d0.gif
) ;/*≪背景画像*/
}
#navi00 a:hover{
background-image:url(http://adan.noor.jp/am/d1.gif
) ;/*≪背景画像*/
}
/*■2■ 色と画像 ■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
背景色：#ffffff;
文字色：#777777;
リンク：#ffa1d9
hover,new：#ff5fbe
border：#ffccea
*/
/*▼2-1 背景＆ヘッダ設定*/
body{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20121214/21/a2/22/j/o08000600sayuri-451355488247761.jpg);/
*≪カッコ内に背景画像URL★*/
background-color:#ffccea;/*背景画像が不透明な場合は削除してよい*/
}
/*▽ヘッダ 高さは1-1に*/
.skinTitle{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20121218/21/74/bf/p/o05000500sayuri-451355832895928.png);/
*≪カッコ内にヘッダ画像URL★*/
background-color:#ffccea;/*ヘッダ画像が不透明な場合は削除してよい*/
}
/*▼2-2 文字*/
body{
color:#777777;
}
/*▼2-3 リンク*/
.skinSimpleBtn,
.skinSimpleBtn:link,
.skinSimpleBtn:visited,
.skinArticleTitle,
.skinArticleTitle:link,
.skinArticleTitle:visited,
.skinAnchorColor,
.skinBaseAnchorColor,
.skinBlock a,
.skinAnchorVisitedColor,
.skinBaseAnchorVisitedColor,
.skinBlock a:visited,
a:visited,
a{
color:#ffa1d9!important;/*≪文字色*/
}
/*▽リンク：オンマウス*/
.skinSimpleBtn:hover,
.skinSimpleBtn:focus,
.skinArticleTitle:hover,
.skinArticleTitle:focus,
.skinAnchorHoverColor,
.skinBaseAnchorHoverColor,
.skinBlock a:focus,
.skinBlock a:hover,
a:focus,
a:hover{
color:#ff5fbe!important;/*≪文字色*/
}
/*▼2-4 「New」など*/
.skinStrongColor,
.skinBaseStrongColor{
color:#ff5fbe;/*≪文字色*/
}
/*▼2-5 「テーマ」など*/
.skinWeakColor,
.skinBaseWeakColor{
color:#666666;/*≪文字色*/
}
/*▼2-6 背景色*/
/*▽二重枠用*/
.skinMainArea,
.skinMenu,
.registArea,.rss,
#aifure1,
#aifure2,
#aifure3,
#aifure4,
#aifure5,
#aifure6,
#aifure7{
background-color:#ffccea;
}
/*▽共通*/
.headerBnr,
.skinMainArea2,
.skinMenu2,
.subAdBannerArea .ad_frame,.registBtnArea,.subAdList,.rss div,
#aifure1 p,
#aifure2 p,
#aifure3 p,
#aifure4 p,
#aifure5 p,
#aifure6 p,
#aifure7 p{
background:#ffffff;/*≪背景*/
}
html, body {
scrollbar-base-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-shadow-color: #ffccea;
scrollbar-3dlight-color: #ffccea;
scrollbar-arrow-color: #ffccea;
}
div::-webkit-scrollbar{
background:#ffffff;
}
div::-webkit-scrollbar-button,
div::-webkit-scrollbar-thumb{
border:#ffccea solid 1px;
background:#ffffff;
}
/*▼2-7 罫線*/
.skinSimpleBtn,
.skinSimpleBtn:visited,
.skinSimpleBtn:hover,
.skinSimpleBtn:focus,
.skinMenu,
.skinMainArea,
.skinMainArea2,
.headerBnr,
.skinTitle,
.registArea,
.rss,
.subAdBannerArea .ad_frame,
.skinBorderColor,
.skinBaseBorderColor,
.skinBlock,
.skinBorderHr,
.skinBorderList li,
.skinSubHr,
.skinSubList li,
.skinArticleHeader,
.skinArticleFooter,
#navi00 a:link,
#navi00 a:visited,
#aifure1,
#aifure2,
#aifure3,
#aifure4,
#aifure5,
#aifure6,
#aifure7,
/*▽二重枠用*/
.skinMainArea2,
.skinMenu2,
.registArea,.rss,.registBtnArea,.subAdList,.rss div,.rssDescription,
#aifure1 p,
#aifure2 p,
#aifure3 p,
#aifure4 p,
#aifure5 p,
#aifure6 p,
#aifure7 p{
border-color:#ffccea;/*≪罫線色*/
}
/*▼2-8 横メニュー*/
/*▽位置,背景画像などの設定は1-8に*/
#navi00 a:link,
#navi00 a:visited{
background-color:#ffccea;/*≪背景色*/
}
/*▽ 横メニューオンマウス*/
#navi00 a:hover{
color:#ffffff!important;/*≪文字色*/
border-color:#ffffff;/*≪罫線色*/
background-color:#ffccea;/*≪背景色*/
}
/*▼二重枠レイアウト編*/
/*▽外枠*/
.skinMainArea,
.skinMenu,
.registArea,.rss,
#aifure1,
#aifure2,
#aifure3,
#aifure4,
#aifure5,
#aifure6,
#aifure7{
background-image:none;/*≪背景画像*/
padding:0px;
border-style:solid;/*枠の種類*/
background:#fff!important;
}
/*▽内枠*/
.skinMainArea2,
.skinMenu2,
#aifure1 p,
#aifure2 p,
#aifure3 p,
#aifure4 p,
#aifure5 p,
#aifure6 p,
#aifure7 p{
margin:6px;
padding:6px;
}
.skinMainArea2,
.skinMenu2,
.subAdList,.rss div,.rssDescription,.registBtnArea,
#aifure1 p,
#aifure2 p,
#aifure3 p,
#aifure4 p,
#aifure5 p,
#aifure6 p,
#aifure7 p{
border-width:1px;
border-style:dashed;/*枠の種類*/
}
.registBtnArea,.subAdList,.rss div,.rssDescription{width:286px!important;}
.skinSubA .registArea .subAdList{width:286px;}
.rss{width:288px!important;padding:0 6px 6px 6px;background-position:top left;border-width:0 1px 1px 1px!important;}
.registBtnArea{margin:0;padding:6px 0;border-width:1px 1px 0 1px;}
.gifAd{padding:0 0 0 30px;}
.registArea .ad_frame,.rss div{text-align:center;padding:6px 0;}
.registArea{background-position:bottom left;padding:6px 6px 0 6px;border-width:1px 1px 0 1px;}.subAdList,.rss div{border-width:0 1px;}.rssDescription{border-width:0 1px 1px 1px!important;}
/*▲二重枠レイアウト編*/
.skinMainArea2{
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
height:580px;/*★記事高さ：数字は好みで調整してください*/
position:relative;
}
.commentBtn{
text-indent:-9999px;
background-image:url(http://stat.ameba.jp/user_images/20121213/18/mozaikuroru-gumi/49/da/p/o0350025012328589906.png);/
*画像URL*/
width:350px;/*コメ画の横幅*/
height:250px;/*コメ画の縦幅*/
}
.basicBtnS, .basicBtnM{
border:0;
background-color:transparent;
}
.amemberEntryBtn img{
visibility:hidden;
}
.amemberEntryBtn a{
background-image:url(http://stat.ameba.jp/user_images/20121213/18/mozaikuroru-gumi/6a/e1/p/o0350025012328589903.png);/
*画像URL*/
width:350px;/*画像の横幅*/
height:250px;/*画像の縦幅*/
margin:auto;
display:block;
}
これはhttp://adan.noor.jp/ameba_new/ このサイトで作ったものです。
よければ使ってください。
;/){kind=link}
;/){kind=link}
;/){kind=link}
;/){kind=link}