-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
横メニュースキンvivid配布
2004年 12月 18日 |
b0052317_23535774.gif 画像を使わず、色指定だけで作ったスキンです。

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


メニューを横に並べました。
ただし、これは非常に使う条件が厳しいです(^^;

メニューをまず五つにすることが必要です。減らすことは可能ですが、増やそうとした場合、解像度の小さいモニタで見ている人にはかなり辛い状態になると思われます。
また増やすにしろ減らすにしろバランスよく配置するにはスキンの修正が必要になります。
しかもコメントやトラックバックは三つから五つの表示が限度です。それ以上でも表示はできますが、トップ部分が異様に長くなります。
スクロールを指定すれば、所定の高さに収めることができますが、スクロールがずらっと横に並んだ画面は見辛いですし、デザイン的にもかなり間抜けになるので入れておりません(^^;
更にブログタイトルが長い場合、折り返してしまう可能性が高いです。
メニューを増減したい、メニューを減らして代わりに外部リンクなどを入れたいという場合は、質問して下さい。方法をお教えします。
なお、赤い縦並びの部分には自由に書き込めるエリアを作っています。

このように色やフォントの指定以外の変更がかなり難しいスキンとなっていますが、お気に召したらどうぞ使ってやって下さいませ…って、こんなスキン使う人いるのやら_| ̄|○
b0052317_3295789.gif
こちらはおまけのロゴ用画像です。




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

<!--
このスキンの作成者は、月蝕 http://catsmoon.exblog.jp/ です。
素材も含めて著作権は月蝕に帰属します。 カスタマイズはご自由ですが、この著作権表示部分を削除改変することは認めません。必ず残して下さい。
またカスタマイズしたものを配布したい場合、必ず当ブログの利用規約を確認、ルールを守って配布して下さい。
-->
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT=200 width=100%>
<TR><TD class=menuy1>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV>
<DIV CLASS=USERMENU><$adminmenu type=2$></DIV>
</TD>
<$menuleft$>
</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>
<$calendar type=1$>
<div class=lmt>外部リンク</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: #880000; TEXT-DECORATION: NONE; }
A:VISITED{ COLOR: #880000; TEXT-DECORATION: NONE; }
A:ACTIVE{ COLOR: #880000; TEXT-DECORATION: NONE; }
A:HOVER{ COLOR: midnightblue; TEXT-DECORATION: none; }

.menuy1{ text-align:left; vertical-align:top; background-color: midnightblue;color:white;}
.menuy{width:16%; text-align:left; vertical-align:top; background-color: midnightblue;color:white;}
.menuy A:LINK {COLOR: #ffffff; TEXT-DECORATION: NONE}
.menuy A:VISITED {COLOR: #ffffff; TEXT-DECORATION: NONE}
.menuy A:HOVER {COLOR: #880000; 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:20px 5px 5px 5px;}

DIV.HEADER A:LINK { COLOR: darkred; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: darkred; 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: #880000; TEXT-DECORATION: none;}
DIV.USERMENU{ FONT : 9PT/100% Century Gothic,VERDANA; padding:20px 5px 5px 5px; }

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

.menu{ PADDING :10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:center;
background-color: darkred;color:white;
width:200px;}
.menu A:LINK {COLOR: #ffffff; TEXT-DECORATION: NONE}
.menu A:VISITED {COLOR: #ffffff; TEXT-DECORATION: NONE}
.menu A:HOVER {COLOR: midnightblue; TEXT-DECORATION: none;}

DIV.MN{ TEXT-ALIGN:LEFT; overflow-y:scroll; height:180px;color:white;}
DIV.MNTTL{ BORDER-BOTTOM : 1PX #AAA SOLID; PADDING : 10PX 5PX 0PX; MARGIN : auto;color:gray; }
DIV.MEMOBODY{ OVERFLOW : HIDDEN; }

.lmt{margin:25px 10px 0px 10px; color:midnightblue;text-align:left; border-bottom:1px #cccccc solid;padding:3px;width:180px;}
.lm{margin:3px 10px;color:#aaaaaa;text-align:left;width:180px; }

DIV.POST{ MARGIN : 30PX 20px 50px 30px; TEXT-ALIGN:LEFT;}
DIV.POST_HEAD{ BORDER-BOTTOM : 1PX darkred 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; }
.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 : 20PX 10PX; WIDTH : 180PX; TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD { WIDTH : 180PX; FONT : 8PT/150% Century Gothic,VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; margin:auto; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { WIDTH : 180PX; TEXT-ALIGN : CENTER;}
DIV.CAL_BOTTOM { }

.CAL{ FONT : 8pt/170% Century Gothic,VERDANA; TEXT-ALIGN : CENTER; color:#888888;}
.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

<td class=menuy>
<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV class=MN><$mnbody$></div>
</td>
-----------------------------------------------------------------------------------------------
背景画像の指定はありません。
青字の部分は、左側、赤い部分に外部リンクなど自由に書き込めるスペースです。
もし不要なら青字の部分を全部削除して下さい。
上下なら移動や繰り返しも可能です。
赤字の16%というのが、横メニューの幅指定です。現在、メニューが5つにあわせて設定しています。
メニューを4つにする時は20%に、6つにする時は14%にして下さい。この数値は、100/(メニューの数+1)で出しています。端数は切り捨てです。
[PR]
<< リニューアル準備でくたくたっす PageTop Moonスキン配付 >>
XML | ATOM

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