Ｕさん用スキン-5

ＣＳＳの続きです。
　これで最後ですよ。延々コピペ出来たら、保存ですよ。
スキン名・スキンイメージを登録して、出来上がりです。

　

ＣＳＳ編集　その２

IMG.IMAGE_TOP{ MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_LEFT{ MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_RIGHT{ MARGIN-LEFT : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_MID{ MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.BOOKMK{ MARGIN : 10PX; BORDER : 0PX; }
IMG.USERMENU{ MARGIN : 5PX; }
IMG.LOGO{ MARGIN-BOTTOM : 5PX; }

DIV.BANNER{ MARGIN : 10PX 0PX 10PX; }

.SMALL{ FONT-SIZE : 9PX; }
.DATE{ FONT : BOLD 8PT/150% TAHOMA; }
.TIME{ FONT : 8PT/150% TAHOMA; TEXT-ALIGN : LEFT; }
.AUTHOR{ FONT : BOLD 8PT TAHOMA; }
.TXTFLD{ FONT-SIZE:9PT;
COLOR:#333333;
BORDER:1PX SOLID #666678;
BACKGROUND:#FAFAFA; }
.SUBMIT{ FONT :9PT/140% ;COLOR:#000; }
.TAGS a {padding-left:0.5em;}
DIV.TAGS { MARGIN-TOP : 20PX;
TEXT-ALIGN : center;
FONT-SIZE : 10PT;}

IMGってのはそのまま、イメージ（画像）のこと。
画像を載せた際、周囲の空白部分をどれだけとるかという指定をしてますね。
　IMG.IMAGE_TOP・・・記事投稿欄の一番上に画像が来た時の空白
　IMG.IMAGE_LEFT・・・記事投稿欄の左寄せの画像の場合の空白
　IMG.IMAGE_RIGHT・・・記事投稿欄の右寄せの画像の場合の空白
　IMG.IMAGE_MID・・・記事投稿欄の中央寄せの画像の場合の空白
IMG.BOOKMK・・・ど、どれのことだったっけか（おいおい・・・）
IMG.USERMENU・・・トップ | 投稿 | 設定　の部分を画像表示した時の設定※
IMG.LOGO・・・Ｕさんのブログだと繊月城の写真が貼ってある、あれの部分

※　ユーザーメニューは　トップ | 投稿 | 設定　と　Valley | New Post | Config　と　　　　の３種類を選べるようになってまして、
その指定はＨＴＭＬの方。＜$adminmenu type=1$＞の、１＄を２＄もしくは３＄にすると変わります。
　　　ちなみに、あろぐでは３の画像のヤツを使っています。

BANNER・・・多分、このブログをマイリンクに登録とか書いてある画像のこと

.SMALLとか、このへんは、記事を投稿したら最下部に表示されてる「署名」・アップ日時・カテゴリなどの文字の設定。
このへんは、あんまり変える理由もないので、コレがコレ！ってのが断言できなくてすみません・・・。
そのあとに、タグの表示設定ですね。　（　Ｕさんタグ使ってないけど　）
　タグってのは、カテゴリの、さらに詳細に使える分類みたいなもんです。

DIV.CAL_TOP { }
DIV.CAL { MARGIN : 0PX 0PX 20PX;
WIDTH : 156PX;
TEXT-ALIGN : CENTER; BORDER : 2px 2px 2px 2px;
BORDER-COLOR: #5c9291;
BORDER-STYLE:SOLID; }

DIV.CAL_BODY { WIDTH : 152PX;
TEXT-ALIGN : CENTER;
PADDING : 0px 2px 10px 2px;}
DIV.CAL_BOTTOM { }
DIV.CAL_HEAD { WIDTH : 150PX;
FONT : 8PT/150% VERDANA;
TEXT-ALIGN : CENTER;
MARGIN : 7px 0px 5PX;}
.CAL{ FONT : 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.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 { FONT : BOLD 7PT/170% VERDANA;
BACKGROUND : #E3E3E3;
COLOR : #3D5586;
TEXT-ALIGN : CENTER; }
.CAL td a:link, .CAL td a:visited { display: block;
font-weight: bold;
background-color: #dcdcdc; }
.CAL td a:hover { color: #FFF;
background-color: #b0c4de; }
.CAL_TR { }

DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }

ＣＡＬ　ってのはカレンダーのこと。カレンダーの指定が延々と。
記事がある日、ない日、リンクの色とマウスを置いている時の色などなどなどが書いてあります。
このへん、もう、全部、パターンです。

詳細に、この指定がどの部分、というのは数値や色を変えて変化を確認したりしてます。
既存スキンの編集の場合とか、文法みたいのがそれぞれ違ってて判らなくなったりしますので。

あ、一番下に、ＸＭＬ｜ＡＴＯＭ　の文字設定ですね。
ちなみにＸＭＬもＡＴＯＭも、ＲＳＳへのリンクです。このへんはエキサイト独自の仕様で動いてるので何にも考えなくていいです。（　ＨＴＭＬの方で＜$xml$＞ってあったのがソレです　）
（　ＲＳＳとはなんぞや？ってあたりはwikiあたりでお願いします(ノ∀｀)　説明しにくいんですが、毎日チェックしたいニュースサイトやブログなどの更新状況を、　　そのサイトをいちいち開かなくてもチェックできるもの・・・みたいな感じです　）

blockquote {
MARGIN: 10px 15px 10px 15px;
PADDING: 10px 10px 10px 10px;
BACKGROUND: #d6e9ca;
BORDER: 2px;
BORDER-COLOR: #5c9291;
BORDER-STYLE:SOLID;}

引用枠の設定です。
Ｕさんは結構この引用枠を活用しているので、季節ごとに枠の中の色を変更したりして、遊んでみるのもいいと思いますよ。
　　MARGIN・・・枠と本文との空白部分の設定
　　PADDING・・・枠と、内側の文章との空白部分の設定
　　BACKGROUND・・・枠の中の背景の色
　　BORDER・・・枠の太さ
　　BORDER-COLOR・・・枠の色
　　BORDER-STYLE・・・枠の線種（SOLIDは塗りつぶし線、あろぐではDOTTED）
マージン＆パディングの指定ですが、上・右・下・左の順で指定されてます。
　　　基本的に私は４つ並べて設定してますが、
　　　部分的に３つとか２つとかしか、数字がない時があるかと思います。
　　　それの説明については　＞＞こちらを参照してみるといいかもです。
線種をいじってみたい場合、＞＞こちらのページを見てみてくださいませ。

　ちなみに、引用枠、設定してあるのは　バックの色　#d6e9ca　ですが、
記事内にて、色指定することも出来たりします。（　上で使ってますね　）
その場合は、記事でのＨＴＭＬに以下のように書きます。＃（6桁の英数字）は、色指定ね。
<blockquote style="background-color:#e6eae3;"></blockquote>
あんまり１記事の中で３色も４色もあると鬱陶しくなりますが、たまにならいいのかなと。

h3.komidasi {
PADDING-TOP: 5px;
PADDING-BOTTOM: 3px;
PADDING-RIGHT: 3px;
PADDING-LEFT: 10px;
BORDER-TOP: 0px solid #2a83a2;
BORDER-BOTTOM: 1px solid #2a83a2;
BORDER-RIGHT: 0px solid #2a83a2;
BORDER-LEFT: 5px solid #2a83a2;
MARGIN: 30px 30px 15px 10px;
FONT: medium 'Arial';
COLOR: #544a47;
TEXT-INDENT: 0px; }

小見出しの設定です。
指定の仕方なんかは、ほぼ、上と似たようなもんです。
使う時は、以下のＨＴＭＬタグを記事にて使って下さい。
<h3 class="komidasi">ここに文字</h3>

　で、エキサイトブログのコツとして、
折りたたみ部分を開いた時、文字が画面の上きっちきちに表示されてしまうのが、ちょっと見づらいと思う時ないですか。私は読みにくいと思うんですよ。
なので、書く時のちょっとしたコツとして、折りたたみの書き始めのところを、
　　　　　[　スペース１文字　]　[　改行　]　　←この１文字分の空白がミソなのです
　　　　　[　本文開始　（　または小見出し　）　]
という風にすると、読みやすさが全然違います。

以上で、スキン解説は終了ですが、質問などあれば、ヴァナででもここにでも、どんどん聞いてくださいませ。私も素人なので、判らない部分も多々あるのですが、判る範囲で説明できたらと思います。

あ、お礼は熊本銘菓で＾＾　（　冗談ですけどね　）