スキンの配布について

※配布スキンの表示確認はIE、Firefox、Safariでおこなっておりますが、状況によりレイアウト崩れを起こす可能性があります。スキン編集によるHTMLやCSSソースの破損は自己責任でご利用ください。
※レイアウト崩れは、エキサイトブログが提供して いるスキンを適用することで、再度マイブログを正しく表示させることができます。


iconからブルースキンの配布です。
シンプルで使いやすく、色も鮮やかです。
プレビュー画面はこちら

---

設置方法

エキサイトにログイン後、ブログ設定画面からスキン変更をクリック。
↓
「エキサイトブログ提供スキン | マイスキン」の「マイスキン」をクリック。
↓
「新しいスキン作成」をクリック
↓
「スキン作成を始めます！」をクリック
↓
レイアウト選択の画面が出ます。この中で「C.2列のレイアウト-左側にメニュー
」を選択。「次へ」ボタンをクリック


■各部分別横幅を設定します。
「変更」ボタンをクリック。
↓
本文横幅を490Pixel
ロゴ横幅を156Pixel
メモ帳横幅を156Pixel
↓
「修正」ボタンをクリック

■ HTML編集を設定します

1.図のように全体を選んだ状態にします。
　以下のタグに差し替えてください。
================================================
<TABLE WIDTH=754 BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER>
<TR><TD VALIGN=TOP WIDTH=754>
<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 BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER>
<TR><TD WIDTH=216 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 WIDTH=10><DIV STYLE='WIDTH:10PX;'></DIV></TD>
<TD WIDTH=528 VALIGN=TOP>
<DIV ID=RIGHT>
<$post$>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=500>
<TR><TD ALIGN=RIGHT WIDTH=240><$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_TOP><$postdate$></DIV>
<DIV CLASS=POST_BODY>
<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><$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:#FFFFFF;
MARGIN:0PX;
PADDING:10PX;}
BODY,TD,DIV,LI{ FONT-SIZE:SMALL;
FONT-FAMILY:VERDANA,ARIAL,SANS-SERIF;
LINE-HEIGHT:150%; COLOR:#000;}

/* リンク指定 */
A:LINK { COLOR:#66B3FF;TEXT-DECORATION:NONE}
A:VISITED{ COLOR:#66B3FF;TEXT-DECORATION:NONE}
A:ACTIVE{ COLOR:#66B3FF;TEXT-DECORATION:NONE}
A:HOVER { COLOR:#0558AB;TEXT-DECORATION:UNDERLINE}

/* ヘッター、メニュー指定 */
DIV#TOP {
BORDER-TOP : 1PX SOLID #032F5A;
BORDER-BOTTOM : 1PX SOLID #032F5A;
BACKGROUND:#66B3FF;
HEIGHT:70PX;
MARGIN-TOP:10PX;}

DIV#LEFT {
WIDTH:194PX;
MARGIN:10PX 0PX 50PX 0PX;
PADDING:10PX;
BACKGROUND:#FFFFFF;
BORDER:1PX #0558AB SOLID;}

DIV#RIGHT {
MARGIN-TOP:10PX;
MARGIN-BOTTOM:50PX;}

/* ヘッター指定 */
DIV.HEADER {
MARGIN-LEFT:10PX;
MARGIN-RIGHT:5PX;
MARGIN-TOP:10PX;
FONT-FAMILY:TAHOMA, VERDANA;
FONT-SIZE:12PT;
FONT-WEIGHT:BOLD;}

DIV.HEADER A:LINK {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #0558AB; TEXT-DECORATION: NONE}

DIV.URL {FONT-FAMILY : VERDANA, ;
FONT-SIZE : 8PT;
LETTER-SPACING : 1PX;}

DIV.URL A:LINK {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #FFFFFF; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #0558AB; TEXT-DECORATION: NONE}

.USERMENU {
MARGIN-TOP:0PX;
MARGIN-RIGHT:3PX;
MARGIN-BOTTOM:3PX;
vertical-align: bottom;
display: block;
text-align: right;
COLOR:#FFFFFF;}
.USERMENU A:LINK {COLOR: #0558AB; TEXT-DECORATION: NONE}
.USERMENU A:VISITED {COLOR: #0558AB; TEXT-DECORATION: NONE}
.USERMENU A:HOVER {COLOR: #FFFFFF; TEXT-DECORATION: NONE}


/* メニュー指定*/
DIV.PROFILE {
WIDTH : 192PX;
BACKGROUND : #FFFFFF;
BORDER: 1PX #0558AB SOLID;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 10PX;}

DIV.PROFILE_BODY {
MARGIN : 7PX;
BACKGROUND : #FFFFFF;
PADDING : 10PX;
OVERFLOW : HIDDEN;
LINE-HEIGHT : 130%;}

DIV.MN {MARGIN-TOP : 20PX;PADDING : 10PX;}


DIV.MNTTL {BACKGROUND-IMAGE : URL(http://iconweb.jp/blogskin/blue/img/bt.gif);
BACKGROUND-REPEAT : NO-REPEAT;
MARGIN-TOP : 20PX;
MARGIN-BOTTOM : 10PX;
PADDING : 0PX 0PX 2PX 15PX;
BORDER-BOTTOM : 1PX #0558AB DOTTED;
FONT-WEIGHT : BOLD;
LINE-HEIGHT : 120%;
COLOR:#0558AB;}

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

/* 本文指定 */
DIV.POST {PADDING-BOTTOM : 20PX;}

DIV.POST_TOP {
BORDER-TOP : 1PX SOLID #0558AB;
BORDER-BOTTOM : 1PX SOLID #0558AB;
PADDING : 2PX 15PX 1PX;
MARGIN-BOTTOM : 5PX;
FONT-FAMILY : VERDANA;
FONT-WEIGHT : BOLD;
LETTER-SPACING : 2PX;
COLOR : #FFFFFF;
BACKGROUND : #66B3FF;}

DIV.POST_HEAD {
BORDER-BOTTOM : 1PX #0558AB DOTTED;
PADDING-BOTTOM : 7PX;
MARGIN-BOTTOM : 20PX;}

DIV.POST_BODY {
BORDER : 1PX SOLID #0558AB;
BACKGROUND : #FFFFFF;
WIDTH : 495PX;
PADDING : 15PX;}

DIV.POST_BODY_SUB {WIDTH : 490PX;OVERFLOW : HIDDEN;}

DIV.POST_BODY_SUB A:LINK{ COLOR: #66B3FF;
TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY_SUB A:VISITED{ COLOR: #66B3FF;
TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY_SUB A:ACTIVE{ COLOR: #66B3FF;
TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY_SUB A:HOVER{ COLOR: #0558AB;
TEXT-DECORATION: UNDERLINE }

DIV.POST_TTL {FONT-WEIGHT : BOLD;COLOR : #0558AB;}

DIV.POST_TAIL {
PADDING-TOP : 25PX;
PADDING-BOTTOM : 25PX;
FONT-FAMILY : TAHOMA;
FONT-SIZE : 8PT;
TEXT-ALIGN : RIGHT;
COLOR : #0558AB;}

DIV.POST_EM {HEIGHT : 20PX;}

/* コメント及びトラックバック指定*/
DIV.COMMENT {
MARGIN-TOP : 30PX;
BORDER : 1PX #D3D3D3 SOLID;
BACKGROUND : #EDEDED;
PADDING : 15PX;
PADDING-TOP : 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 #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-SIZE : 10PT; COLOR : #596A75;
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 {
WIDTH : 206PX;
MARGIN-LEFT : 10PX;
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; BACKGROUND:WHITE}


/* カレンダー指定 */
DIV.CAL_TOP {}

DIV.CAL {
WIDTH : 192PX;
BACKGROUND : #FFFFFF;
BORDER : 1PX #0558AB SOLID;
LINE-HEIGHT : 150%;
MARGIN-BOTTOM : 20PX;
PADDING : 10PX 0PX;
TEXT-ALIGN : CENTER;}

DIV.CAL_HEAD {
WIDTH : 146PX;
MARGIN : 0PX 10PX;
PADDING : 6PX 12PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
FONT-WEIGHT:BOLD;
TEXT-ALIGN : CENTER;
BORDER:1PX #0558AB SOLID;}

DIV.CAL_BODY {
WIDTH : 166PX;
PADDING : 12PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
BACKGROUND : #FFF;}

DIV.CAL_BOTTOM {}
.CAL A:LINK{COLOR : #66B3FF;}
.CAL A:VISITED {COLOR : #66B3FF;}
.CAL A:ACTIVE {COLOR : #66B3FF;}
.CAL A:HOVER {COLOR : #0558AB;}

.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 : #D36654;
TEXT-ALIGN : CENTER;}

.CAL_SAT {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3572A1;
TEXT-ALIGN : CENTER;}

.CAL_TODAY {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
COLOR:#66B3FF;
BORDER:1PX #0558AB SOLID;}

.CAL_TR {BACKGROUND : #FFF;}

/*コピーライト表記 */
DIV.XML {
WIDTH : 206PX;
MARGIN-LEFT : 10PX;
MARGIN-BOTTOM : 10PX;
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
COLOR:#0558AB;}
.COPY{FONT-SIZE:8PT;TEXT-ALIGN:CENTER;}
================================================

---

タグの改変が終了したら「プレビュー」ボタンをクリックし、確認を行う。
問題がなければ「保存」ボタンをクリック。
「スキン名」にはお好きな名前をお付けください。
「現在のスキンイメージ」は75Pixel×75Pixelの画像を設置します。
このイメージは必ず必要となります。お好きな画像を設定していただくか、以下の画像をダウンロードし、使用してください。

デザイン制作・ホームページ制作・SP制作のご相談はiconまでお問い合わせください。