エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
| S M T W T F S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 白・淡色背景(160) 3列(160) 右2列(150) 中間色背景(143) 左2列(112) 通年(88) 秋(66) 夏(62) 春(55) 黒・濃色背景(52) 初夏(52) 冬(49) ビビッド背景(37) その他背景(30) 正月(21) X'mas(20) css(14) Tips(13) バレンタイン(10) |
 図1今回はとことん余計なCSS指定を削ったスキンです。プレビューページ>> ※プレビューページにはトップ、ログインなどのユーザーメニューと、記事の編集などのメニューは出ません。メニューも、上下や左右の振り分けを認識しないため綺麗な配置になっていません。リンクは無効になっているため、コメントを開くこともできません。雰囲気を見るだけのものとご了承下さい。何に使うかというと、カスタマイズの土台として使います。エキサイトのオリジナル用のスキンって、それでも結構ごちゃごちゃ指定が入っていて、慣れるまで相当改造しにくいです。これは、凝ったデザインには出来ませんが、色や壁紙を替えるだけでいいという方には、指定すべき箇所を減らしていますのでわかりやすいと思います。そういう訳で、これは好きに変えてもらうのが前提のスキンですから、ソースの中に、ここは何の指定というコメントを入れています。変えたい時はそこだけ変えて下さい。また絶対値の指定もとことん外しています。左右の割合もページ全体に対する%指定だけとしていますので、モニタのサイズもあまり気にしなくて大丈夫ですし、うっかりどこか消しちゃったりしても、全く読めないとか、横スクロールが異様に長くなったとかいう危険もほとんどないはずです。  図2ええ、見るからに悪趣味な色使いですが、これは説明をわかりやすくするためです(^^;このような色指定にはしていませんのでご安心下さい。では、ソースをどうぞ。------------------------------------------------------------------------------------------2列のレイアウト(右) オリジナル 本文 500-ロゴ150- メニュー 150一応本文、ロゴ、メニューの指定はデフォルトのままにしていますが、これはあまり関係ありません。放っておいていいですし、ロゴなどもう少し大きくしてもよいです。------------------------------------------------------------------------------------------★メインページ用HTML<$header$> <$blogurl$> <$adminmenu type=2$> | <$post$> <$prepage type=1$> <$nextpage type=1$> | <$logoimage type=1$><$description$><$nick$><$calendar type=1$> 外部リンクなど ここに自由にどうぞ<$menuright$><$banner type=1$><$xml$> |
------------------------------------------------------------------------------------------★CSS/* excite blog skin css */BODY{ BACKGROUND : #888888 ; /* ページ全体の背景色。この図では全部隠れてますが図1では灰色が出ています */ /* background-image:url(""); background-repeat:repeat; background-attachment:fixed;*/MARGIN : 0PX ; PADDING : 0PX ; }BODY,TD,DIV,LI{ FONT-SIZE : 9pt ; /* 全体の文字サイズ */ FONT-FAMILY : Comic Sans MS,VERDANA,ARIAL,SANS-SERIF ; /* 全体のフォント指定 */ LINE-HEIGHT : 150%; COLOR : #444444 ; /* 全体の文字色 */ }A:LINK{ COLOR: #000000 ; TEXT-DECORATION: NONE; } /* 全体のリンク色 */ A:VISITED{ COLOR: #000000 ; TEXT-DECORATION: NONE; } /* 全体のリンク色 */ A:ACTIVE{ COLOR: #000000 ; TEXT-DECORATION: NONE; } /* 全体のリンク色 */ A:HOVER{ COLOR: #880000 ; TEXT-DECORATION: none; } /* 全体のリンク色 */ .top{background-color: #ffffff ; /* トップ部分の背景色。図1でも2でも白になっています。 */ /* background-image:url(""); background-repeat:repeat;*/padding:10px;border-bottom : 3px #000000 solid ; /* トップ部分の下のボーダーライン 。図1でも2でも黒になっています。*/ margin:0px;}.top A:LINK {COLOR: #880000 ; TEXT-DECORATION: NONE} /* トップ部分のリンク色 */ .top A:VISITED {COLOR: #880000 ; TEXT-DECORATION: NONE} /* トップ部分のリンク色 */ .top A:HOVER {COLOR: #000000 ; TEXT-DECORATION: none;} /* トップ部分のリンク色 */ /* 本文部分の指定。図2では赤い部分です。今は背景色#ffffffをコメントアウトして色の指定はありません。色を指定したい場合は、コメントアウトの記号を消して有効にして下さい。 */ .left{ padding:30px 20px; /* background-color:#fffff;*/ /* background-image:url(""); background-repeat:repeat;*/}/* メニュー部分の指定。図2では青い部分です。今は背景色#ffffffをコメントアウトして色の指定はありません。色を指定したい場合は、コメントアウトの記号を消して有効にして下さい。 */ .right{ /* background-color:#fffff;*/ /* background-image:url(""); background-repeat:repeat;*/width:20%; /* メニュー部分の幅（ページ全体の○％あるいは○pxを指定） */ padding:30px 20px;}/* メニュー内側部分の指定。図2では緑の部分です。今は背景色#ffffffをコメントアウトして色の指定はありません。色を指定したい場合は、コメントアウトの記号を消して有効にして下さい。 */ .menu{padding:5px; /* background-color:#fffff;*/ /* background-image:url(""); background-repeat:repeat;*/}DIV.MNTTL{ BORDER-BOTTOM : 1PX #AAA SOLID; /* メニュータイトルの下線 */ PADDING : 0PX; MARGIN : 20px 0PX;color:#880000 ; /* メニュータイトルの文字色 */ }/* 本文部分内側、各記事の指定。図2では赤内側の白い部分です。今は背景色#ffffffをコメントアウトして色の指定はありません。色を指定したい場合は、コメントアウトの記号を消して有効にして下さい。 */ DIV.POST{ padding:5px; /* background-color:#fffff;*/ /* background-image:url(""); background-repeat:repeat;*/MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;}.POST_HEAD{ BORDER-BOTTOM : 1PX #CCC SOLID; /* 本文タイトルの下線 */ MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }.POST_TTL{ font-size:11pt; /* 本文タイトルの文字サイズ */ color:#880000 ; /* 本文タイトルの文字色 */ }.CAL_TODAY{ FONT : 9pt; BACKGROUND : #E3E3E3; /* カレンダー本日の背景色*/ COLOR : #3D5586; /* カレンダー本日の未投稿の時の文字色 */ TEXT-ALIGN : CENTER; }/*カスタマイズここまで*/ DIV.HEADER{ font-size : 15pt ; TEXT-ALIGN:LEFT;}DIV.URL{ font-size : 9pt ; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:LEFT;}DIV.USERMENU{ font-size : 9PT ; TEXT-ALIGN : RIGHT; MARGIN-BOTTOM : 7PX; }/*タイトルやURL文字サイズやフォントも弄りたかったらここまで*/ DIV.MN{ TEXT-ALIGN:LEFT; }DIV.MEMOBODY{ OVERFLOW : HIDDEN; }DIV.POST_ADMIN{ TEXT-ALIGN : RIGHT;}DIV.POST_BODY{ LINE-HEIGHT : 150%; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }DIV.POST_TAIL{ font-size : 11PX ; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }DIV.COMMENT{ BORDER : 1PX #D3D3D3 SOLID; PADDING : 15PX;MARGIN : 20PX 0PX; }DIV.COMMENT_BODY{ MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%;}DIV.COMMENT_TAIL{ MARGIN : 8PX 0PX 5PX; font-size : 9pt ;}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; }.page{text-align:center; margin : 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; }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-SIZE : 9pt ; }.TIME{ FONT-SIZE : 9pt ; TEXT-ALIGN : LEFT; }.AUTHOR{ FONT-SIZE : 9pt ; }.TXTFLD{ FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666666; BACKGROUND:#FFF; }.SUBMIT{ FONT-SIZE :9PT ;COLOR:#000; }DIV.CAL_TOP { }DIV.CAL { MARGIN : 20PX 0PX 20PX; TEXT-ALIGN : CENTER;}DIV.CAL_HEAD { FONT-SIZE : 9PT ; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}DIV.CAL_BODY { TEXT-ALIGN : CENTER;}DIV.CAL_BOTTOM { }.CAL{ FONT-SIZE : 9PT ; TEXT-ALIGN : CENTER; }.CAL_DAY{ FONT-SIZE : 9PT ; TEXT-ALIGN : CENTER; }.CAL_SUN{ FONT-SIZE : 9PT ; COLOR : #D36654; TEXT-ALIGN : CENTER;}.CAL_SAT{ FONT-SIZE : 9PT ; COLOR : #3572A1; TEXT-ALIGN : CENTER;}.CAL_TR { }DIV.XML { FONT-SIZE : 9PT ; TEXT-ALIGN : CENTER; }------------------------------------------------------------------------------------------★本文用HTML<$postsubject$> | <$postadmin type=2$> |
<$postcont$> <$posttail$> <$cmtjs$> <$mntitle$> <$mnbody$>------------------------------------------------------------------------------------------ /*カスタマイズここまで*/ と書かれているところより下は特に弄る必要がありません。途中に書き込んである説明を見ながら、希望のところだけ書き換えて下さい。（赤字の部分。これは消さなくてもコメントアウトされていますので、スキンに影響は与えませんが、うざいので出来上がったら消しちゃう方がいいでしょう(^^;）緑字の部分はCSS指定そのものが/*と*/でコメントアウトされています。これは、背景に画像を指定したい時のプロパティです。画像を指定したい方だけ、url("")の"と"の間に画像のアドレスを入れ、/*と*/を消してプロパティを有効にして下さい。画像を使わない場合はそのまま無視して構いません。図2で赤や青、緑になっている場所の背景色指定は、ソース中では背景画像指定と同じく/*と*/で囲んでコメントアウトしています。（こちらは赤字）そのままだと、bodyで指定した背景の色がそのまま出ます。色をつけたい部分だけ/*と*/を外して好きな色指定を有効にして下さい。リンクの色はトップ部分とその他の部分の２パターンだけの指定にしています。文字の色はメニュータイトル、本文タイトル以外は全部統一です。指定箇所はこのように極端に減らしていますが、それぞれの部分で色を変えたい、文字サイズを変えたいという場合、変えたい部分に指定を付け加えて頂ければOKです。（何処に入れればいいかは図2の色とソース中の説明を参考にどうぞ）本文タイトルやメニュータイトルの下線指定は、全体を囲むように変えたり、背景色指定を加えたりすることもできます。カレンダーの文字サイズはフォントの種類や色が多少見辛いものでも大丈夫なように大きめに設定しています。そこを変えたい場合、CSSの一番下にある、「.CAL」という文字の入ったプロパティ内で9ptになっているところを全部好きなサイズに変えて下さい。 |
 |
図1今回はとことん余計なCSS指定を削ったスキンです。プレビューページ>> ※プレビューページにはトップ、ログインなどのユーザーメニューと、記事の編集などのメニューは出ません。メニューも、上下や左右の振り分けを認識しないため綺麗な配置になっていません。リンクは無効になっているため、コメントを開くこともできません。雰囲気を見るだけのものとご了承下さい。何に使うかというと、カスタマイズの土台として使います。エキサイトのオリジナル用のスキンって、それでも結構ごちゃごちゃ指定が入っていて、慣れるまで相当改造しにくいです。これは、凝ったデザインには出来ませんが、色や壁紙を替えるだけでいいという方には、指定すべき箇所を減らしていますのでわかりやすいと思います。そういう訳で、これは好きに変えてもらうのが前提のスキンですから、ソースの中に、ここは何の指定というコメントを入れています。変えたい時はそこだけ変えて下さい。また絶対値の指定もとことん外しています。左右の割合もページ全体に対する%指定だけとしていますので、モニタのサイズもあまり気にしなくて大丈夫ですし、うっかりどこか消しちゃったりしても、全く読めないとか、横スクロールが異様に長くなったとかいう危険もほとんどないはずです。 
図2ええ、見るからに悪趣味な色使いですが、これは説明をわかりやすくするためです(^^;このような色指定にはしていませんのでご安心下さい。では、ソースをどうぞ。------------------------------------------------------------------------------------------2列のレイアウト(右) オリジナル 本文 500-ロゴ150- メニュー 150一応本文、ロゴ、メニューの指定はデフォルトのままにしていますが、これはあまり関係ありません。放っておいていいですし、ロゴなどもう少し大きくしてもよいです。------------------------------------------------------------------------------------------★メインページ用HTML