人気ブログランキング |

超シンプルなdivレイアウトスキン(公式テンプレ"強引"カスタマイズ)

《Yahoo!知恵袋》より。
>シンプルで線も無く真っ白で文字も小さめのスキンに変更
管理ページ→スキン変更→マイスキン→[新しいスキン作成]
で、開くページにある「白スキン」ではないかと思います。

このスキンは、個人的には文字サイズなどのバランスがいいと感じていて、いいスキンに見えるのですが。
タグをみると「tableレイアウト」と言われているものです。特徴は下記のとおり。
・画像サイズを大きくしても崩れない。
・しかし、表示速度が遅い。

公式「ワトソンブック」だと、表示速度が速いdivレイアウトです。
これをベースに、真っ白スキンを作ってみましたので、もしよかったら、お使いください。
※「ワトソンブック」のカレンダーがカッコイイと思ったので、そこは活かしました。

◆2013.7注記:このスキンCSSは、エキサイト公式スキンのアレンジです。使用にあたり、当方へのコメントは必須ではありません。どうぞ、ご自由にお使い下さい。




管理ページ→スキン変更→「ワトソンブック」編集
下記テキストエリア内をクリックし、Ctrl+a(全選択)、Ctrl+c(コピー)でコピーしてください。
ワトソンブックのCSSも、Ctrl+a(全選択)、Del(削除)で、全文削除し、Ctrl+v(貼り付け)で、コピー内容を貼り付けてください。
保存して適用すれば、完成です。


body div{margin: 0px; padding: 0px;}
body { margin: 0px; padding: 0px; font-size: 100%; color: #222; }
body, td { font-size: small; line-height: 1.4; font-family:"Verdana","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","MS Pゴシック","sans-serif"; word-break: break-all; word-wrap:break-word; }

a:link { color: #555; text-decoration: none; }
a:visited { color: #555; text-decoration: none; }
a:hover { color: #00f; text-decoration: underline; }
img { border:0; }

#header { margin: -1px auto 0px;}
.headerImg { position: relative; width: 860px; height: 76px; margin: 0px auto; padding-top: 10px; }
#header h1 { margin: 0px; font-size: 22px; line-height: 1.2; }
#header h1 a:link, #header h1 a:visited { text-decoration: none; }
#header h1 a:hover { color: #FFF; }
#header .url { padding-left: 2px; }
#header .url a:link, .url a:visited { }
#header .url a:hover { text-decoration: underline; color: #FFF; }
#header .userMenu{ position: absolute; margin: 0px; top: 64px; right: 0px; font-size: 12px; line-height: 1.2; color: #666; }


#container { width: 860px; margin: 0px auto; padding-top: 16px; }
#main { float: left; width: 640px; padding-bottom: 20px; }
#menu { float: right; width: 180px; font-size:80%;}
.profile { overflow: hidden; margin-bottom: 10px; padding: 12px 8px 8px; border: 1px solid #f3f0eb; }
.profile p { margin: 0px; }
.profile .LOGO { margin-bottom: 6px; }
.description { line-height: 1.3; }
.profile p.nick { margin: -1em 0px 0px; line-height: 1.2; font-size: 11px; }
.mn { overflow: hidden; }
.mnTtl { height: 22px; margin: 12px 0px 4px; padding: 0px 0px 0px 16px; font-weight: bold; background-repeat: no-repeat; font-weight: bold; }
.mnBody { width: 180px; margin-bottom: 20px; }
.MEMOBODY { overflow: hidden; }

.post { margin-bottom: 70px; }
.postHead {border-left:#8c8781 10px solid;padding-left:7px;}
.postHead h2 { font-size:96%;}
.postadmin { padding-top: 5px; font-size: 12px; text-align: right; color: #999; }
.postBody { overflow: hidden; width: 640px; margin: 0px 0px 12px; padding-top: 10px; font-size:80%;line-height: 1.6; }
.postBody h3 {border-left:#8c8781 7px double;padding-left:4px;font-size:100%;}
blockquote { clear: both; margin: 10px; padding: 6px 10px; background-color: #FFF; }
.TAGS { padding-top: 8px; clear: both; line-height: 1.4; font-weight: bold; color: #888; }
.TAGS a:link, .TAGS a:visited { padding: 0px 0px 0px 2px; font-weight: normal; color: #555; }
.postTail { padding: 8px 10px 0px 0px; font-size: 11px; text-align:}

.COMMENT { margin-top: 8px; padding: 15px; }
.COMMENT_BODY { width: 610px; margin-bottom: 20px; overflow: hidden; line-height: 1.4; }
.COMMENT_TAIL { margin: 5px 0px; font-size: 11px; }
.COMMENT_INPUT { margin-top: 10px; padding-top: 18px; border-top: 1px dotted #8F8B83; }
.COMMENT_INPUT form { margin: 0px; padding: 0px; }
.COMMENT_LINE { margin : 10px 0px 15px; border-top: 1px dotted #8F8B83; }

.pageNavi { width: 240px; margin: auto; color: #999; font-size:80%;}
.pre { float: left; margin: 0px; }
.next { float: right; margin: 0px; }

img.IMAGE_TOP { margin-bottom: 12px; }
img.IMAGE_LEFT { margin-right: 12px; margin-bottom: 12px; }
img.IMAGE_RIGHT { margin-left: 12px; margin-bottom: 12px; }
img.IMAGE_MID { margin-top: 12px; margin-bottom: 12px; }

.BANNER { text-align: center; }
.SMALL { font-size: x-small; color: #999; }
.DATE { }
.TIME { }
.AUTHOR { font-weight: bold; }
.TXTFLD { font-size: 100%; border: 1px solid #666666; }
.SUBMIT { font-size: 100%; line-height: 1.4; }

DIV.CAL_TOP { }
DIV.CAL { padding: 32px 0px 8px; border: 1px solid #D7D4CD; background-image: url(http://md.exblog.jp/skn/img/a/01/13/8/content.jpg); background-repeat: no-repeat; background-position: 0px -3px; }
DIV.CAL_HEAD { font-size: 10px; line-height: 22px; font-family: Verdana, sans-serif; }
DIV.CAL_BODY { margin: 4px 10px 0px; }
DIV.CAL_BOTTOM { }
.CAL { text-align: center; }
.CAL td { font-size: 10px; font-family: Verdana, sans-serif; line-height: 16px; }
.CAL_DAY { font-weight: bold; }
.CAL_SUN { font-weight: bold; color: #C00; }
.CAL_SAT { font-weight: bold; color: #369; }
.CAL_TODAY { font-weight: bold; background-color: #FFF; }
.CAL td a:link, .CAL td a:visited { display: block; font-weight: bold; background-color: #DDDAD4; }
DIV.XML { padding: 8px 0px 20px; font-size: x-small; line-height: 1.1; font-family: Verdana, sans-serif; text-align: center; }