★ 各箇所に枠を付ける
注意：記事部分については、枠線の太さによって、右側の枠が切れる場合があるので、幅を調整してください。
● 下記記事で自動作成できます。
◆ 枠で囲むＣＳＳ自動作成
http://ameblo.jp/new-blue-777/entry-11145130429.html
① ヘッダー＋コンテンツに枠
/* ------------------------------------------------------- */
/* ヘッダー＋コンテンツに枠 */
/* ------------------------------------------------------- */
.skinFrame2{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:1000px;/* 幅を調整してください */
}
/* ヘッダー＋コンテンツに枠 */
/* ------------------------------------------------------- */
.skinFrame2{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:1000px;/* 幅を調整してください */
}
② ヘッダー（スキン）に枠
/* ------------------------------------------------------- */
/* ヘッダー（スキン）に枠 */
/* ------------------------------------------------------- */
.skinHeaderArea{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:1000px !important;/* 幅を調整してください */
}
/* ヘッダー（スキン）に枠 */
/* ------------------------------------------------------- */
.skinHeaderArea{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:1000px !important;/* 幅を調整してください */
}
③ コンテンツに枠（ヘッダーを除く）
/* ------------------------------------------------------- */
/* コンテンツに枠（ヘッダーを除く） */
/* ------------------------------------------------------- */
.skinContentsArea{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:1000px !important;/* 幅を調整してください */
}
/* コンテンツに枠（ヘッダーを除く） */
/* ------------------------------------------------------- */
.skinContentsArea{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:1000px !important;/* 幅を調整してください */
}
④ 記事全体に枠（ページナビ・コメントを含む）
/* ------------------------------------------------------- */
/* 記事全体に枠（ページナビ・コメントを含む） */
/* ------------------------------------------------------- */
.skinMainArea{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:500px !important;/* 幅を調整してください */
}
/* 記事全体に枠（ページナビ・コメントを含む） */
/* ------------------------------------------------------- */
.skinMainArea{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:500px !important;/* 幅を調整してください */
}
⑤ 記事個別に枠
/* ------------------------------------------------------- */
/* 記事個別に枠 */
/* ------------------------------------------------------- */
.skinArticle{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:500px !important;/* 幅を調整してください */
}
/* 記事個別に枠 */
/* ------------------------------------------------------- */
.skinArticle{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
width:500px !important;/* 幅を調整してください */
}
⑥ サイドバー全体に枠（Ａ・Ｂ）・・・スキンのサイドバー配置によって
ＡとＢが、左右どちらかにくるかは異なります。
/* ------------------------------------------------------- */
/* サイドバー全体に枠（Ａ） */
/* ------------------------------------------------------- */
.skinSubA{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* サイドバー全体に枠（Ｂ） */
/* ------------------------------------------------------- */
.skinSubB{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* サイドバー全体に枠（Ａ） */
/* ------------------------------------------------------- */
.skinSubA{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
}
/* ------------------------------------------------------- */
/* サイドバー全体に枠（Ｂ） */
/* ------------------------------------------------------- */
.skinSubB{
border:1px solid #ff00ff;/* 枠 solid dashed dotted double groove ridge inset outset */
}
★ 枠の例 太さ5px
solid 1本線
double 2本線
groove 立体的に窪んだ線
ridge 立体的に隆起した線
inset 上と左が暗く 下と右が明るく表示
outset 上と左が明るく 下と右が暗く表示
dashed 破線
dotted 点線