2006年 03月 24日
ビタミンピンクスキン配布
スキンの配布について
※配布スキンの表示確認はIE、Firefox、Safariでおこなっておりますが、状況によりレイアウト崩れを起こす可能性があります。スキン編集によるHTMLやCSSソースの破損は自己責任でご利用ください。
※レイアウト崩れは、エキサイトブログが提供しているスキンを適用することで、再度マイブログを正しく表示させることができます。
iconからスキンの配布です。
プレビュー画面はこちら
設置方法
エキサイトにログイン後、ブログ設定画面からスキン変更をクリック。
↓
「エキサイトブログ提供スキン | マイスキン」の「マイスキン」をクリック。
↓
「新しいスキン作成」をクリック
↓
「スキン作成を始めます！」をクリック
↓
レイアウト選択の画面が出ます。この中で「C.2列のレイアウト-左側にメニュー
」を選択。「次へ」ボタンをクリック
■各部分別横幅を設定します。
「変更」ボタンをクリック。
↓
本文横幅を560Pixel
ロゴ横幅を180Pixel
メモ帳横幅を180Pixel
↓
「修正」ボタンをクリック
■ HTML編集を設定します
1.図のように全体を選んだ状態にします。
以下のタグに差し替えてください。================================================
<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER>
<TR><TD VALIGN=TOP>
<DIV ID=TOP>
<DIV CLASS=HEADER><$header$>
<DIV CLASS=URL><$blogurl$><SPAN CLASS=USERMENU><$adminmenu type=1$></SPAN></DIV></DIV>
</DIV>
<DIV CLASS=TOPLINE></DIV>
</TD></TR></TABLE>
<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER CLASS="BACK">
<TR><TD VALIGN=TOP>
<DIV ID=LEFT>
<DIV CLASS=PROFILE>
<DIV CLASS=PROFILE_BODY>
<CENTER><$logoimage type=1$></CENTER>
<$description$><$nick$>
</DIV>
</DIV>
<$calendar type=1$>
<DIV CLASS=MN>
<$menuleft$>
</DIV>
</DIV>
<$banner type=1$>
<$xml$>
<DIV CLASS="COPY">
<a href="http://iconweb.jp/" target="_blank">DESIGN by icon</a>
</DIV>
</TD>
<TD><DIV STYLE='WIDTH:15PX;'></DIV></TD>
<TD VALIGN=TOP>
<DIV ID=RIGHT>
<$post$>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD ALIGN=RIGHT ><$prepage type=1$></TD>
<TD WIDTH=20></TD>
<TD ALIGN=LEFT WIDTH=240><$nextpage type=1$></TD></TR>
</TABLE>
</DIV>
</TD></TR></TABLE>
================================================
2.図のように左セクションを選んだ状態にします。
以下のタグに差し替えてください。================================================
<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS=MNBODY><$mnbody$></DIV> ================================================
3.図のように本文セクションを選んだ状態にします。
以下のタグに差し替えてください。================================================
<DIV CLASS=POST>
<DIV CLASS=POST_BODY>
<DIV CLASS=POST_TOP><$postdate$></DIV>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD WIDTH=400><DIV CLASS=POST_TTL><$postsubject$></DIV></TD>
<TD WIDTH=100 ALIGN=RIGHT CLASS="LOG"><$postadmin type=1$></TD></TR>
</TABLE>
</DIV>
<DIV CLASS=POST_BODY_SUB><$postcont$></DIV>
<DIV CLASS=POST_TAIL><$posttail$></DIV>
<$cmtjs$></DIV></DIV><DIV CLASS=POST_EM></DIV>
================================================
■ CSS編集を設定します
以下のタグに差し替えてください。
================================================
/* icon blog skin html */
/* body指定 */
BODY { BACKGROUND : #FFF0F8; MARGIN : 0PX;PADDING : 0PX; }
BODY,TD,DIV,LI{ FONT-SIZE:SMALL;
FONT-FAMILY:VERDANA,ARIAL,SANS-SERIF;
LINE-HEIGHT:150%;}
/* リンク指定 */
A:LINK { COLOR:#0066CC;TEXT-DECORATION:NONE}
A:VISITED{ COLOR:#0066CC;TEXT-DECORATION:NONE}
A:ACTIVE{ COLOR:#0066CC;TEXT-DECORATION:NONE}
A:HOVER { COLOR:#FF154D;TEXT-DECORATION:UNDERLINE}
/* ヘッター、メニュー指定 */
DIV#TOP {
HEIGHT:189PX;
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200603/24/76/vitamin_pink_topimg.gif);
BACKGROUND-REPEAT : NO-REPEAT;}
DIV#LEFT {
WIDTH : 180PX;
LINE-HEIGHT : 150%;
MARGIN-BOTTOM : 20PX;
BACKGROUND : #FF9CD0;
MARGIN-LEFT:20PX;
}
DIV#RIGHT {
MARGIN-TOP:10PX;
MARGIN-BOTTOM:50PX;
BACKGROUND : #FF9CD0;
WIDTH:500PX;
}
.BACK {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200603/24/76/vitamin_pink_back.gif);
BACKGROUND-REPEAT : REPEAT-Y;}
/* ヘッター指定 */
DIV.HEADER {
PADDING-LEFT:25PX;
PADDING-RIGHT:5PX;
PADDING-TOP:25PX;
FONT-FAMILY:TAHOMA, VERDANA;
FONT-SIZE:12PT;
FONT-WEIGHT:BOLD;}
DIV.HEADER A:LINK {COLOR: #FF154D; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #FF154D; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
DIV.URL {FONT-FAMILY : VERDANA, ;
FONT-SIZE : 8PT;
LETTER-SPACING : 1PX;}
DIV.URL A:LINK {COLOR: #FF154D; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #FF154D; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
.USERMENU {
PADDING-TOP:90PX;
PADDING-RIGHT:10PX;
PADDING-BOTTOM:3PX;
vertical-align: bottom;
display: block;
text-align: right;
COLOR:#0078E8;}
.USERMENU A:LINK {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
.USERMENU A:VISITED {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
.USERMENU A:HOVER {COLOR: #FF154D; TEXT-DECORATION: NONE}
/* メニュー指定*/
DIV.PROFILE {
BACKGROUND : #FFFFFF;
BORDER: 1PX #FF154D SOLID;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 20PX;
MARGIN-TOP : 10PX;
}
DIV.PROFILE_BODY {
MARGIN : 0PX;
PADDING:8PX;
BACKGROUND : #FFFFFF;
OVERFLOW : HIDDEN;
LINE-HEIGHT : 130%;}
DIV.MN {MARGIN-TOP : 20PX;PADDING : 0PX;
COLOR:#0079E8;}
DIV.MNTTL {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200603/24/76/vitamin_pink.gif);
BACKGROUND-REPEAT : NO-REPEAT;
height: 35px;
width: 186px;
text-decoration: none;
color: #0078E8;
margin: 0px;
padding-top: 7px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 0px;
display: block;
font-weight: bold;
margin-top:10px;}
.MNBODY A:LINK { COLOR:#FFFFFF;TEXT-DECORATION:NONE}
.MNBODY A:VISITED{ COLOR:#FFFFFF;TEXT-DECORATION:NONE}
.MNBODY A:ACTIVE{ COLOR:#FFFFFF;TEXT-DECORATION:NONE}
.MNBODY A:HOVER { COLOR:#0066CC;TEXT-DECORATION:UNDERLINE}
DIV.MEMOBODY {OVERFLOW : HIDDEN;}
DIV.MNBODY {
PADDING-LEFT:10PX;}
/* 本文指定 */
DIV.POST_TOP {
PADDING : 5PX 15PX 15PX 0PX;
FONT-FAMILY : VERDANA;
FONT-WEIGHT : BOLD;
COLOR:#0066CC;
LETTER-SPACING : 2PX;}
DIV.POST_HEAD {
BORDER-BOTTOM : 1PX #0066CC DOTTED;
PADDING-BOTTOM : 7PX;
MARGIN-RIGHT:10PX;}
DIV.POST_BODY {
PADDING : 15PX 15PX 15PX 15PX;
MARGIN:0PX 0PX 30PX 0PX;
BACKGROUND:#FFFFFF;
BORDER:1PX #FF154D SOLID;}
DIV.POST_BODY_SUB {OVERFLOW : HIDDEN;PADDING-TOP:10PX;}
DIV.POST_BODY_SUB A:LINK{ COLOR: #FF154D;
TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY_SUB A:VISITED{ COLOR: #FF154D;
TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY_SUB A:ACTIVE{ COLOR: #FF154D;
TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY_SUB A:HOVER{ COLOR: #0066CC;
TEXT-DECORATION: UNDERLINE }
DIV.POST_TTL {FONT-WEIGHT : BOLD;COLOR : #0066CC;}
DIV.POST_TAIL {
PADDING-TOP : 15PX;
PADDING-BOTTOM : 0PX;
FONT-FAMILY : TAHOMA;
FONT-SIZE : 8PT;
TEXT-ALIGN : RIGHT;
COLOR : #FF154D;}
.POST_TAIL A:LINK{COLOR : #0066CC;}
.POST_TAIL A:VISITED {COLOR : #0066CC;}
.POST_TAIL A:ACTIVE {COLOR : #0066CC;}
.POST_TAIL A:HOVER {COLOR : #FF154D;}
DIV.POST_EM {}
.LOG A:LINK{COLOR : #0066CC;}
.LOG A:VISITED {COLOR : #0066CC;}
.LOG A:ACTIVE {COLOR : #0066CC;}
.LOG A:HOVER {COLOR : #FF154D;}
/* コメント及びトラックバック指定*/
.COMMENT A:LINK{COLOR : #0066CC;}
.COMMENT A:VISITED {COLOR : #0066CC;}
.COMMENT A:ACTIVE {COLOR : #0066CC;}
.COMMENT A:HOVER {COLOR : #FF154D;}
DIV.COMMENT {
MARGIN-TOP : 30PX;
BORDER : 1PX #FF154D SOLID;
BACKGROUND : #FFF0F8;
PADDING : 10PX;}
DIV.COMMENT_BODY {
MARGIN-TOP : 6PX;
MARGIN-BOTTOM : 20PX;
LINE-HEIGHT : 130%;}
DIV.COMMENT_TAIL {
MARGIN-TOP : 8PX;
MARGIN-BOTTOM : 5PX;
FONT-FAMILY : VERDANA, TAHOMA, ;
FONT-SIZE : 8PT;
COLOR : #717171;}
DIV.COMMENT_INPUT {
MARGIN-TOP : 20PX;
BORDER-TOP : 1PX #FF154D DOTTED;
PADDING-TOP : 20PX;}
DIV.COMMENT_LINE {
BORDER-TOP : 1PX #FF154D DOTTED;
MARGIN : 10PX;}
DIV.TRACK_TOP {LINE-HEIGHT : 170%;}
DIV.ARCHIVE_HEAD {
FONT-SIZE : 10PT; COLOR : #FF154D;
FONT-WEIGHT : BOLD;
MARGIN-BOTTOM : 10PX;}
DIV.ARCHIVE_BODY {
MARGIN-BOTTOM : 30PX;
LINE-HEIGHT : 160%;
PADDING-BOTTOM : 100PX;}
/*画像指定*/
IMG.IMAGE_TOP {MARGIN-BOTTOM : 15PX;}
IMG.IMAGE_LEFT {MARGIN-RIGHT : 15PX;MARGIN-BOTTOM : 10PX;}
IMG.IMAGE_RIGHT {MARGIN-LEFT : 10PX;MARGIN-BOTTOM : 10PX;}
IMG.IMAGE_MID {MARGIN-TOP : 15PX;MARGIN-BOTTOM : 15PX;}
IMG.USERMENU {MARGIN-LEFT : 8PX;}
IMG.BOOKMK {MARGIN : 10PX;BORDER : 0PX;}
IMG.LOGO {MARGIN-BOTTOM : 10PX;}
DIV.BANNER {
MARGIN-BOTTOM : 10PX;
TEXT-ALIGN : CENTER;}
/* その他指定 */
.SMALL {FONT-SIZE : 8PT;}
.DATE {
FONT-FAMILY : TAHOMA, ;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;}
.TIME {
FONT-FAMILY : TAHOMA, ;
FONT-SIZE : 8PT;
TEXT-ALIGN : LEFT;}
.AUTHOR {FONT-SIZE : 9PT;FONT-WEIGHT : BOLD;}
.TXTFLD {FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678;}
/* カレンダー指定 */
DIV.CAL_TOP {}
DIV.CAL {
WIDTH : 180PX;
BACKGROUND : #FFFFFF;
BORDER : 1PX #FF154D SOLID;
LINE-HEIGHT : 150%;
MARGIN-BOTTOM : 20PX;
TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD {
padding:5px;
MARGIN : 8PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
FONT-WEIGHT:BOLD;
TEXT-ALIGN : CENTER;
BORDER:1PX #FF154D SOLID;}
DIV.CAL_BODY {
PADDING : 12PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
BACKGROUND : #FFF;}
DIV.CAL_BOTTOM {}
.CAL A:LINK{COLOR : #FF154D;}
.CAL A:VISITED {COLOR : #FF154D;}
.CAL A:ACTIVE {COLOR : #FF154D;}
.CAL A:HOVER {COLOR : #0066CC;}
.CAL {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 150%;}
.CAL_DAY {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 150%;}
.CAL_SUN {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #FF0000;
TEXT-ALIGN : CENTER;}
.CAL_SAT {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #0000FF;
TEXT-ALIGN : CENTER;}
.CAL_TODAY {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
COLOR:#0066CC;
BORDER:1PX #0066CC SOLID;}
.CAL_TR {BACKGROUND : #FFF;}
/*コピーライト表記 */
DIV.XML {
MARGIN-BOTTOM : 10PX;
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
COLOR:#FFFFFF;}
.COPY{FONT-SIZE:8PT;TEXT-ALIGN:CENTER;}================================================
タグの改変が終了したら「プレビュー」ボタンをクリックし、確認を行う。
問題がなければ「保存」ボタンをクリック。
「スキン名」にはお好きな名前をお付けください。
「現在のスキンイメージ」は75Pixel×75Pixelの画像を設置します。
このイメージは必ず必要となります。お好きな画像を設定していただくか、以下の画像をダウンロードし、使用してください。
デザイン制作・ホームページ制作・SP制作のご相談はiconまでお問い合わせください。
by icon04
| 2006-03-24 21:32
| ブログスキン配布
