人気ブログランキング | 話題のタグを見る
多忙なため、コメントへのお返しができなくてごめんなさい。温かいコメントは更新の励みです。どうしても解決できない問題がある...という場合に限っての質問箱を設けましたので、よかったらご利用ください。いつもAnimal Skinを愛用してくださってどうもありがとう~♪
Top
「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin
「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_7214326.jpg

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


Animal Skin初の3列スキンです。^^
こちらもごくごくシンプルなデザインで...
3列スキンの需要がどのくらいあるのかわかりませんが、今後はときどき登場する予定です。




3列スキンは、Animal Skinのデフォルトである左メニューとはちょっと違うのでご注意を。


まずは、3列のレイアウト-左右にメニューレイアウト選択からスタートです。


新しくスキン作成」をクリックした後に、D. 3列のレイアウト-左右にメニューを選択してください。
「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_6313352.jpg


ここで間違ったレイアウトを選択してしまうと、コードを打ち込むことはできるのですが、実際にスキンを使うときに、メニュー部分が表示されなくなります。
なので、気をつけて忘れずに「3列のレイアウト-左右にメニュー」レイアウトを選択してね。



「メイン」の位置は見ての通り、ここです。
「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_634499.jpg

「本文」は中央に位置しています。
「本文」の配布コードはここにコピペしてね。
本文と書かれているので間違えることはないと思います。
「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_636459.jpg

「メニュー」は右側と左側、両方にあります。
「メニュー」の配布コードはここに...といっても、Animal Skinで配布しているスキンは、ここの部分をいじらなくてOKなものがほとんどなので心配はいりませんが。

右メニュー
「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_6383935.jpg

左メニュー
「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_6381060.jpg





この後は普通に↓をコピペしてください。

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

<a name=pt></a>
<table border="0" cellpadding="0" cellspacing="0" width="900">
<tr><td height="30"></td></tr></table>
<div id="base">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="900">
<tr><td height="100"></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="100"></td></tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="900">
<tr><td width="150" valign="top">
<div class="PROFILE">
<div align="center">
<$logoimage type=1$></div>
<$description$>
<$nick$>
</div>
<$calendar type=1$>
<$menuleft$>
</td>
<td width="50"></td>
<td width="500" valign="top">
<DIV ID=MAIN>
<$post$></DIV>
<table border="0" cellpadding="0" cellspacing="20" width="82%">
<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>
<br/><br/>
</td>
<td width="50"></td>
<td width="150" valign="top">
<div class="PROFILE">
<$menuright$>
<$banner type=1$>
<$xml$>
<center><font size="1">
"blue flowers 3C" Skin<br>by <a href="http://animalskin.exblog.jp/" target="_blank"><b>Animal Skin</b></a></div></a></font>
</center>
</div>
</td></tr>
<tr><td colspan="5" height="100"></td></tr>
</table>
</div>
</div>



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

<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>
</div><$cmtjs$>
</div>
<center><img src="http://pds.exblog.jp/pds/1/200904/21/38/mini-flower.jpg" border="0">
</center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td height="50"></td></tr>
</table>



■メニュー■ (一応「メニュー」部分へのコードを貼っておきますが、ここはもともと書いてあるコードでOKです。つまりここは右メニューも左メニューも無視しちゃってOK!)
右メニュー<div class="MNTTL_R"><$mntitle$></div>
<div class="MN_R"><$mnbody$></div>

左メニュー<div class="MNTTL_L"><$mntitle$></div>
<div class="MN_L"><$mnbody$></div>




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

/* blue flowers 3C by Animal Skin */

BODY{ BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; }
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #76808C; }

A:LINK{ COLOR: #688FBF; TEXT-DECORATION: NONE; }
A:VISITED{ COLOR: #7AA7DF; TEXT-DECORATION: NONE; }
A:ACTIVE{ COLOR: #AED2FE; TEXT-DECORATION: NONE; }
A:HOVER{ COLOR: #2F5E97; TEXT-DECORATION: UNDERLINE; }

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

DIV.HEADER{ FONT : BOLD large/100% sans-serif; TEXT-ALIGN:center;}


DIV.HEADER A:LINK { COLOR: #76808C; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: #76808C; TEXT-DECORATION: NONE; }
DIV.HEADER A:HOVER { COLOR: #AED2FE; TEXT-DECORATION: NONE; }

DIV.URL{ FONT : X-SMALL/100% VERDANA,TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:center;}
DIV.USERMENU{ FONT : 8PT/100% VERDANA; TEXT-ALIGN : center; MARGIN-BOTTOM : 7PX; }

DIV.URL A:LINK { COLOR: #AED2FE; TEXT-DECORATION: NONE; }
DIV.URL A:VISITED { COLOR: #AED2FE ; TEXT-DECORATION: NONE; }
DIV.URL A:HOVER { COLOR: #76808C; TEXT-DECORATION: NONE; }

DIV.USERMENU A:LINK {COLOR: #76808C; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #76808C; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #98A6E4; TEXT-DECORATION: UNDERLINE;}

DIV.PROFILE{ WIDTH : 150PX; PADDING : 15PX 0PX 10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:LEFT;}

DIV.MN_R{ TEXT-ALIGN : LEFT; MARGIN-BOTTOM : 20PX; }
DIV.MNTTL_R{ WIDTH : 150PX; BORDER-BOTTOM : 4PX #AED2FE dotted; PADDING : 0PX 0PX 0PX; MARGIN : 0PX 0PX 10PX; TEXT-ALIGN : LEFT;}

DIV.MN_L{ TEXT-ALIGN : LEFT; MARGIN-BOTTOM : 20PX; }
DIV.MNTTL_L{ WIDTH : 150PX; 4PX #AED2FE dotted; PADDING : 20PX 0PX 0PX; MARGIN : 0PX 0PX 10PX; TEXT-ALIGN : LEFT;}

DIV.MEMOBODY{ WIDTH : 150PX; OVERFLOW : HIDDEN; }

DIV#MAIN {
WIDTH : 500PX;
MARGIN : 10PX 0PX 0PX;
PADDING : 20PX;
BACKGROUND : #FFFFFF;
BORDER: 4PX #AED2FE dotted;
OVERFLOW : HIDDEN;
}

DIV.POST{ MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;}
DIV.POST_HEAD{ BORDER-BOTTOM : 3PX #CCC 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 : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }
DIV.POST_TAIL{ FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

DIV.COMMENT{ BORDER : 4PX #AED2FE dotted; BACKGROUND : #FFFFFF; PADDING : 15PX;MARGIN : 20PX 0PX; }
DIV.COMMENT_BODY{ MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%; }
DIV.COMMENT_TAIL{ MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; COLOR : #777; }
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; }


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.CAL_TOP { }
DIV.CAL { MARGIN : 20PX 0PX 20PX; WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD { WIDTH : 150PX; FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_BOTTOM { }

.CAL{ FONT : 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.CAL_DAY{ FONT : BOLD 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.CAL_SUN{ FONT : BOLD 7PT/170% VERDANA; COLOR : #D36654; TEXT-ALIGN : CENTER;}
.CAL_SAT{ FONT : BOLD 7PT/170% VERDANA; COLOR : #3572A1; TEXT-ALIGN : CENTER;}
.CAL_TODAY{ FONT : BOLD 7PT/170% VERDANA; BACKGROUND : #E3E3E3; COLOR : #3D5586; TEXT-ALIGN : CENTER; }
.CAL_TR { }

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

TEXTAREA.TXTFLD{ TEXT-ALIGN:LEFT;height:13em;FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #C2C2C2; BACKGROUND:#FFF;
background-image:url(http://pds.exblog.jp/pds/1/200904/21/38/mini-flower.jpg);
background-position:95% 95%;
background-repeat:no-repeat;
}
/*コメント入力欄*/



3列スキンを使用する場合、左右のメニューに何を持ってくるかコントロールすることができます。

まずは、設定(Config)ページより、メニュー管理を選んでクリックします。

このような画面が見えます。

「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_838783.jpg


初期設定ですべて右欄にある各メニュー(「メモ帳」「以前の記事」など)を左に移したい場合は、メニューの名前をクリックして赤い枠を出し、それを今度は「上へ」をクリックし続けて右欄の一番上まで持っていきます。

「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_845495.jpg


右欄の一番上にきたメニューの名前をさらに「上へ」と送れば、そのメニューの名前は左に移動します。

「青い花の3列スキン」配布 「blue flowers 3C」 by Animal Skin_f0165338_8485430.jpg


左欄から右欄へ戻すときは、これを逆にすればOKというわけです。

こうして自分の好きなようにメニューを左右に振り分けることが可能なわけですが...

現在のロゴ画像カレンダーは、左側のトップがデフォルト位置のようです。

スキン編集初心者には分かりにくいと思うのでここでは詳しく説明しませんが、
現在のロゴ画像もカレンダー位置も、HTMLのメイン編集内で位置の変更は可能です。
Top▲ | by mari_ca by animal_skin | 2009-04-21 08:57 | 3列スキン
<< 黒のシンプル3列スキン配布 「... | ページトップ | 「スカル・ポップ・ブルー」スキ... >>
↓質問はこちらへ↓