2005年 10月 12日
ヒコーキスキン配布
スキンの配布について
※配布スキンの表示確認はIE、Firefox、Safariでおこなっておりますが、状況によりレイアウト崩れを起こす可能性があります。スキン編集によるHTMLやCSSソースの破損は自己責任でご利用ください。
※レイアウト崩れは、エキサイトブログが提供して いるスキンを適用することで、再度マイブログを正しく表示させることができます。
iconからヒコーキスキンの配布です。
プレビュー画面はこちら
設置方法
エキサイトにログイン後、ブログ設定画面からスキン変更をクリック。
↓
「エキサイトブログ提供スキン | マイスキン」の「マイスキン」をクリック。
↓
「新しいスキン作成」をクリック
↓
「スキン作成を始めます！」をクリック
↓
レイアウト選択の画面が出ます。この中で「B. 2列のレイアウト-右側にメニュー
」を選択。「次へ」ボタンをクリック
■各部分別横幅を設定します。
「変更」ボタンをクリック。
↓
本文横幅を425Pixel
ロゴ横幅を170Pixel
メモ帳横幅を190Pixel
↓
「修正」ボタンをクリック
■ HTML編集を設定します
1.図のように全体を選んだ状態にします。
以下のタグに差し替えてください。================================================
<div id="main">
<div class="main_header">
<table width="760" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td valign="top" height="200">
<div class="HEADER"> <$header$></div>
<div class="URL"> <$blogurl$></div>
</td>
</tr>
<tr>
<td align="right" valign="top"><a href="http://iconweb.jp/"
target="_blank"><img src="http://iconweb.jp/blogskin/hikouki/img/back.gif"
alt="DESIGN by icon" width="365" height="20" border="0"></a></td>
</tr>
</table></div>
<table width="760" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td valign="top" width="500"><$post$>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" width="48%"><$prepage type=1$></td>
<td width="4%"></td>
<td align="left" width="48%"><$nextpage type=1$></td>
</tr>
</table>
<br />
<br />
</td>
<td valign="top" width="200">
<div class="USERMENU">
<$adminmenu type=1$></div>
<div class="PROFILE">
<CENTER><$logoimage type=1$></CENTER>
<div class="profile_body"><$description$>
<$nick$></div>
</div>
<$calendar type=1$>
<div class="MN">
<$menuright$>
<br /></div>
<$banner type=1$> <$xml$>
<div class="COPY">
<a href="http://iconweb.jp/" target="_blank">DESIGN by icon</a>
</div>
<br />
<br />
</td>
<td valign="top" width="60"></td>
</tr>
</table>
</div>
================================================
2.図のように本文セクションを選んだ状態にします。
以下のタグに差し替えてください。================================================
<div class="POST">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="POST_HEAD"><$postsubject$></div></td>
</tr>
<tr>
<td><div class="POST_ADMIN"><$postadmin type=1$></div></td>
</tr>
</table>
<div class="POST_BODY">
<$postcont$>
</div>
<div class="POST_TAIL" align="right"><$posttail$></div>
<$cmtjs$>
</div>
================================================
3.図のように右セクションを選んだ状態にします。
以下のタグに差し替えてください。================================================
<div class="MNTTL"><$mntitle$></div>
<div class="mnbody"><$mnbody$></div>
================================================
■ CSS編集を設定します
以下のタグに差し替えてください。
================================================
/* icon blog skin html */
/* body指定 */
BODY{ background-color: white; margin: 0px; padding: 0px }
BODY,TD,DIV,LI { color: #000000; font-size: small; line-height: 150%; font-family: Geneva, Arial, Helvetica, sans-serif}
/* リンク指定 */
A:LINK{ color: #4C9EFC; text-decoration: none }
A:VISITED{ color: #4C9EFC; text-decoration: none }
A:ACTIVE{ color: #4C9EFC; text-decoration: none }
A:HOVER{ color: #146AF4; text-decoration: underline }
#main { background: url(http://iconweb.jp/blogskin/hikouki/img/hikouki.gif) no-repeat; text-align: left; margin-right: auto; margin-left: auto; width: 760px }
.main_header { height: 275px }
/* ヘッター指定 */
DIV.HEADER{
text-align: left;
margin-top: 26px;
margin-left: 22px;
font-size: 26px;
line-height: 100%;
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: #146af4; TEXT-DECORATION: NONE; }
DIV.URL{
font: 10px/100% "Verdana";
text-align: left;
margin-top: 2px;
margin-right: 0px;
margin-left: 24px;
}
DIV.URL A:LINK {COLOR: #ffffff; TEXT-DECORATION: none}
DIV.URL A:VISITED {COLOR: #ffffff; TEXT-DECORATION: none}
DIV.URL A:HOVER {COLOR: #146af4; TEXT-DECORATION: underline;}
DIV.USERMENU { color: #666666; font: 10px/120% Verdana; text-align: center; margin-top: 45px; margin-bottom: 7px; width: 200px }
DIV.USERMENU A:LINK {COLOR: #666666; TEXT-DECORATION: none}
DIV.USERMENU A:VISITED {COLOR: #666666; TEXT-DECORATION: none}
DIV.USERMENU A:HOVER {COLOR: #6666CC; TEXT-DECORATION: underline;}
/* メニュー指定*/
DIV.PROFILE { line-height: 120%; background-color: #fff; padding: 0px 0px 6px; border: solid 1px #146af4; width: 200px; overflow: hidden }
DIV.profile_body { line-height: 130%; text-align: left; margin-top: 8px; padding-right: 6px; padding-left: 12px; width: 180px }
DIV.MN{ font-size: 10px; text-align: left }
DIV.MNTTL { font-weight: bold; font-size: 10px; background-color: #b9d9fe; text-align: center; margin: 20px 0px 6px; padding: 1px 0px 2px; width: 200px;color:#4c9efc;}
DIV.mnbody { text-align: left; margin-left: 4px }
DIV.MEMOBODY { font-size: 12px; width: 190px; overflow: hidden }
/* 本文指定 */
DIV.POST { background-color: #ffffff; text-align: left; margin-right: 22px; margin-bottom: 30px; margin-left: 23px; border: solid 1px #146AF4; width: 455px;}
DIV.POST_HEAD { font-weight: bold; font-size: 14px; line-height: 120%; margin-bottom: 15px; padding: 10px 8px 8px 12px; border-bottom: 1px dotted #146AF4;color:#146AF4;}
DIV.POST_ADMIN { text-align: right; padding-right: 12px }
DIV.POST_BODY { line-height: 150%; margin-bottom: 30px; padding-right: 12px; padding-left: 15px; width: 428px; overflow: hidden }
DIV.POST_BODY A:LINK { color: #66c; text-decoration: none }
DIV.POST_BODY A:VISITED { color: #66c; text-decoration: none }
DIV.POST_BODY A:HOVER { color: #66f; text-decoration: underline }
DIV.POST_TAIL { font: 10px/120% Verdana; background-color: #b9d9fe; text-align: right; margin-top: 10px; padding: 6px 12px 6px 15px;color:#4c9efc; }
/* コメント及びトラックバック指定*/
DIV.COMMENT{ background-color: #f5f5f5; padding: 10px 12px 10px 15px; border-top: 1px dotted #aaa }
DIV.COMMENT A:LINK { color: #669; text-decoration: none }
DIV.COMMENT A:VISITED { color: #669; text-decoration: none }
DIV.COMMENT A:HOVER { color: #66c; text-decoration: underline }
DIV.COMMENT_BODY{ MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%;}
DIV.COMMENT_TAIL { color: #777; font: 10px/150% Verdana; margin: 8px 0px 5px }
DIV.COMMENT_INPUT{ MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; }
DIV.COMMENT_LINE{ BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 6PX 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-top: 15px }
DIV.BANNER{ text-align: center; margin: 30px 0px 10px }
/* その他指定 */
.SMALL{ FONT-SIZE : 11PX; }
.DATE{ font: bold 10px/150% Verdana }
.TIME{ font: 10px/150% Verdana; text-align: left }
.AUTHOR{ font: bold 10px Verdana }
.TXTFLD{ FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }
.SUBMIT{ FONT :9PT/140% ;COLOR:#000; }
/* カレンダー指定 */
DIV.CAL_TOP { }
DIV.CAL { text-align: center; margin: 20px 0px 16px; width: 200px }
DIV.CAL_HEAD { font: 8pt Verdana; background-color: #b9d9fe; text-align: center; margin-bottom: 4px; padding: 1px 0px; width: 200px;font:bold; }
DIV.CAL_BODY { text-align: center; width: 200px }
DIV.CAL_BOTTOM { }
.CAL { color: #808080; font: 7pt/170% Verdana; text-align: center }
DIV.CAL A:LINK { color: #4c9efc; text-decoration: none }
DIV.CAL A:VISITED { color: #4c9efc; text-decoration: none }
DIV.CAL A:HOVER { color: #146af4; text-decoration: underline }
.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 { color: #808080; font: bold 7pt/170% Verdana; background-color: #ededed; text-align: center }
.CAL_TR { }
/*コピーライト表記 */
DIV.XML { font: 10px/150% Verdana; text-align: center }
.COPY{
FONT-SIZE:8PT;
TEXT-ALIGN:CENTER;
}
================================================
タグの改変が終了したら「プレビュー」ボタンをクリックし、確認を行う。
問題がなければ「保存」ボタンをクリック。
「スキン名」にはお好きな名前をお付けください。
「現在のスキンイメージ」は75Pixel×75Pixelの画像を設置します。
このイメージは必ず必要となります。お好きな画像を設定していただくか、以下の画像をダウンロードし、使用してください。
デザイン制作・ホームページ制作・SP制作のご相談はiconまでお問い合わせください。
by icon04
| 2005-10-12 16:23
| ブログスキン配布
