人気ブログランキング | 話題のタグを見る
多忙なため、コメントへのお返しができなくてごめんなさい。温かいコメントは更新の励みです。どうしても解決できない問題がある...という場合に限っての質問箱を設けましたので、よかったらご利用ください。いつもAnimal Skinを愛用してくださってどうもありがとう~♪
Top
「黒背景の猫」のスキン配布(ワイド&1列) 「WD-cat2」 by Animal Skin
「黒背景の猫」のスキン配布(ワイド&1列) 「WD-cat2」 by Animal Skin_f0165338_1434640.jpg

プレビューはここをクリック

メニューのすべてが記事の一番下に配置される、1列のレイアウトの黒スキンです。
横幅800pxlまでのかなり大きな写真が貼れます。


トップ画像の写真を手持ちの写真と入れ替えたい人へ
このスキンに使用しているトップ画像のサイズは「横900pxl×縦230pxl」です。


ここで使用しているトップ画像は、左側に小さい猫画像を貼ってあるように見えますが、実際には右側を背景の色に合わせて黒く塗りつぶしてあるだけのの900pxl×230pxlの長方形です。^^
参考⇒もとの画像







はじめに...
このスキンはAnimal Skinでレギュラースタイルとして使用している
「画面の左側にメニュー部分がある」スタイルではないので...
新しくスキン作成をするときに出てくる「レイアウト選択」のところで

「A. 1列のレイアウト- 上下にメニュー」



を選んでください。





そしてさらに、大きい写真が貼れるタイプなので、横幅変更をする必要があります。

1列のレイアウトを選んだ次にいったところで...

スキン変更ページのHTML編集のすぐ上にある

■ 各部分別横幅

の部分の数値を変更する必要があります。



↑こうなっている部分です。

ここで700と書かれている数値を変更します。

数値の右にある「変更」と書かれているボタンを押すと、次のような窓が現れます。



「本文横幅」の右の枠内の700という数値を800にしてください。
半角で打つのを忘れないようにね。

これ↓が、数値変更をしたあとです。



その後、「修正」をクリックします。

元のページは、↓のように変化しているはずです。



これで数値変更はオシマイです。^^




この後、ソースコードのコピペになるのですが、左側にメニューがあるスキンと違い、
このタイプはHTML編集が4つに分かれています。



■「メイン」■ 枠の中をすべてコピーして、HTML編集のメイン部分、一番外側をクリックした場所に貼ってください。
↓ここです。




<a name=pt></a>
<body bgcolor="#000000">
<div id="base">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="800">
<tr><td height="20"></td></tr>
<tr><td valign="top">
<div class="HEADER"><$header$></div>
<div class="URL"><$blogurl$></div>
<div class="USERMENU"><$adminmenu type=2$></div>
</td></tr>
<tr><td height="130"></td></tr>
</div>

<$menuleft$>
</div>
</td></tr>
<tr><td height="40"></td></tr>
<tr><td valign="top">
<$post$><p><p>

<center><table border="0" cellpadding="0" cellspacing="0" width="40%">
<tr><td align="right" width="35%"><$prepage type=1$></td>
<td align="center" width="30%"><a href="#top" target="_self"> | ページトップ | </a></td>
<td align="left" width="35%"><$nextpage type=1$></td></tr>
</table></center>
<p><p>
<hr style="border:dashed #666666; border-width:3px 0 0 0; height:1;line-height:0px;font-size:0;margin:0;padding:0;">
<hr style="border:dashed #666666; border-width:3px 0 0 0; height:1;line-height:0px;font-size:0;margin:0;padding:0;">
<p>
<table class="footer">
<tr>
<td class="navigation">
<$menuright$>
</td>

<td class="information">
<$calendar type=1$>
<div class="profile">
<$logoimage type=1$>
<$description$>
<$nick$>
</div>
<div class="banner">
<$banner type=1$>
<$xml$>"WD-cat2" Skin by <a href="http://animalskin.exblog.jp/" target="_blank"><b>Animal Skin</b></a></div></a>
</div>
</td>
</table>
</div>






■「メニュー(上)」■ 枠の中をすべてコピーしてHTML編集の、縦に3つ並んだ横広がりの長方形の中、一番上の長方形に貼ってください。
↓ここです。




<div class="menu">
<h3><$mntitle$></h3>
<$mnbody$>
</div>






■「本文」■ 枠の中をすべてコピーしてHTML編集の「本文」部分に貼ってください。3つ並んだうち、真ん中の長方形です。
↓ここです。




<div class="POST">
<div class="POST_HEAD">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="80%"><$postsubject$></td>
<td width="20%" align="right"><$postadmin type=2$></td></tr>
</table>
</div>
<div class="POST_BODY">
<$postcont$>
<div class="POST_TAIL" align="right"><a href=#pt>Top▲</a> | <$posttail$></div>

<$cmtjs$>
</div>




■「メニュー(下)」■ 枠の中をすべてコピーしてHTML編集の、縦に3つ並んだ横広がりの長方形の中、一番下の長方形に貼ってください。
↓ここです。




<div class="menu">
<h3><$mntitle$></h3>
<$mnbody$>
</div>





■CSS編集■ 枠の中をすべてコピーして「CSS編集」部分に貼ってください。

/* WD-cat2 by Animal Skin */

/* この編集枠内に見られる#に続く6桁の数字&アルファベットは色番号です。プレビューを見ながら自由に変えてみてください。色番号一覧はAnimal Skinのサイドバーにリンクしてあります */

BODY
BODY{ background-color: black; MARGIN : 0PX;PADDING : 0PX; }
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF,; LINE-HEIGHT : 150%; COLOR : #E9E9BE; }


A:LINK{ COLOR: #93BF96; TEXT-DECORATION: NONE; }
A:VISITED{ COLOR: #B4D1B6; TEXT-DECORATION: NONE; }
A:ACTIVE{ COLOR: #B4D1B6; TEXT-DECORATION: NONE; }
A:HOVER{ COLOR: #DBDB97; TEXT-DECORATION: NONE; }
/*↑記事内の基本リンク文字色変更部分*/

/* base (トップ画像入れ替えには、この中にあるURLを指示に従って変更してください)*/
div#base {
background:transparent url("http://pds.exblog.jp/pds/1/200805%2F31%2F38%2Ff0165338_3182230.jpg") no-repeat center top;
margin:0 auto;
overflow:hidden;
width:900px;
padding: 0 12px;
color:#333333;
font-size:small;
}



DIV.HEADER{ FONT : BOLD medium/100% sans-serif; TEXT-ALIGN: RIGHT ;MARGIN : 10PX 0PX 20PX ;}

DIV.HEADER A:LINK { COLOR: #E9E9BE; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: #E9E9BE; TEXT-DECORATION: NONE; }
DIV.HEADER A:HOVER { COLOR: #B4D1B6; TEXT-DECORATION: NONE; }
/*↑タイトル文字の色変更はここ↑で*/

DIV.URL{ FONT : X-SMALL/100% VERDANA,TAHOMA; TEXT-ALIGN : RIGHT; MARGIN : 10PX 0PX 20PX; }

DIV.URL A:LINK { COLOR: #E9E9BE; TEXT-DECORATION: NONE; }
DIV.URL A:VISITED { COLOR: #E9E9BE; TEXT-DECORATION: NONE; }
DIV.URL A:HOVER { COLOR: #B4D1B6; TEXT-DECORATION: NONE; }
/*自分のブログのURLの色変更はここ↑で*/

DIV.USERMENU{ FONT : 8PT/100% VERDANA; TEXT-ALIGN : RIGHT; MARGIN-BOTTOM : 10PX 5PX 20PX; }

DIV.USERMENU A:LINK {COLOR: #E9E9BE; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #E9E9BE; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #B4D1B6; TEXT-DECORATION: UNDERLINE;}
/*ユーザーメニューの色変更はここ↑で*/

DIV.MN{ TEXT-ALIGN:LEFT; }
DIV.MNTTL{ WIDTH : 150PX; BORDER-BOTTOM : 1PX #AAA SOLID; PADDING : 2PX 0PX 0PX; MARGIN : 25PX 0PX 10PX; }
DIV.MEMOBODY{ WIDTH : 150PX; OVERFLOW : HIDDEN; }

DIV.POST{ MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;}
DIV.POST_HEAD{ BORDER-BOTTOM : 3PX #666666 dotted; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }
DIV.POST_TTL{ FONT : BOLD 15PT/130%;}
DIV.POST_ADMIN{ TEXT-ALIGN : RIGHT;}
DIV.POST_BODY{ LINE-HEIGHT : 150%; WIDTH : 800PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }
DIV.POST_TAIL{ FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

DIV.COMMENT{ BORDER : 3PX #666666 double; BACKGROUND : #000000 ;PADDING : 15PX;MARGIN : 20PX 0PX; }
DIV.COMMENT_BODY{ MARGIN-BOTTOM : 20PX; }
DIV.COMMENT_TAIL{ MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; COLOR : #777; LINE-HEIGHT : 130%;}
DIV.COMMENT_INPUT{ MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; }
DIV.COMMENT_LINE{ BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; }


/* footer */
table#footer {
clear:both;
border-collapse:collapse;
width:800px;
}

/* navigation */
td.navigation {
width:380px;
overflow:hidden;
vertical-align:top;
line-height:1.5em;
}
td.navigation a {
color:#B4D1B6;
} /*ページ下半分にある「記事ではない部分」、左半分のリンク文字色*/
td.navigation a:hover {
color:#FFFFEE;
} /*ページ下半分にある「記事ではない部分」、左半分のリンク文字にカーソルが乗ったときの色*/
div.menu {
float:left;
margin-bottom:20px;
padding-left:40px;
width:150px;
overflow:hidden;
}
div.menu h3 {
margin-bottom:5px;
BORDER-BOTTOM : 3PX #666666 dotted;
font-size:small;
}
div.menu input {
width:40px;
}
div.menu input.TXTFLD {
width:100px;
}

/* information */
td.information {
padding-left:40px;
overflow:hidden;
text-align:center;
vertical-align:top;
line-height:1.5em;
}
td.information a {
color:#B4D1B6;
} /*ページ下半分にある「記事ではない部分」、右半分のリンク文字色*/
td.information a:hover {
color:#BBBBBB;
} /*ページ下半分にある「記事ではない部分」、右半分のリンク文字にカーソルが乗ったときの色*/
div.CAL {
margin-bottom:20px;
border:#CCCCCC 1px dotted;
width:338px;
overflow:hidden;
font-size:13px;
}
div.CAL table {
width:340px;
}
div.CAL table a {
display:block;
}
div.CAL table td.CAL_DAY {
}
div.CAL table td.CAL_SUN {
color:#D36654;
}
div.CAL table td.CAL_SAT {
color:#3572A1;
}
div.CAL table td.CAL_TODAY {
border:#A6CAA9 3px dotted;
color:#888888;
}
div.profile {
float:left;
width:150px;
overflow:hidden;
}
div.banner {
float:left;
padding-left:40px;
width:150px;
font-size:xx-small;
}
div.banner span {
display:none;
}
div.banner a.sign {
display:block;
margin:auto;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/7/sign1.gif");
background-repeat:no-repeat;
background-position:center;
width:110px;
height:14px;
}



DIV.TRACK_TOP { LINE-HEIGHT : 170%; }
DIV.ARCHIVE_HEAD { FONT-WEIGHT : BOLD; MARGIN-BOTTOM : 10PX; }
DIV.ARCHIVE_BODY { MARGIN : 20PX 0PX; LINE-HEIGHT : 160%; PADDING-BOTTOM : 100PX; }

IMG.IMAGE_TOP{ MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_LEFT{ MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_MID{ MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.BOOKMK{ MARGIN : 10PX; BORDER : 0PX; }
IMG.USERMENU{ MARGIN-LEFT : 8PX; }
IMG.LOGO{ MARGIN-BOTTOM : 10PX; }

DIV.BANNER{ MARGIN : 30PX 0PX 10PX; }

.SMALL{ FONT-SIZE : 11PX; }
.DATE{ FONT : BOLD 8PT/150% TAHOMA; }
.TIME{ FONT : 8PT/150% TAHOMA; TEXT-ALIGN : LEFT; }
.AUTHOR{ FONT : BOLD 8PT TAHOMA; }
.TXTFLD{ FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }
.SUBMIT{ FONT :9PT/140% ;COLOR:#000; }

DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }

TEXTAREA.TXTFLD {height:10em;}/*コメント入力欄を広く*/

Top▲ | by mari_ca by animal_skin | 2008-05-31 14:43 | ワイドスキン(大きな写真OK)
<< 「鉄細工の門」のスキン配布(ワ... | ページトップ | 「見上げる仔猫」のスキン配布 ... >>
↓質問はこちらへ↓