SCRAPBOOK*ZARAスキン

e0136387_14432838.gif1カラムのシンプルなスキンです。
メニュー項目をすべてページ下部に集めたので、エントリ部分だけをすっきりと見せることができます。
画像の横幅は550pxまではみ出さずに表示できます。

≫サンプル




利用規約


● SCRAPBOOK*ZARAスキンは商用、非商用に関わらず自由にご利用いただけます。

● SCRAPBOOK*ZARAスキンの著作権はKameCameraに属します。その他の規定はクリエイティブ・コモンズ表示に準じます。
≫クリエイティブ・コモンズ表示 - 3.0

● 当サイトよりダウンロードしたスキン、テンプレート、その他配布物の利用によって発生したいかなる損害に対しても責任を負いません。

● SCRAPBOOK*ZARAスキンは予告なく変更・削除することがあります。

スキン適用方法


1. マイブログ設定画面で [スキン変更] をクリック

2. 「エキサイトブログ提供スキン | マイスキン」の [マイスキン] をクリック

3. [新しいスキン作成] をクリック

4. [スキン作成を始めます!] をクリック

5. [A. 1列のレイアウト- 上下にメニュー] を選択、 [次へ] をクリック

6. 「■各部分別横幅」[変更] をクリック

7. 本文横幅を650Pixel、ロゴ横幅を150Pixel、メモ帳横幅を150Pixelに設定、[修正] をクリック

8. HTMLの編集

e0136387_21583294.gif(8-1)全体用HTML
この画面のように全体が選ばれている状態で、以下のソースをコピー&ペーストしてください。


<div class="WRAPPER">
<div class="TOPBG"><hr /></div>
<div class="CONTAINER">
<div class="HEADER">
<h1><$header$></h1>
<div class="URL"><$blogurl$></div>
</div>
<div class="USERMENU"><$adminmenu type=1$></div>
<$post$>
<div class="PAGER">
<p class="PREVIOUS"><$prepage type=1$></p>
<p class="NEXT"><$nextpage type=1$></p>
</div>
<div class="MENU">
<div class="PROFILE">
<$logoimage type=1$>
<$description$>
<$nick$>
</div>
<$calendar type=1$>
<$menuright$>
<div class="COPYRIGHT">
<$banner type=2$>
<$xml$>
- <a href="http://kamecamera.exblog.jp" target="_blank">SCRAPBOOK*ZARA</a> Designed by <a href="http://kamecamera.net" target="_blank">KameCamera</a> -</div>
</div>
</div>
<div class="BOTTOMBG"><hr /></div>
</div>

e0136387_22263240.gif(8-2)本文用HTML
この画面のように本文の部分が選ばれている状態で、以下のソースをコピー&ペーストしてください。


<div class="POST">
<h2><$postsubject$></h2>
<p class="EDIT"><$postadmin type=1$></p>
<div class="POST_BODY"><$postcont$></div>
<div class="POSTTAIL"><$posttail$></div>
<$cmtjs$>
</div>

e0136387_22312742.gif(8-3)メニュー用HTML
この画面のように下のメニュー部分が選ばれている状態で、以下のソースをコピー&ペーストしてください。


<div class="MNTTL">
<h2><$mntitle$></h2>
<div class="MNBODY">
<$mnbody$>
</div>
</div>


9. CSSの編集
以下のソースをコピー&ペーストしてください

/* =============================

[SCRAPBOOK*ZARA]
for excite blog
Last Modified: 2008/09/15
Author: Satomi
http://kamecamera.net
http://kamecamera.exblog.jp

============================= */

/* RESET */

html {
overflow-y: scroll;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption,th {
text-align: left;
}

q:before,q:after {
content: '';
}

object, embed {
vertical-align: top;
}

hr,legend {
display: none;
}

h1,h2,h3,h4,h5,h6 {
font-size: 100%;
}

img,abbr, acronym, fieldset {
border: 0;
}

li {
list-style-type: none;
}

p {
margin-bottom: 1em;
}


/* BASE */

body {
color: #6A5940;
text-align:center;
font-size: small;
font-family: Verdana,"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
line-height: 1.6;
text-align: center;
padding:0 0 50px 0;
background:#F5F1EB;
}

* + html body {
font-family: "メイリオ","Meiryo";
}

br.clear {
clear:both;
height:0;
visibility:hidden;
}



/* LINK */

a:link{
color: #7A1B1B;
text-decoration: none;
}

a:visited{
color: #7A1B1B;
text-decoration: none;
}

a:active{
color: #7A1B1B;
text-decoration: none;
}

a:hover{
color: #7A1B1B;
text-decoration: underline;
}


div.WRAPPER {
text-align:left;
width: 650px;
margin: 50px auto 0 auto;
}

div.TOPBG {
width: 650px;
height:50px;
background:url(http://pds.exblog.jp/pds/1/200809/15/39/scrapbook_zara_bgtop.gif) 0 0 transparent no-repeat;
}

div.CONTAINER {
width:600px;
padding: 0 25px 0 50px;
background: url(http://pds.exblog.jp/pds/1/200809/15/39/scrapbook_zara_bgmain.gif) 0 0 transparent repeat-y;
}

div.BOTTOMBG {
width: 650px;
height:50px;
background:url(http://pds.exblog.jp/pds/1/200809/15/39/scrapbook_zara_bgbottom.gif) bottom left transparent no-repeat;
}


/* HEADER */

div.HEADER {
width:550px;
background:url(http://pds.exblog.jp/pds/1/200809/15/39/scrapbook_zara_bgseparate.gif) bottom left transparent no-repeat;
text-align:center;
font-family: "Tahoma", "MS Pゴシック", Sans-Serif;
}

div.HEADER h1 a:hover, div.URL a:hover {
text-decoration:none;
}

h1{

font-size:240%;
font-weight:bold;
line-height:0.8;
letter-spacing:0.1em;
margin:0 0 3px 0;
}

h1 a:link, h1 a:visited {
color:#6A5940;
}

div.URL{
letter-spacing:0.2em;
font-size:small;
font-weight:bold;
padding:0 0 15px 0;
}

div.URL a:link, div.URL a:visited {
color:#6A5940;
}

div.USERMENU{
width:550px;
text-align:right;
margin:5px 0 20px 0;
}


/* MAIN */

div.POST{
width:550px;
margin:0 0 50px 0;
}

div.POST h2 {
color:#6A5940;
float:left;
font-size:medium;
margin:0 0 15px 0;
line-height:1.2;
}


div.POST p.EDIT {
float:right;
margin:0 0 10px 0;
}


div.POST_ADMIN{
text-align: right;
}

div.POST_BODY{
clear:both;
margin:0 0 15px 0;
}

div.POST_BODY img {
xpadding:14px;
background:#FFFFFF;
border-left:1px solid #C9B9A5;
border-right:1px solid #C9B9A5;
border-bottom:1px solid #C9B9A5;
margin:10px 0 -10px 0;
}

div.POSTTAIL{
text-align: right;
font-size:x-small;
background:url(http://pds.exblog.jp/pds/1/200809/15/39/scrapbook_zara_bgseparate.gif) top left transparent no-repeat;
height:21px;
padding:5px 8px 0 0;
}


/* COMMENT */

div.COMMENT{
width:520px;
padding: 14px;
margin: 20px 0px;
border: 1px #C0B094 solid;
background: #DDD0C1;
color:#6A5940;
}

div.COMMENT_BODY{
margin-bottom: 10px;
padding-bottom:10px;
border-bottom: 2px #C0B094 dotted;
line-height:1.2;
}

div.COMMENT_TAIL{
margin: 8px 0px 5px;
font-size:x-small;
}

div.COMMENT_INPUT{
padding-top: 20px;
margin-top: 20px;

}

div.COMMENT_LINE{
margin: 10px 0px 15px;

}

/* PAGER */

div.PAGER {
margin:-15px 0 0 0;
}

p.PREVIOUS {
float:left;
width:270px;
text-align:right;
display:inline;
margin:0 0 40px 0;
}

p.NEXT {
float:left;
width:270px;
display:inline;
margin:0 0 40px 10px;
}



/* FOOTER */

div.MENU {
clear:left;
}

div.PROFILE{

float:left;
margin:0 50px 30px 0;
line-height:1.4;
width: 150px;
}

div.MN{
text-align: left;
}

div.MNTTL{
float:left;
display:inline;
margin:0 50px 30px 0;
width: 150px;
}

div.MNTTL h2 {
color:#6A5940;
text-align:center;
height:23px;
margin:0 0 10px 0;
background:url(http://pds.exblog.jp/pds/1/200809/15/39/scrapbook_zara_bgseparate.gif) bottom left transparent no-repeat;
padding:0 0 2px 0;
}

div.MNBODY {
line-height:1.4;
}

div.MEMOBODY{
width: 150px;
overflow: hidden;
}

div.TRACK_TOP {

}

div.ARCHIVE_HEAD {
margin-bottom: 10px;
font-weight: bold;
}

div.ARCHIVE_BODY {
padding-bottom: 100px;
margin: 20px 0px;
}


img.IMAGE_TOP{
margin:0 0 15px 0;
}

img.IMAGE_LEFT{
margin:0 15px 0 0;
}

img.IMAGE_RIGHT{
margin:0 0 0 15px;
}

img.BOOKMK{
margin: 10px;
}

img.USERMENU{
margin-left: 8px;
}

img.LOGO{
margin-bottom: 10px;
}



.SMALL{
font-size: x-small;
}

.AUTHOR{
font-weight: bold;
}

.TXTFLD{
border: 1px solid #C0B094;
color: #000;
background: #fff;
width:105px;
}

.SUBMIT{
font: 100%;
color: #000;
width:40px;
}



div.CAL {
float:left;
width: 150px;
margin:0 50px 30px 0;
text-align: center;
background:#DDD0C1;
border: 1px #C0B094 solid;
}

div.CAL_HEAD {
width: 150px;
padding: 4px 0px;
margin-bottom: 10px;
font-size:x-small;
text-align: center;
}

div.CAL_BODY {
width: 150px;
text-align: center;
}

div.CAL_BOTTOM { }


.CAL{
font-size:x-small;
text-align: center;
}

.CAL_DAY{
font-size:x-small;
text-align: center;
}

.CAL_SUN{
font-size:x-small;
color: #d36654;
text-align: center;
}

.CAL_SAT{
font-size:x-small;
color: #3572a1;
text-align: center;
}

.CAL_TODAY{
font-size:x-small;
color: #3d5586;
text-align: center;
background: #EAEAEA;
}



/* COPYRIGHT */

div.COPYRIGHT {
clear:left;
padding:10px 0 0 0;
text-align:center;
width:550px;
font-size:x-small;
}

div.BANNER{
width:550px;
}

div.XML {
width:550px;
font-size:x-small;
}


10. [保存] をクリックして適用完了
[PR]
by kamecamera | 2008-09-15 14:51 | SCRAPBOOK*ZARA