-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
3列変形横メニュースキン配布
2004年 12月 25日 |
b0052317_23421480.gif以前に上部横にメニューが表示されるスキンを公開しましたが、かなりメニューを限定しないと使えない代物でした(^^;
なので、3列スキンを変形させて、上と左に表示されるようにしたものが今回のスキンです。

プレビューページ>>
※プレビューページにはトップ、ログインなどのユーザーメニューと、記事の編集などのメニューは出ません。
メニューも、上下や左右の振り分けを認識しないため綺麗な配置になっていません。
リンクは無効になっているため、コメントを開くこともできません。雰囲気を見るだけのものとご了承下さい。


今回のスキンではカレンダーも自由に書き込めるエリアも上に移動させましたので、上部に入れられるメニューは二つです。
自由に書き込めるエリアを削れば、三つ入れられます。
(削った場合、必ず三つにして下さい。二つのままだと表示が崩れる可能性があります)
上があまり長くなると間延びしたデザインになりますので、カテゴリ、以前の記事くらいを入れておくのがよいかと思います。
また左メニューにも別に自由に書き込めるエリアを用意していますので、上の自由エリアを削った場合、そちらにどうぞ。
このスキンは、CSSの指定が複雑になっていますので、慣れない方は自由エリアを書き換える以外はこのままご使用になるのがよいと思います。色を変えるだけでも、何カ所も変更が必要になります(^^;
(背景画像だけなら大丈夫です)

なお、このスキンの場合、設定途中でプレビューしてもメニューが分かれないので崩れて見えますが、そのまま保存して下さい。
適用してから、メニュー設定画面で、右側にずらっと来ているメニューの内、カテゴリ、以前の記事だけを右に残し、残りは「上へ」を使って左に全部移すと、左側のメニューが左に、右側のメニューが上に表示されて丁度よくなります。


b0052317_14572331.jpg
おまけのロゴ用画像です。ご自由にどうぞ。

では、説明が長くなりましたが、ソースをどうぞ。






素材は自作です。色違いは猫の散歩道内にあります。
  



3列のレイアウト (オリジナル)  本文 500-ロゴ150- メニュー 150
------------------------------------------------------------------------------------------
★メインページ用HTML

<!--
このスキンの作成者は、月蝕 http://catsmoon.exblog.jp/ です。
素材も含めて著作権は月蝕に帰属します。 カスタマイズはご自由ですが、この著作権表示部分を削除改変することは認めません。必ず残して下さい。
またカスタマイズしたものを配布したい場合、必ず当ブログの利用規約を確認、ルールを守って配布して下さい。
-->

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 width="100%" style="border-bottom:2px #aaaaaa solid;">
<TR><TD class=menuy valign=top>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV>
</td>
<td class=menuy rowspan=2 valign=top>
<DIV CLASS=MNTTL>● 外部リンク1</DIV>
<DIV class=MN>自由にどうぞ</div>
</td>

<$menuright$>
<td class=menuy rowspan=2 valign=top>
<$calendar type=1$>
</td>
</TR>
<tr><TD class=menuy valign=bottom>
<DIV CLASS=USERMENU><$adminmenu type=2$></DIV>
</TD>
</tr></TABLE>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER width=100%>
<TR><TD VALIGN=TOP CLASS=menu>
<$logoimage type=1$>
<p class=prof><$description$>
<$nick$></p>
<$menuleft$>
<DIV CLASS= lmt >● 外部リンク2</DIV>
<DIV CLASS= lm>ここも自由にどうぞ</DIV>

<$banner type=1$>
<$xml$>
<div class=XML>The Original by <a href="http://catsmoon.exblog.jp/" target="_blank">Sun&Moon</a></div>
</TD>
<TD VALIGN=TOP>
<$post$>
<div class=page>
<span class=page><$prepage type=1$></span>
<span class=page><$nextpage type=1$></span>
</div>
</TD></TR>
</TABLE>
------------------------------------------------------------------------------------------
★CSS

/* excite blog default skin html */

BODY { BACKGROUND : white; MARGIN : 0PX;PADDING : 0PX; }
BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : Century Gothic,Hiragino Maru Gothic Pro,VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #555555; }

A:LINK { COLOR: midnightblue; TEXT-DECORATION: NONE; }
A:VISITED { COLOR: midnightblue; TEXT-DECORATION: NONE; }
A:ACTIVE { COLOR: midnightblue; TEXT-DECORATION: NONE; }
A:HOVER { COLOR: #5A92A6; TEXT-DECORATION: none; }

.menuy{width:20%; text-align:left; background-color: #9DBCC7;color:#555555; padding:5px;} /*ここが上部横メニューの指定箇所です。*/
.menuy A:LINK {COLOR: #ffffff; TEXT-DECORATION: NONE}
.menuy A:VISITED {COLOR: #ffffff; TEXT-DECORATION: NONE}
.menuy A:HOVER {COLOR: midnightblue; TEXT-DECORATION: none;}

.prof{text-align:left;WIDTH : 180PX; margin:auto;}

DIV.HEADER { FONT : 13pt/100% Century Gothic,Courier New,TAHOMA; TEXT-ALIGN:LEFT;padding:10px 5px 5px 5px;}

DIV.HEADER A:LINK { COLOR: midnightblue; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: midnightblue; TEXT-DECORATION: NONE; }
DIV.HEADER A:HOVER { COLOR: #888; TEXT-DECORATION: NONE; }

DIV.URL { FONT : 8pt/100% Century Gothic,VERDANA,TAHOMA; TEXT-ALIGN:LEFT;padding:0px 5px 5px 5px;}
DIV.URL A:LINK {COLOR: #ffffff; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #ffffff; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: midnightblue; TEXT-DECORATION: none;}
DIV.USERMENU { FONT : 9PT/100% Century Gothic,VERDANA; padding:5px; }

DIV.USERMENU A:LINK {COLOR: #444444; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #444444; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #ffffff; TEXT-DECORATION: none;}

.menu { PADDING :10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:center;border-right:2px #aaaaaa solid;
background-image:url("http://pds.exblog.jp/pds/1/200412/25/17/tile.gif");
;color:#444444;
width:200px;} /*ここが左メニューの指定箇所です。*/
.menu A:LINK {COLOR: midnightblue; TEXT-DECORATION: NONE}
.menu A:VISITED {COLOR: midnightblue; TEXT-DECORATION: NONE}
.menu A:HOVER {COLOR: #ffffff; TEXT-DECORATION: none;}

DIV.MN { TEXT-ALIGN:LEFT; overflow-y:scroll; color:white;} /*ここが上部横メニューの本文指定箇所です。*/
DIV.MNTTL { BORDER-BOTTOM : 1PX #888888 SOLID; PADDING : 10PX 5PX 0PX; MARGIN : auto;color:#555555; } /*ここが上部横メニューのタイトル指定箇所です。*/
DIV.MEMOBODY { OVERFLOW : HIDDEN; }

.lmt{margin:25px 10px 0px 10px; color:midnightblue;text-align:left; border-bottom:1px #aaaaaa solid;padding:3px;width:180px; color:#666666;} /*ここが左メニューのタイトル指定箇所です。*/
.lm{margin:3px 10px;color:#666666;text-align:left;width:180px; } /*ここが左メニューの本文指定箇所です。*/

DIV.POST { MARGIN : 30PX 20px 50px 30px; TEXT-ALIGN:LEFT;}
DIV.POST_HEAD { BORDER-BOTTOM : 1PX #BED2D9 SOLID; MARGIN-BOTTOM : 5PX; PADDING-BOTTOM : 3PX; }
.POST_TTL { FONT-size : 11pt ;color:midnightblue;}
DIV.POST_ADMIN { TEXT-ALIGN : RIGHT;}
DIV.POST_BODY { LINE-HEIGHT : 150%; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }
DIV.POST_TAIL { FONT : 11PX/150% Century Gothic,TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

DIV.COMMENT { BORDER : 1PX #D3D3D3 SOLID; 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% Century Gothic,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; }

.pt{text-align:right;margin:3px 10px 10px 0px; }
.page{text-align:center; padding:20px;}

DIV.TRACK_TOP { LINE-HEIGHT : 170%; }
DIV.ARCHIVE_HEAD { 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; TEXT-ALIGN:LEFT}
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; color:#888888;}
.DATE { FONT : 8PT/150% Century Gothic,TAHOMA; }
.TIME { FONT : 8PT/150% Century Gothic,TAHOMA; TEXT-ALIGN : LEFT; }
.AUTHOR { FONT : 8PT Century Gothic,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 : 10PX 10px 0px; TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD { FONT : 8PT/150% Century Gothic,VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; margin:auto; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { TEXT-ALIGN : CENTER;}
DIV.CAL_BOTTOM { }

.CAL { FONT : 8pt/170% Century Gothic,VERDANA; TEXT-ALIGN : CENTER; color:#444444;}
.CAL_DAY { FONT : 8pt/170% Century Gothic,VERDANA; TEXT-ALIGN : CENTER; }
.CAL_SUN { FONT : 8pt/170% Century Gothic,VERDANA; COLOR : #D36654; TEXT-ALIGN : CENTER; }
.CAL_SAT { FONT : 8pt/170% Century Gothic,VERDANA; COLOR : #3572A1; TEXT-ALIGN : CENTER; }
.CAL_TODAY { FONT : 8pt/170% Century Gothic,VERDANA; BACKGROUND : #E3E3E3; COLOR : #3D5586; TEXT-ALIGN : CENTER; }
.CAL_TR { }

DIV.XML { FONT : 8PT/150% Century Gothic,VERDANA; TEXT-ALIGN : CENTER; }
------------------------------------------------------------------------------------------
★本文用HTML

<DIV CLASS=POST>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD WIDTH=80% class=POST_TTL>● <$postsubject$></TD>
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=2$></TD>
</TR>
</TABLE>
</DIV>
<div class=pt><$postdate$></div>
<DIV CLASS=POST_BODY>
<$postcont$>
</DIV>
<DIV CLASS=POST_TAIL ALIGN=RIGHT><$posttail$></DIV>
<$cmtjs$>
</DIV>
------------------------------------------------------------------------------------------
★左メニュー用HTML

<DIV CLASS= lmt >● <$mntitle$></DIV>
<DIV CLASS= lm><$mnbody$></DIV>
------------------------------------------------------------------------------------------
★右メニュー用HTML(こちらが上メニュー)

<td class=menuy rowspan=2 valign=top>
<DIV CLASS=MNTTL>● <$mntitle$></DIV>
<DIV class=MN><$mnbody$></div>
</td>
------------------------------------------------------------------------------------------
背景指定はCSS内に一カ所(赤字)
青字の自由なエリアはメインページ用HTML内に二カ所ありますが、1と2ではデザインがことなります。
差し替えはできません。
2は不要なら、ただ削ればOKですし、<$menuright$>の下から上に移動やコピーして増やすこともできます。

ですが、1を増減する場合、必ず .menuy{width:20%;(赤字)の数字をメニューの数+タイトル部1+カレンダー部1+(自由エリアの数)で100を割った数字に変更して下さい。
(現在は、タイトル1+自由エリア1+メニュー2+カレンダー1=5で、一つ当たりの幅が20%になっています。)
また位置を左右に動かす場合、必ず青字の部分「<td class=menuy rowspan=2 valign=top><DIV CLASS=MNTTL>● 外部リンク1</DIV><DIV class=MN>自由にどうぞ</div></td>」全体、つまりtdから/tdまでを一つとして移動して下さい。
中身だけ動かすと崩れます。
これはカレンダーを動かす時も同じです。
ただし、タイトル、URL、ユーザーメニューの部分はHTML、CSSに詳しくないと移動はやめておきましょう(^^;

そのまま使えば、恐らくまず崩れはないと思いますが(Mac OS10.3 Safari IE Firefox Netscape Operaで確認済み。Winは未確認ですが、多分大丈夫かと)変更する場合は、慎重にした方がよいと思います(^^;
変更についてや、メニューの設定の仕方がわからない場合は、遠慮なく聞いて下さい。
[PR]
<< 和風白緑スキン2配布 PageTop 配布スキンの設定方法 >>
XML | ATOM

個人情報保護
情報取得について
免責事項
Blue Paper Skin by Sun&Moon